Android Function(2)| TabLayout滑动选项卡

一.前言

在很多app的页面中会有顶部的选项卡，当我们手指进行滑动或者是点击选项卡时，页面就会跳转到相应的选项卡的内容当中。这种方式Android已经在Design Support Library中为我们进行了相应的封装，我们可以很轻易的来实现这个酷炫的功能。

二.基本操作

1.配置build.gradle

dependencies {
    ......
    compile 'com.android.support:design:26.1.0'
}

2.设置界面的布局

代码如下：

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context="com.example.yzbkaka.functiontest.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/AlertDialog.AppCompat.Light"
            android:background="?attr/colorPrimary">
        </android.support.v7.widget.Toolbar>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable">
        </android.support.design.widget.TabLayout>
        
    </android.support.design.widget.AppBarLayout>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

</LinearLayout>

上面的代码中首先是用到了AppBarLayout，这个布局是让我们的TabLayout和Toolbar组合起来构成一个整体；接着就是在AppBarLayout中摆放我们的Toolbar和TabLayout，在TabLayout中有一个属性app:tabMode，它是用来控制每一个选项卡的滑动方式的，一般我们设置为scrollable即可。最后就是ViewPager，在它里面就是要存放我们选项卡里面的具体内容了。

3.主代码的编写

接下来就是主代码ManActivity.java的编写，具体的代码如下：

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

    private TabLayout tabLayout;

    private ViewPager viewPager;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar)findViewById(R.id.toolbar);
        tabLayout = (TabLayout)findViewById(R.id.tabs);
        viewPager = (ViewPager)findViewById(R.id.viewpager);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if(actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        initViewPager();  //设置TabLayout和ViewPager
    }


    private void initViewPager(){
        //设置选项卡的标题
        List<String> titleList = new ArrayList<>();
        titleList.add("精选");
        titleList.add("时政");
        titleList.add("推荐");
        titleList.add("体育");
        titleList.add("健康");
        for(int i = 0;i < titleList.size();i++){
            tabLayout.addTab(tabLayout.newTab().setText(titleList.get(i))); 
        }

        //将要展示的碎片添加进列表
        List<Fragment> fragmentList = new ArrayList<>();
        fragmentList.add(new MyFragment1());
        fragmentList.add(new MyFragment2());
        fragmentList.add(new MyFragment3());
        fragmentList.add(new MyFragment4());
        fragmentList.add(new MyFragment5());

        //进行关联操作
        MyFragmentAdapter myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager(),fragmentList,titleList);
        viewPager.setAdapter(myFragmentAdapter);  //设置viewPager适配器
        tabLayout.setupWithViewPager(viewPager);  //将TabLayout和ViewPager关联起来
    }
}

其中在fragmentList中添加进来的碎片都是自己自定义的，这里为了简单就只在碎片中添加了纯色来进行铺满，Myragment的布局和主代码如下，其他的自定义fragment也是类似的：

//MyFragment1的主代码
public class MyFragment1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_layout1,container,false);
        return view;
    }
}

<!--MyFragment1的布局-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#178">
</LinearLayout>

4.适配器的编写

接下来是最关键的适配器的编写，代码如下：

public class MyFragmentAdapter extends FragmentStatePagerAdapter {

    private List<Fragment> fragmentList = new ArrayList<>();

    private List<String> titleList = new ArrayList<>();


    public MyFragmentAdapter(FragmentManager fm, List<Fragment> fragmentList, List<String> titleList) {
        super(fm);
        this.fragmentList = fragmentList;
        this.titleList = titleList;
    }
    
    /**
     * 获得碎片
     */
    @Override
    public Fragment getItem(int position) {
       return fragmentList.get(position);
    }
    
    @Override
    public int getCount() {
        return fragmentList.size();
    }
    
    /**
     * 获得标题
     */
    @Override
    public CharSequence getPageTitle(int position){
        return titleList.get(position);
    }
}

适配器的逻辑很简单，就是讲fragmentList和titleList按照position进行返回然后一一对应起来。

最终效果