Fragment+ViewPager使用示例

很多app都采用了底部（或者顶部）Tab，中间ViewPager，点击底部Tab可以切换到对应页，左右滑动页面也会自动改变Tab点亮的设计。不用说，用ViewPager实现。

ViewPager可以看成一个容器，里面放了View或者Fragment，支持左右切换容器里的内容。使用Fragment+ViewPager的优势就是，可以在每个Fragment里独立的编写逻辑，而不用全部挤在MainActivity中。

先来看一个简单的效果图。

首先，底部的Tag是由三个ImageView+TextView的LinearLa构成的，默认颜色都为白色

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#CDD8E4"
    android:padding="4dp">

    <LinearLayout
        android:id="@+id/friend"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image_friend"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:src="@drawable/friend_white" />

        <TextView
            android:id="@+id/text_friend"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:gravity="center"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:text="friend"
            android:textSize="10sp"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/more"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image_more"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:src="@drawable/more_white" />

        <TextView
            android:id="@+id/text_more"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:gravity="center"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:text="more"
            android:textSize="10sp"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/me"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image_me"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:src="@drawable/me_white" />

        <TextView
            android:id="@+id/text_me"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:gravity="center"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:text="me"
            android:textSize="10sp"
            android:textColor="#ffffff" />
    </LinearLayout>

</LinearLayout>

主布局文件中间整块ViewPager（这里用了v4下的包），底部把刚才的Tab给include进来。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    <include layout="@layout/bottom_tab" />

</LinearLayout>

这里如果直接把ViewPager高度设置为match_parent会把底部Tab挤出屏幕外，所以巧妙地用了weight属性，使它占满剩余的所有空间。

然后就是MainActivity了，逻辑很清楚，用适配器将要显示的Fragment数组加载到ViewPager里，set两个监听器实现滑动和点击都能改变Tab点亮的效果。

public class MainActivity extends AppCompatActivity implements View.OnClickListener,
        ViewPager.OnPageChangeListener {
    private List<Fragment> fragments = new ArrayList<>();
    private ViewPager viewPager;
    private ImageView imageFriend, imageMore, imageMe;
    private TextView textFriend, textMore, textMe;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        viewPager = (ViewPager) findViewById(R.id.id_viewPager);
        fragments.add(new Fragment1());
        fragments.add(new Fragment2());
        fragments.add(new Fragment3());
        /*new一个自定义的继承自FragmentStatePagerAdapter的适配器*/
        MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(), fragments);
        viewPager.setAdapter(myAdapter);
        viewPager.addOnPageChangeListener(this);
        /*底下的Tab只用来监听点击事件，所以也不显示的创建了，直接用for循环添加监听器*/
        int[] tabIds = new int[]{R.id.friend,R.id.more,R.id.me};
        for (int tabId : tabIds) {
            findViewById(tabId).setOnClickListener(this);
        }
        /*Tab里具体的图片和文字都需要动态改变，在这里创建出来*/
        imageFriend = (ImageView) findViewById(R.id.image_friend);
        imageMore = (ImageView) findViewById(R.id.image_more);
        imageMe = (ImageView) findViewById(R.id.image_me);
        textFriend = (TextView) findViewById(R.id.text_friend);
        textMore = (TextView) findViewById(R.id.text_more);
        textMe = (TextView) findViewById(R.id.text_me);
        /*一开始的时候就会有一个当前显示页，将对应的Tab设置点亮*/
        setTab(viewPager.getCurrentItem());
    }

    private void setTab(int currentItem) {
        switch (currentItem) {
            case 0:
                imageFriend.setImageResource(R.drawable.friend_black);
                textFriend.setTextColor(Color.BLACK);
                break;
            case 1:
                imageMore.setImageResource(R.drawable.more_black);
                textMore.setTextColor(Color.BLACK);
                break;
            case 2:
                imageMe.setImageResource(R.drawable.me_black);
                textMe.setTextColor(Color.BLACK);
                break;
        }
    }

    @Override
    public void onClick(View v) {
        /*无论点击谁，先将他们全部熄灭，再根据具体点击的Tab改变ViewPage页和点亮Tab*/
        initTab();
        switch (v.getId()) {
            case R.id.friend:
                viewPager.setCurrentItem(0);
                imageFriend.setImageResource(R.drawable.friend_black);
                textFriend.setTextColor(Color.BLACK);
                break;
            case R.id.more:
                viewPager.setCurrentItem(1);
                imageMore.setImageResource(R.drawable.more_black);
                textMore.setTextColor(Color.BLACK);
                break;
            case R.id.me:
                viewPager.setCurrentItem(3);
                imageMe.setImageResource(R.drawable.me_black);
                textMe.setTextColor(Color.BLACK);
                break;
        }
    }

    private void initTab() {
        imageFriend.setImageResource(R.drawable.friend_white);
        imageMore.setImageResource(R.drawable.more_white);
        imageMe.setImageResource(R.drawable.me_white);
        textFriend.setTextColor(Color.WHITE);
        textMore.setTextColor(Color.WHITE);
        textMe.setTextColor(Color.WHITE);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        /*滑动改变ViewPage页后也相应设置Tab变化*/
        initTab();
        setTab(position);
    }

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

public class MyAdapter extends FragmentStatePagerAdapter{
    List<Fragment>fragments;

    public MyAdapter(FragmentManager fm,List<Fragment>fragments) {
        super(fm);
        this.fragments = fragments;
    }

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

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

    /*当包含的Fragment较多时可以用instantiateItem()和destroyItem进行管理*/
}

完成。