自定义ViewPager的指示条---Indicate

自定义ViewPager的指示条—Indicate

   ONE Goal,ONE Passion!

好久都没有写东西了,5-1公司组织去重渡沟,风景真心不怎样.不过还是挺值得回忆的.
当想使用viewpager时又想给每个pagerAdapter增加指示条,那就要去集成IndicateViewPager.每次都去集成,感觉很low.还是写自己的吧.

实现原理:
监听viewPager的滑动,根据一个item移动的偏移量来移动指示条
1,偏移距离 = 百分比*指示器的宽度    
2,起始位置 = position*指示器的宽度
3,最终位置 = 起始位置+偏移距离
4,平移指示条: View.setTranslationX(endX);

第一步:Indicator的实现

// activity一定要继承FragmentActivity 否则不能得到getSupportFragmentManager();

public class IndicatorActivity extends FragmentActivity implements View.OnClickListener {


    View indicate_line;
    ViewPager view_Pager;
    List<Fragment> mList;
    MyAdapter adapter;
    int width;  //屏幕宽度

    TextView tv_music, tv_video, tv_other;


    //ViewPager 滑动的监听
    private ViewPager.OnPageChangeListener listener = new ViewPager.OnPageChangeListener() {


        /**
         *   页面滑动过程中的回调
         * @param position   当前索引
         * @param positionOffset    偏移量
         * @param positionOffsetPixels
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {


            /**
             * 偏移距离：百分比*指示器的宽度 起始位置：position*指示器的宽度 最终位置：起始位置+偏移距离
             *
             */


            float offsetX = positionOffset * indicate_line.getWidth();
            float startX = position * indicate_line.getWidth();
            float endX = startX + offsetX;

            //     ViewHelper.setTranslationX(indicate_line, endX);

            indicate_line.setTranslationX(endX);
        }

        // 页面发生了改变的回调
        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.layout_indicator);

        initView();


    }


    private void initView() {

        indicate_line = (View) findViewById(R.id.indicate_line);
        view_Pager = (ViewPager) findViewById(R.id.viewPager);

        tv_music = (TextView) findViewById(R.id.tv_music);
        tv_video = (TextView) findViewById(R.id.tv_video);
        tv_other = (TextView) findViewById(R.id.tv_other);


        mList = new ArrayList<>();

        //  为viewPager注册滑动监听
        view_Pager.setOnPageChangeListener(listener);
        tv_music.setOnClickListener(this);
        tv_video.setOnClickListener(this);
        tv_other.setOnClickListener(this);

        mList.add(new Fragment_music());
        mList.add(new Fragment_video());
        mList.add(new Fragment_other());


        adapter = new MyAdapter(getSupportFragmentManager());

        view_Pager.setAdapter(adapter);


        initIndicateWidth();

    }

    /**
     * 初始化索引的宽度
     */
    private void initIndicateWidth() {

        width = getResources().getDisplayMetrics().widthPixels;

        ViewGroup.LayoutParams layoutParams = indicate_line.getLayoutParams();

        layoutParams.width = width / mList.size();

        //  indicate_line.setLayoutParams(layoutParams);
        indicate_line.invalidate(); //  两种方法都可以

    }
// 为指示条增加监听
    @Override
    public void onClick(View v) {
        int position = 0;
        switch (v.getId()) {
            case R.id.tv_music:

                position = 0;

                break;
            case R.id.tv_video:

                position = 1;
                break;
            case R.id.tv_other:

                position = 2;
                break;

        }
        view_Pager.setCurrentItem(position, true);
    }


    public class MyAdapter extends FragmentPagerAdapter {
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }


        @Override
        public android.support.v4.app.Fragment getItem(int position) {
            return mList.get(position);
        }

        @Override
        public int getCount() {
            return mList.size();
        }
    }


}

关键性代码:

/** * 偏移距离：百分比*指示器的宽度 起始位置：position*指示器的宽度
       最终位置：起始位置+偏移距离
*
*/


            float offsetX = positionOffset *indicate_line.getWidth();
            float startX = position * indicate_line.getWidth();
            // 指示条要移动到的X坐标
            float endX = startX + offsetX;


     //setTranslationX将view的left边的position平移到X位置
            indicate_line.setTranslationX(endX);

---

第二步:R.layout.layout_indicator的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/ll_title"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/title_bg">

        <TextView
            android:id="@+id/tv_music"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="音乐"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/tv_video"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="视频"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/tv_other"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="其他"
            android:textSize="20dp" />

    </LinearLayout>

    <View
        android:id="@+id/indicate_line"
        android:layout_width="50dp"
        android:layout_height="2dp"
        android:layout_below="@id/ll_title"
        android:background="@color/colorAccent" />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/indicate_line">

    </android.support.v4.view.ViewPager>

</RelativeLayout>

第三步:下面是对应的fragment

public class Fragment_music extends Fragment {


    public Fragment_music() {

    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_fragment_music, container, false);
    }


}

// Fragment的布局 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff00ff"
    tools:context="com.example.recyclerviewtest.fragment.Fragment_music">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="音乐"
        android:textSize="50dp" />

</FrameLayout>

这个indicate实现时,指示条的个数在布局中写死了.正在使用到项目中时我们应该根据需要显示的个数去设置指示条的个数,等有时间了.再把这个完善一下.