ViewPager指示器

效果：ViewPager跟随Tab动，底端绘制三角形

布局文件中：

 <com.bw.view.ViewPagerIndicator

        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="horizontal"
        android:id="@+id/viewpager_indicator"
        hyman:visible_tab_coount="4"
        android:background="@android:color/holo_green_light">
    
    </com.bw.view.ViewPagerIndicator>

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:id="@+id/vp"></android.support.v4.view.ViewPager>

自定义一个类 ，继承LinearLayout

public class ViewPagerIndicator extends LinearLayout{
    //画笔
    private Paint mPaint;
    //构造三角形
    private Path mPath;
    //三角形的宽，高,
    private int mTriangleWidth;
    //三角形的底边的长度，相对于的每一个TextVIew的底边的宽度。我们可以定义为1/6
    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;
    //设置可见的TextView的数量
    private int mTabVisibleCount;
    private static final int COUNT_DEFAULT_TAB = 4;
    //设置颜色的常量
    private static final int COLOR_TEXT_MORMAL = 0x77FFFFFF;
    private static final int COLOR_TEXT_HIGHLIGHT = 0xFF0000;
    //存放title
    private List<String> mTites;
    private ViewPager mViewPager;
    public PageOnchangeListener mListener;
    
    
    
    public ViewPagerIndicator(Context context) {
        this(context, null);
    }
    
    public ViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        
        //获取可见tab的数量
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);
        
        mTabVisibleCount = a.getInt(R.styleable.ViewPagerIndicator_visible_tab_coount, COUNT_DEFAULT_TAB);
        //如果用户传入的值<0，就设置为默认值
        if(mTabVisibleCount < 0){
            mTabVisibleCount = COUNT_DEFAULT_TAB;
        }
        //释放
        a.recycle();
        
        //初始化画笔
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#FFFFFF"));
        mPaint.setStyle(Style.FILL);
        mPaint.setPathEffect(new CornerPathEffect(3));
        
    }
    
    //当attr文件加载完之后，会回调这个方法
    protected void onFinishInflate() {
        super.onFinishInflate();
        //那到子元素的个数
        int cCount = getChildCount();
        if(cCount == 0){
            return;
        }
        
        for(int i=0;i<cCount;i++){
            //那到每一个子View
            View view = getChildAt(i);
            LinearLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams();
            lp.weight = 0;
            //设置子view的宽度
            lp.width = getScreenWidth()/mTabVisibleCount;
            view.setLayoutParams(lp);
        }
        
        setItemClickEvent();
    }
    
    //获得屏幕的宽度
    private int getScreenWidth() {
        WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        //通过WindowManager获得
        wm.getDefaultDisplay().getMetrics(outMetrics);
        //返回屏幕的宽度
        return outMetrics.widthPixels;
    }

    //设置三角形的大小(只要控件的宽高，发生变化，就会调用的方法)
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //底边的宽度
        mTriangleWidth = (int) (w/mTabVisibleCount*RADIO_TRIANGLE_WIDTH);
        mTriangleWidth = Math.min(mTriangleWidth, DIMENSION_TRIANGLE_WIDTH_MAX);
        //初始时的偏移量
        mInitTranslationX = w/mTabVisibleCount/2-mTriangleWidth/2;
        //初始化三角形
        initTriangle();
    }

    //初始化三角形
    private void initTriangle() {
        //初始化画板,绘制三角形
        mPath = new Path();
        mPath.moveTo(0, 0);
        mPath.lineTo(mTriangleWidth, 0);
        mPath.lineTo(mTriangleWidth/2, -mTriangleWidth/2);
        mPath.close();
    }

    //绘制三角形
    protected void dispatchDraw(Canvas canvas) {
        //绘制三角形
        canvas.save();
        canvas.translate(mInitTranslationX+mTranslationX, getHeight()+2);
        canvas.drawPath(mPath, mPaint);
        canvas.restore();
        super.dispatchDraw(canvas);
    }

    //指示器跟随手指进行滚动
    public void scroll(int position, float offset) {
       int tabWidth = getWidth()/mTabVisibleCount;
       mTranslationX = (int) (tabWidth*(offset+position));
       //但移动到倒数第二个的时候
       //容器移动，当tab处于移动至最后一个时
       if(position>=(mTabVisibleCount-2)&&offset>0&&getChildCount()>mTabVisibleCount){
           
           //在mTabVisibleCount是1的时候
           if(mTabVisibleCount != 1){
                 this.scrollTo(((position-(mTabVisibleCount-2))*tabWidth+(int)(tabWidth*offset)),0);
           }else{
               this.scrollTo(position*tabWidth+(int)(tabWidth*offset), 0);
           }
           
       }
       
       //调用重汇方法
       invalidate();
    }

    //动态添加TextView
    public void setTabItemTitles(List<String> titles){
        if(titles!=null&&titles.size()>0){
            //全部移除布局中的title
            this.removeAllViews();
            mTites = titles;
            for(String title : mTites){
                addView(genetateTextView(title));
            }
            
            setItemClickEvent();
        }
    }
    
    //设置可见的Tab数量
    public void setVisibleTab(int count){
        mTabVisibleCount = count;
    }
   
    //根据title创建tab
    private View genetateTextView(String title) {
        TextView tv = new TextView(getContext());
        LinearLayout.LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
        lp.width = getScreenWidth()/mTabVisibleCount;
        tv.setText(title);
        tv.setGravity(Gravity.CENTER);
        tv.setTextSize(16f);
        tv.setTextColor(COLOR_TEXT_MORMAL);
        tv.setLayoutParams(lp);
        return tv;
    }
    
    //设置关联的ViewPager
    public void setViewPager(ViewPager viewPager,int pos){
        mViewPager = viewPager;
           mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
                
                public void onPageSelected(int arg0) {
                   if(mListener !=null){
                       mListener.onPageSelected(arg0);
                   }
                   //在选择的时候
                   hightLightTextView(arg0);
                }
                
                public void onPageScrolled(int arg0, float arg1, int arg2) {
                    scroll(arg0, arg1);
                    if(mListener !=null){
                        mListener.onPageScrolled(arg0, arg1, arg2);
                    }
                }
                
                public void onPageScrollStateChanged(int arg0) {
                    if(mListener!=null){
                        mListener.onPageScrollStateChanged(arg0);
                    }
                }
            });
           //设置默认值
           mViewPager.setCurrentItem(pos);
           //设置默认值为高亮状态
           hightLightTextView(pos);
    }

    //创建一个接口，方便ManiActivity中的VIewPager调用,以免冲突
    public interface PageOnchangeListener{

        public void onPageSelected(int position);
        
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
        
        public void onPageScrollStateChanged(int state);
    }
    
    //供外界调用的方法
    public void setOnPagechangeListener(PageOnchangeListener listener){
        this.mListener = listener;
    }
    
    //高亮某个Tab文本
    private void hightLightTextView(int pos){
        //调用重置Tab文本颜色
        resetTextViewColor();
        //设置高亮某个Tab文本
        View view = getChildAt(pos);
        if(view instanceof TextView){
            ((TextView) view).setTextColor(Color.RED);
        }
    }
    
    //重置Tab文本颜色
    public void resetTextViewColor(){
        for(int i=0;i<getChildCount();i++){
            View view = getChildAt(i);
            if(view instanceof TextView){
                ((TextView) view).setTextColor(COLOR_TEXT_MORMAL);
            }
        }
    }

    //设置Tab点击的事件
    public void setItemClickEvent(){
        int cCount = getChildCount();
        for(int i = 0;i<cCount;i++){
            final int j = i;
            View view = getChildAt(i);
            view.setOnClickListener(new OnClickListener() {
                
                public void onClick(View v) {
                    mViewPager.setCurrentItem(j);
                }
            });
        }
    }

}

//在MainActivity里边

public class MainActivity extends FragmentActivity {

    private ViewPager mViewPager;
    private ViewPagerIndicator mIndicator;
    private FragmentPagerAdapter mAdapter;
    private List<String> mList = Arrays.asList("查询1","添加2","展示3","查询4","添加5","展示6","查询7","添加8","展示9");
    private List<VpSimpleFragment> mContents = new ArrayList<VpSimpleFragment>();

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        //初始化控件
        initView();
        //初始化数据
        initDatas();
        
        //调用ViewPager指示器里边的方法
        mIndicator.setVisibleTab(4);
        mIndicator.setTabItemTitles(mList);
        mIndicator.setViewPager(mViewPager, 0);
        
        mViewPager.setAdapter(mAdapter);
        
        mIndicator.setOnPagechangeListener(new PageOnchangeListener() {
            
            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub
                
            }
            
            @Override
            public void onPageScrolled(int position, float positionOffset,
                    int positionOffsetPixels) {
                // TODO Auto-generated method stub
                
            }
            
            @Override
            public void onPageScrollStateChanged(int state) {
                // TODO Auto-generated method stub
                
            }
        });
    }

     //初始化控件
    private void initView() {
          mViewPager = (ViewPager) findViewById(R.id.vp);
          mIndicator = (ViewPagerIndicator) findViewById(R.id.viewpager_indicator);
    }

    //初始化数据
    private void initDatas() {
        //往Fragment集合中，添加数据信息
        for(int i = 0;i<mList.size() ;i++){
            VpSimpleFragment fragment = VpSimpleFragment.newInstance(mList.get(i));
            mContents.add(fragment);
        }
        
        //初始化适配器
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            
            public int getCount() {
                return mList.size();
            }
            
            public Fragment getItem(int arg0) {
                return mContents.get(arg0);
            }
        };
    }
    
}

//fragment中

public class VpSimpleFragment extends Fragment{
    private String mTitle;
    public static final String BUNDLE_KEY = "title";
    
    //创建一个方法，在实例化的时候，将值放在Arguments
    public static VpSimpleFragment newInstance(String title){
        //将获得到的值，放置bundler
        Bundle bundle = new Bundle();
        bundle.putString(BUNDLE_KEY, title);
        VpSimpleFragment fragment = new VpSimpleFragment();
        fragment.setArguments(bundle);
        return fragment;
    }
    
    
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        //取出放在Arguments中的值
        Bundle bundle = getArguments();
        if(bundle != null){
            mTitle = bundle.getString(BUNDLE_KEY);
        }
        //自定义一个TextView
        TextView tv = new TextView(getActivity());
        tv.setText(mTitle);
        tv.setTextSize(20f);
        tv.setGravity(Gravity.CENTER);
        return tv;
    }

    
}