经典的ViewPager+Fragment界面

我们经常遇到一些界面需要切换多个Fragment（碎片），并带有可点击的标题。

今天介绍一下自己做的ViewPager+Fragment的界面，先上图：（手机录制屏幕再转gif）

然后是代码，先是布局：（为了降低复杂性，我删除了部分代码，我们只关注ViewPager+Fragment的实现）

其中cursor是可移动的橙色光标，include的title大家可以忽略掉，ViewPager的title是include下面的RelativeLayout包裹的内容。

布局很简单，LinearLayout中是所有title的内容，然后用RelativeLayout包裹住这个LinearLayout与光标cursor，最后下面添上ViewPager。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:background="#eeeeee"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tx_title_left"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:layout_height="match_parent"
                android:text="@string/current_assets"
                android:gravity="center"
                android:textSize="16sp"
                android:textColor="#ff9600"/>

            <TextView
                android:id="@+id/tx_title_right"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:layout_height="match_parent"
                android:text="@string/history_assets"
                android:gravity="center"
                android:textSize="16sp"
                android:textColor="#666666"/>

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="#eeeeee"
            android:layout_alignParentBottom="true"/>

        <View
            android:id="@+id/cursor"
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:background="#ff9600"
            android:layout_alignParentBottom="true"/>
    </RelativeLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/fragment_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

然后上Java代码：（为了降低复杂性，我删除并修改了部分代码，包括命名等）

BaseActivity是继承FragmentActivity的，这里重写的onCreate是BaseActivity中自定义的，所以语法与直接继承Activity的onCreate略有不同，不过这些都可以忽略，只要知道是写在onCreate中的就OK了。

public class XXXXActivity extends BaseActivity implements View.OnClickListener, ViewPager.OnPageChangeListener{

    private TextView tx_title_left, tx_title_right;
    private View cursor;
    private ViewPager fragment_view_pager;
    private int cursor_move_offset;//cursor平移距离
    private int currentIndex;//当前页卡编号

    @Override
    protected void onCreate() {
        tx_title_left = (TextView) findViewById(R.id.tx_title_left);
        tx_title_right = (TextView) findViewById(R.id.tx_title_right);
        cursor =  findViewById(R.id.cursor);
        fragment_view_pager = (ViewPager) findViewById(R.id.fragment_view_pager);

        tx_title_left.setOnClickListener(this);
        tx_title_right.setOnClickListener(this);
        fragment_view_pager.addOnPageChangeListener(this);

        //计算cursor信息
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int screenWidth = dm.widthPixels;//屏幕宽度
        int cursorWidth = DisplayUtils.dip2px(this, 125);
        int cursorMarginLeft = screenWidth/4 - cursorWidth/2;
        cursor_move_offset = screenWidth/2;

        //设置cursor位置、宽度
        RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams)cursor.getLayoutParams();
        p.width = cursorWidth;
        p.setMargins(cursorMarginLeft, 0, 0, 0);
        cursor.setLayoutParams(p);

        //view pager
        ArrayList<Fragment> fragmentList = new ArrayList<>();
        Fragment firstFragment = new FragYYYY();
        Fragment secondFragment = new FragXXXX();
        fragmentList.add(firstFragment);
        fragmentList.add(secondFragment);
        fragment_view_pager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.tx_title_left:
                fragment_view_pager.setCurrentItem(0);
                break;
            case R.id.tx_title_right:
                fragment_view_pager.setCurrentItem(1);
                break;
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}
    @Override
    public void onPageScrollStateChanged(int state) {}
    @Override
    public void onPageSelected(int position) {
        Animation animation = new TranslateAnimation(
                currentIndex * cursor_move_offset,  //from X
                position * cursor_move_offset,      //to X
                0,
                0
        );

        currentIndex = position;
        animation.setFillAfter(true);//动画终止时停留在最后一帧，不然会回到没有执行前的状态
        animation.setInterpolator(new DecelerateInterpolator());//减速动画
        animation.setDuration(300);//动画持续时间0.3秒
        cursor.startAnimation(animation);

        switch (position){
            case 0:
                tx_title_left.setTextColor(0xffff9600);
                tx_title_right.setTextColor(0xff666666);
                break;
            case 1:
                tx_title_left.setTextColor(0xff666666);
                tx_title_right.setTextColor(0xffff9600);
                break;
        }
    }

    private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        private ArrayList<Fragment> list;

        public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> list) {
            super(fm);
            this.list = list;
        }

        @Override
        public Fragment getItem(int arg0) {
            return list.get(arg0);
        }

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

    }
}

为什么光标只设置左边距呢，因为只用固定光标开始的位置、开始的样子就好了，后面的都交给动画完成。

最后，你可以将标题的数目增加至3个、4个甚至五个，你只需在界面中包裹title的LinearLayout中添加更多的title，然后给他们加上点击事件，最后在onPageSelected中的switch方法中加上新title的颜色更改就可以了，动画在增加title时不用修改。

好了，关于增加title，我项目中又要求我讲title数目增加到6个，完全超出了屏幕范围，这该怎么办呢？下一篇我就介绍下以这个ViewPager+Fragment为基础进行修改。