ViewPager+Fragment组成滑动且带有光标

效果如图：

这个实现了可以自由滑动viewpager切换fragment

最下面有Demo

MainActivity

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.iv_line)
    ImageView imageView;
    @Bind(R.id.viewpager)
    ViewPager viewPager;


    @OnClick({R.id.group_one, R.id.group_two, R.id.group_three})
    public void onBtnClick(View view) {
        switch (view.getId()) {
            case R.id.group_one:
                viewPager.setCurrentItem(0);
                break;
            case R.id.group_two:
                viewPager.setCurrentItem(1);
                break;
            case R.id.group_three:
                viewPager.setCurrentItem(2);
                break;
        }

    }

    private int ivWidth;
    private ArrayList<Fragment> mDatas;
    private FragmentPagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        init();

    }

    private void init() {

        Display display = getWindow().getWindowManager().getDefaultDisplay();
        DisplayMetrics dm = new DisplayMetrics();
        display.getMetrics(dm);
        ivWidth = (dm.widthPixels / 3);
        mDatas = new ArrayList<>();
        TestFragment1 testFragment1 = new TestFragment1();
        TestFragment2 testFragment2 = new TestFragment2();
        TestFragment3 testFragment3 = new TestFragment3();
        mDatas.add(testFragment1);
        mDatas.add(testFragment2);
        mDatas.add(testFragment3);


        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

            @Override
            public Fragment getItem(int position) {
                return mDatas.get(position);
            }

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

        viewPager.setAdapter(mAdapter);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) imageView.getLayoutParams();
                lp.leftMargin = position * ivWidth + (int) (positionOffset * ivWidth);
                lp.width = ivWidth;//这里动态设置光标的长度，以便适配不同的分辨率
                imageView.setLayoutParams(lp);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
}

主布局也比较简单  就是几个组合在一起

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="test.test.demo.MainActivity">


    <include
        android:id="@+id/include_group"
        layout="@layout/group"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center" />

    <ImageView
        android:id="@+id/iv_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/include_group"
        android:background="@drawable/tabline"
        android:src="@drawable/tabline" />

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


</RelativeLayout>

几个界面的Fragment就不贴了。就是测试页面

Demo下载地址