Design 二: TabLayout + ViewPager +Fragment

2-5 TabLayout控件

通过选项卡的方式切换View并不是MD中才有的新概念，它们和顶层导航模式或者组织app中不同分组内容（比如，不同风格的音乐）是同一个概念。 Design library的TabLayout 既实现了固定的选项卡（View的宽度平均分配），也实现了可滚动的选项卡（View宽度不固定同时可以横向滚动）。如果你使用ViewPager在 tab之间横向切换，你可以直接从PagerAdapter的getPageTitle() 中创建选项卡，然后使用setupWithViewPager()将两者联系在一起。它可以使tab的选中事件能更新ViewPager,同时 ViewPager 
的页面改变能更新tab的选中状态。

注意项：

如果你使用ViewPager在tab之间横向切换，切记可以直接从PagerAdapter的getPageTitle() 中创建选项卡，然后使用setupWithViewPager()将两者联系在一起。

实例代码:

页面:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="bw.com.bw_day13.demo04.TabLayoutActivity">
    <!--
        app:tabIndicatorColor="@color/colorAccent"          选中的颜色
       app:tabIndicatorHeight="4dp"                          选中的高度
       app:tabSelectedTextColor="@color/colorAccent"        选中的文字颜色
       app:tabTextColor="#000000"                           默认的文字颜色
    -->
   <android.support.design.widget.TabLayout
       android:layout_width="match_parent"
       android:layout_height="80dp"
       android:id="@+id/tab_layout_id"
       android:background="#00ffff"
       app:tabIndicatorColor="@color/colorAccent"
       app:tabIndicatorHeight="4dp"
       app:tabSelectedTextColor="@color/colorAccent"
       app:tabTextColor="#000000"
       />
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tab_layout_id"
        android:id="@+id/view_pager_id"/>
</RelativeLayout>

Fragment 对应的小页面:

<FrameLayout 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="bw.com.bw_day13.demo04.MyFragment">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />
</FrameLayout>

代码:

public class TabLayoutActivity extends AppCompatActivity {
    private TabLayout mTab;
    private ViewPager mVp;
    private List<Fragment> data;
    private MyAdapter adapter;
    private List<String> titles = new ArrayList<>();//一系列标题
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        initView();
        data = new ArrayList<>();
        for(int i=0;i<8;i++)
        {
            MyFragment fragment = new MyFragment();
            data.add(fragment);
            titles.add("第" +(i+1)+"项");
        }
        adapter = new MyAdapter(getSupportFragmentManager(),data);
        mVp.setAdapter(adapter);
        
        //TabLayout和ViewPager 的结合
        //1， 联系在一起
        mTab.setupWithViewPager(mVp);
        
        //2, 设置TabLayout的互动模式
        mTab.setTabMode(TabLayout.MODE_SCROLLABLE);
        
        //3, 在适配器中， 增加方法getPagerTitle(), 设置标题
    }


    private void initView() {
        mTab = (TabLayout) findViewById(R.id.tab_layout_id);
        mVp = (ViewPager) findViewById(R.id.view_pager_id);
    }

    class MyAdapter extends FragmentPagerAdapter
    {
        private List<Fragment> data;


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

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

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

        @Override
        public CharSequence getPageTitle(int position) {

            return titles.get(position);
        }
    }
}

Fragment:

public class MyFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_my, container, false);
    }
}