Android：TabLayout和ViewPage

布局

1. 在项目app下的build.gradle文件中修改闭包dependencies，添加 compile ‘com.android.support:design:23.3.0’，其中后面的版本号与这个相同或者更高compile ‘com.android.support:appcompat-v7:23.3.0’
2. 添加布局TabLayout和ViewPager

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:background="@color/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zippler.cn.yuewu.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/toolbar_tab"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        android:background="#00ffffff"
        android:fillViewport="false"
        app:tabMode="fixed"
        app:layout_scrollFlags="scroll"
        app:tabIndicatorColor="#057523"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="#057523"
        app:tabTextColor="#ced0d3">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/refresh1"
            />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/camera2"/>

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/me2" />

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/toolbar_tab"
        />
</RelativeLayout>

由于这里使用了relative布局，比较方便的将tablayout组件放到了界面底部，但也因为使用relative布局导致了一个问题….这个问题竟然花了我一个小时去找….自己还真是基础不牢…
问题很简单，就是后面在创建Fragment的时候覆盖了TabLayout布局….
解决方法也很简单，细心的朋友应该已经看到ViewPager组件中添加了一个“ android:layout_above=”@id/toolbar_tab””属性，这个属性让ViewPager不再覆盖TabLayout了…

2018/3/2 修改
除上述方法以外还可以将TabLayout布局放在整个布局文件最下方，这样TabLayout布局层级就会在ViewPager之上

添加监听器

• 为viewpager设置适配器并添加监听器

       viewPager = (ViewPager) findViewById(R.id.view_pager);

        //为viewpager设置适配器，用于传递数据
        viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
               tabLayout.getTabAt(position).select();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

适配器代码：

package zippler.cn.yuewu.Adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import zippler.cn.yuewu.activity.CameraFragment;
import zippler.cn.yuewu.activity.MeFragment;
import zippler.cn.yuewu.activity.RefreshFragment;

/**
 * Created by zipple on 2018/3/1.
 */

public class ViewPagerAdapter extends FragmentPagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        if (position==0){
            return new RefreshFragment();
        }else if (position==1){
            return new CameraFragment();
        }else if (position==2){
            return new MeFragment();
        }
        return null;
    }

    @Override
    public int getCount() {
        return 3;
    }
}

• 为Tablayout添加监听

 if (tabLayout != null) {
            tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {

                    viewPager.setCurrentItem(tab.getPosition());//设置当前页面

                    switch (tab.getPosition()){
                        case 0:
                            toast("00000000");
                            tab.setIcon(R.mipmap.refresh1);
                            break;
                        case 1:
                            toast("111111111");
                            tab.setIcon(R.mipmap.camera1);
                            break;
                        case 2:
                            toast("222222222");
                            tab.setIcon(R.mipmap.me1);
                            break;
                    }
                }

                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    switch (tab.getPosition()){
                        case 0:
                            tab.setIcon(R.mipmap.refresh2);
                            break;
                        case 1:
                            tab.setIcon(R.mipmap.camera2);
                            break;
                        case 2:
                            tab.setIcon(R.mipmap.me2);
                            break;
                    }
                }

                @Override
                public void onTabReselected(TabLayout.Tab tab) {
                    onTabSelected(tab);
                }
            });
        }

总结

安卓的选项卡布局实际上就是利用碎片和tabLayout布局完成切换效果，因此我们需要对viewPager（可以理解成Content Container）设置适配器，也就是选项卡内容来源。问题也就转化成一个activity布局变成多个fragment布局…