Fragment+ViewPager+底部滑动

Fragment+ViewPage加项目开发中经常会用到,到使用时总会感觉手忙脚乱，今天总结下

先放上效果图:

随着页面的切换，标题下的那条线会随着滑动

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="#e5e5e5"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="okhttp.example.com.fragment.MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ff5a5f"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp">

            <TextView
                android:id="@+id/tv_person"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:clickable="true"
                android:gravity="center"
                android:text="title1"
                android:textColor="#ffffff"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/tv_shopping"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:clickable="true"
                android:gravity="center"
                android:text="title2"
                android:textColor="#ffffff"
                android:textSize="18sp" />
        </LinearLayout>

        <ImageView
            android:id="@+id/tabline"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="tabline"
            android:scaleType="matrix"
            android:src="@drawable/tabline" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

MainActivity代码

public class FriendActivity extends BaseActivity {
    @Bind(R.id.back)
    ImageView back;
    @Bind(R.id.tv_person)
    TextView tvPerson;
    @Bind(R.id.tv_shopping)
    TextView tvShopping;
    @Bind(R.id.viewPager)
    ViewPager viewPager;
    @Bind(R.id.tabline)
    ImageView tabline;
    private PersonFragment personFragment;
    private ShoppingFragment shoppingFragment;

    List<Fragment> list;
    private MyFriendFragmentAdapter myFriendFragmentAdapter;

    private int bmp_width = 0;//游标宽度
    private int offset = 0;//游标图片偏移量
    private int number = 0;// 初始化当前页为0（第一页）

    @Override
    public int getLayoutId() {
        return R.layout.myfriend_layout;
    }

    @Override
    public void initView() {
        personFragment = new PersonFragment();
        shoppingFragment = new ShoppingFragment();

        list = new ArrayList<>();
        list.add(personFragment);
        list.add(shoppingFragment);

        initCursorPos();

        myFriendFragmentAdapter = new MyFriendFragmentAdapter(getSupportFragmentManager(), list);
        viewPager.setAdapter(myFriendFragmentAdapter);

        viewPager.setCurrentItem(0);
        viewPager.addOnPageChangeListener(new NewPageChangeListener());
    }


    @OnClick({R.id.tv_person, R.id.tv_shopping})
    public void click(View view) {
        switch (view.getId()) {
            case R.id.tv_person:
                viewPager.setCurrentItem(0);
                break;

            case R.id.tv_shopping:
                viewPager.setCurrentItem(1);
                break;
        }
    }

    @Override
    public void initData() {}


    //初始化指示器位置
    public void initCursorPos() {
        // 初始化动画
        bmp_width = BitmapFactory.decodeResource(getResources(), R.drawable.tabline)
                .getWidth();// 获取图片宽度

        DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象
        getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中
        int s_width = dm.widthPixels;// 获取分辨率宽度
        offset = (s_width / list.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间)

        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        tabline.setImageMatrix(matrix);// 设置动画初始位置
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ButterKnife.bind(this);
    }


    //页面改变监听器
    public class NewPageChangeListener implements ViewPager.OnPageChangeListener {
        int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量
        int two = one * 2;// 页卡1 -> 页卡3 偏移量

        @Override
        public void onPageSelected(int arg0) {
            Animation animation = null;
            switch (arg0) {
                case 0:
                    if (number == 1) {
                        animation = new TranslateAnimation(one, 0, 0, 0);
                    } else if (number == 2) {
                        animation = new TranslateAnimation(two, 0, 0, 0);
                    }
                    break;
                case 1:
                    if (number == 0) {
                        animation = new TranslateAnimation(offset, one, 0, 0);
                    } else if (number == 2) {
                        animation = new TranslateAnimation(two, one, 0, 0);
                    }
                    break;
                case 2:
                    if (number == 0) {
                        animation = new TranslateAnimation(offset, two, 0, 0);
                    } else if (number == 1) {
                        animation = new TranslateAnimation(one, two, 0, 0);
                    }
                    break;

            }
            number = arg0;
            animation.setFillAfter(true);// True:图片停在动画结束位置
            animation.setDuration(300);
            tabline.startAnimation(animation);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }

}

下载源码](http://download.csdn.net/download/qq_23668969/10024714)