自定义ViewPager指示器

ViewPagerIndicator

package com.example.videopagerindicator.view;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.CornerPathEffect;import android.graphics.Paint;import android.graphics.Path;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.TypedValue;import android.view.Gravity;import android.view.View;import android.view.WindowManager;import android.widget.LinearLayout;import android.widget.TextView;import com.example.videopagerindicator.R;import java.util.List;/** * Created by apple on 16/9/22. */public class ViewPagerIndicator extends LinearLayout {    private Paint mPaint;    private Path mPath;    private int mTriangleWidth;    private int mTriangleHeight;    private static final float RADIO_TRIANGLE_WIDTH = 1 / 6F;    //三角形的最大底边宽度    private final int DIMENSION_TRIANGLE_WIDTH_MAX = (int) (getScreenWidth() / 3 *            RADIO_TRIANGLE_WIDTH);    private int mInitTranslationX;    private int mTranslationX;    private int mTabVisiableCount;    private static final int COUNT_DEFAULT_TAB = 3;    private List<String> mTitles;    private static final int COLOR_TEXT_NORMAL = 0x77FFFFFF;    private static final int COLOR_TEXT_HIGHLIGHT = 0xFFFFFFFF;    public ViewPagerIndicator(Context context) {        super(context);    }    public ViewPagerIndicator(Context context, AttributeSet attrs) {        super(context, attrs);        //获取可见tab数量        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);        mTabVisiableCount = a.getInt(R.styleable.ViewPagerIndicator_visible_tab_count,                COUNT_DEFAULT_TAB);        if (mTabVisiableCount < 0) {            mTabVisiableCount = COUNT_DEFAULT_TAB;        }        a.recycle();        //初始化画笔        mPaint = new Paint();        mPaint.setAntiAlias(true);        mPaint.setColor(Color.parseColor("#ffffff"));        mPaint.setStyle(Paint.Style.FILL);        mPaint.setPathEffect(new CornerPathEffect(3));//连接处的角设置为圆角    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        mTriangleWidth = (int) (w / mTabVisiableCount * RADIO_TRIANGLE_WIDTH);        mTriangleWidth = Math.min(mTriangleWidth,DIMENSION_TRIANGLE_WIDTH_MAX);        mInitTranslationX = w / mTabVisiableCount / 2 - mTriangleWidth / 2;        initTriangle();    }    /**     * 绘制三角形     */    private void initTriangle() {        mTriangleHeight = mTriangleWidth / 2;        mPath = new Path();        mPath.moveTo(0, 0);        mPath.lineTo(mTriangleWidth, 0);        mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight);        mPath.close();    }    /**     * 开始绘画 显示在canvas上     * @param canvas     */    @Override    protected void dispatchDraw(Canvas canvas) {        canvas.save();        canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 2);        canvas.drawPath(mPath, mPaint);        canvas.restore();        super.dispatchDraw(canvas);    }    /**     * 指示器跟随手指移动     *     * @param position     * @param Offset     */    public void scroll(int position, float Offset) {        int tabWidth = getWidth() / mTabVisiableCount;        mTranslationX = (int) (tabWidth * (Offset + position));        //容器移动,当tab移动到最后一个时        if (position >= mTabVisiableCount - 2 && Offset > 0 && getChildCount() >                mTabVisiableCount) {            if (mTabVisiableCount != 1) {                this.scrollTo((position - (mTabVisiableCount - 2)) * tabWidth + (int) (tabWidth *                        Offset), 0);            } else {                this.scrollTo(position * tabWidth + (int) (Offset * tabWidth), 0);            }        }        //重新绘制        invalidate();    }    @Override    protected void onFinishInflate() {        super.onFinishInflate();        int cCount = getChildCount();        for (int i = 0; i < cCount; i++) {            View view = getChildAt(i);            LinearLayout.LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();            layoutParams.weight = 0;            layoutParams.width = getScreenWidth() / mTabVisiableCount;            view.setLayoutParams(layoutParams);        }        setItemClickEvent();    }    //获得屏幕的宽度    private int getScreenWidth() {        WindowManager systemService = (WindowManager) getContext().getSystemService(Context                .WINDOW_SERVICE);        DisplayMetrics outMetrics = new DisplayMetrics();        systemService.getDefaultDisplay().getMetrics(outMetrics);        return outMetrics.widthPixels;    }    public void setTabItemTitls(List<String> titles) {        if (titles != null && titles.size() > 0) {            this.removeAllViews();            mTitles = titles;            for (String title : mTitles) {                addView(generateTextView(title));            }            setItemClickEvent();        }    }    public void setVisiableTabCount(int count) {        mTabVisiableCount = count;    }    /**     * 根据title创建tab     *     * @param title     * @return     */    private View generateTextView(String title) {        TextView tv = new TextView(getContext());        LinearLayout.LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams                .MATCH_PARENT);        lp.width = getScreenWidth() / mTabVisiableCount;        tv.setText(title);        tv.setGravity(Gravity.CENTER);        tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);        tv.setTextColor(COLOR_TEXT_NORMAL);        tv.setLayoutParams(lp);        return tv;    }    private ViewPager mViewPager;    /**     * 提供接口 如果外部需要监听 实现这个接口即可     */    public interface PageOnChangeListener {        void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);        void onPageSelected(int position);        void onPageScrollStateChanged(int state);    }    public PageOnChangeListener mPageOnChangeListener;    public void setPageOnChangeListener(PageOnChangeListener pageOnChangeListener) {        this.mPageOnChangeListener = pageOnChangeListener;    }    /**     * 设置关联的viewpager     *     * @param viewPager     * @param pos     */    public void setViewPager(ViewPager viewPager, int pos) {        mViewPager = viewPager;        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int                    positionOffsetPixels) {                //tabWidth * positionOffset + position * tabWidth                //positionOffset 梯度值                scroll(position, positionOffset);                if (mPageOnChangeListener != null) {                    mPageOnChangeListener.onPageScrolled(position, positionOffset,                            positionOffsetPixels);                }            }            @Override            public void onPageSelected(int position) {                if (mPageOnChangeListener != null) {                    mPageOnChangeListener.onPageSelected(position);                }                highLightTextView(position);            }            @Override            public void onPageScrollStateChanged(int state) {                if (mPageOnChangeListener != null) {                    mPageOnChangeListener.onPageScrollStateChanged(state);                }            }        });        mViewPager.setCurrentItem(pos);        highLightTextView(pos);    }    /**     * 高亮某个tab文本     */    private void highLightTextView(int pos) {        resetTextViewColor();        View view = getChildAt(pos);        if (view instanceof TextView) {            ((TextView) view).setTextColor(COLOR_TEXT_HIGHLIGHT);        }    }    /**     * 重置tab文本颜色     */    private void resetTextViewColor() {        for (int i = 0; i < getChildCount(); i++) {            View view = getChildAt(i);            if (view instanceof TextView) {                ((TextView) view).setTextColor(COLOR_TEXT_NORMAL);            }        }    }    /**     * 实现tab点击的功能     */    private void setItemClickEvent() {        int cCount = getChildCount();        for (int i = 0; i < cCount; i++) {            final int j = i;            View view = getChildAt(i);            view.setOnClickListener(new OnClickListener() {                @Override                public void onClick(View view) {                    mViewPager.setCurrentItem(j);//由于i在内部类里,外部必须是final的,可以用中间j来代替                }            });        }    }}

MainActivity 

package com.example.videopagerindicator;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.widget.Toast;import com.example.videopagerindicator.view.ViewPagerIndicator;import java.util.ArrayList;import java.util.Arrays;import java.util.List;public class MainActivity extends FragmentActivity {    private ViewPager mViewPager;    private ViewPagerIndicator mViewPagerIndicator;    private List<String> mTitles = Arrays.asList("短信", "收藏", "推荐", "短信1", "收藏1", "推荐1");    private List<VpSimpleFragment> mContents = new ArrayList<>();    private FragmentPagerAdapter mAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main2);        initViews();        initDatas();        //设置显示tab的数量 及标题        mViewPagerIndicator.setVisiableTabCount(5);        mViewPagerIndicator.setTabItemTitls(mTitles);        mViewPager.setAdapter(mAdapter);        mViewPagerIndicator.setViewPager(mViewPager, 0);        //若果仍然需要监听viewpager的滚动 则实现自己实现的接口即可        mViewPagerIndicator.setPageOnChangeListener(new ViewPagerIndicator.PageOnChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int                    positionOffsetPixels) {                Toast.makeText(MainActivity.this, "onPageScrolled"+position+"=="+positionOffset+"==="+positionOffsetPixels, Toast.LENGTH_SHORT).show();            }            @Override            public void onPageSelected(int position) {            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    private void initViews() {        mViewPager = (ViewPager) findViewById(R.id.viewpager);        mViewPagerIndicator = (ViewPagerIndicator) findViewById(R.id.viewpagerindicator);        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public Fragment getItem(int position) {                return mContents.get(position);            }            @Override            public int getCount() {                return mContents.size();            }        };    }    private void initDatas() {        for (String title : mTitles) {            VpSimpleFragment framFragment = VpSimpleFragment.newInstance(title);            mContents.add(framFragment);        }    }}

VpSimpleFragment 

package com.example.videopagerindicator;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * Created by apple on 16/9/22. */public class VpSimpleFragment extends Fragment {    private String mTitle;    public static final String BUNDLE_TITLE = "title";    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable            Bundle savedInstanceState) {        Bundle bundle = getArguments();        if (bundle != null) {            mTitle = bundle.getString(BUNDLE_TITLE);        }        TextView tv = new TextView(getActivity());        tv.setText(mTitle);        tv.setGravity(Gravity.CENTER);        return tv;    }    public static VpSimpleFragment newInstance(String title) {        Bundle bundle = new Bundle();        bundle.putString(BUNDLE_TITLE, title);        VpSimpleFragment fragment = new VpSimpleFragment();        fragment.setArguments(bundle);        return fragment;    }}

activity_main.xml 

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:ban="com.example.videopagerindicator.view.ViewPagerIndicator"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.videopagerindicator.MainActivity">    <com.example.videopagerindicator.view.ViewPagerIndicator        android:id="@+id/viewpagerindicator"        android:layout_width="match_parent"        android:layout_height="45dp"        android:background="@color/colorPrimary"        android:orientation="horizontal"        ban:visible_tab_count="5"        >        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="短信"            android:textColor="#000000"            android:textSize="16sp"            />        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="收藏"            android:textColor="#000000"            android:textSize="16sp"            />        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="推荐"            android:textColor="#000000"            android:textSize="16sp"            />        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="短信1"            android:textColor="#000000"            android:textSize="16sp"            />        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="收藏1"            android:textColor="#000000"            android:textSize="16sp"            />        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="推荐1"            android:textColor="#000000"            android:textSize="16sp"            />        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="短信2"            android:textColor="#000000"            android:textSize="16sp"            />        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="收藏2"            android:textColor="#000000"            android:textSize="16sp"            />        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="推荐2"            android:textColor="#000000"            android:textSize="16sp"            />    </com.example.videopagerindicator.view.ViewPagerIndicator>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        >    </android.support.v4.view.ViewPager></LinearLayout>

activity_main2.xml 

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:ban="com.example.videopagerindicator.view.ViewPagerIndicator"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.videopagerindicator.MainActivity">    <com.example.videopagerindicator.view.ViewPagerIndicator        android:id="@+id/viewpagerindicator"        android:layout_width="match_parent"        android:layout_height="45dp"        android:background="@color/colorPrimary"        android:orientation="horizontal"        ban:visible_tab_count="5"        >    </com.example.videopagerindicator.view.ViewPagerIndicator>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        >    </android.support.v4.view.ViewPager></LinearLayout>

attr.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <attr name="visible_tab_count" format="integer"/>    <declare-styleable name="ViewPagerIndicator">        <attr name="visible_tab_count"/>    </declare-styleable></resources>