关于Design包中TabLayout+ViewPager的简单使用

安卓从API22（5.1）推出了Design的支持包，方便开发者使用Material Design元素来美化自己的应用，今天为大家整理了简单使用TabLayout+ViewPager做的一个小DEMO，方便大家借阅参考。

项目需要先引入Design的包，如果读者使用的是studio的话引入还是比较方便的，就不在这里多说了，话不多说，直接贴代码供大家参考了

主Activity代码

/**
 * Created by 谢栋 on 2016/12/2.
 */
public class DesignDemo  extends AppCompatActivity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.design_test);

        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab);

        List<String > list = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            list.add(String.format(Locale.CANADA,"第%02d页", i));
        }


        //Activity继承自Activity的话可能会使得getSupportFragmentManager()不能使用，继承AppCompatActivity或者BaseActivity即可
        viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(),list));

        tabLayout.setupWithViewPager(viewPager);   //完成TabLayout导航与ViewPager同步
    }
}

主布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <!--app:tabMode="scrollable"当Tab导航上的条目比较多的时候，应该设置模式为滚动，否则看不见导航上的文字显示-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/design_test_color"
        app:tabTextColor="@android:color/white"
        app:tabSelectedTextColor="@android:color/black"
        app:tabIndicatorColor="@android:color/holo_red_dark"
        app:tabTextAppearance="@android:style/TextAppearance.DeviceDefault.Large"
        app:tabMode="scrollable"
        />

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


</LinearLayout>

需要给每个导航页填充内容，使用Fragment的形式填充，Fragment代码如下：

package designTest;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.zhuandian.msuic.R;

/**
 * Created by 谢栋 on 2016/12/3.
 */
public class FragmentLayout extends Fragment {


    //构造方法
    public FragmentLayout() {
    }

    public static FragmentLayout newInstance(String text) {

        Bundle args = new Bundle();
        args.putString("text",text);
        FragmentLayout fragment = new FragmentLayout();
        fragment.setArguments(args);
        return fragment;
    }


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_layout,null);
    }


    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        TextView pagerText = (TextView) view.findViewById(R.id.pager_text);
        String string = getArguments().getString("text");
        pagerText.setText(string);
    }
}

Fragment对应的layout文件比较简单，测试仅用一个TexttView填充

<?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:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/pager_text"
        />

</LinearLayout>

还需要自定义一个FragmentPagerAdapter做为数据源，代码如下

package designTest;


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

import java.util.List;

/**
 * Created by 谢栋 on 2016/12/3.
 */
public class MyPagerAdapter extends FragmentPagerAdapter {

    private List<String> list;

    //构造方法
    public MyPagerAdapter(FragmentManager fm, List<String> list) {
        super(fm);
        this.list = list;
    }

    @Override
    public Fragment getItem(int position) {
        return FragmentLayout.newInstance(list.get(position));
    }

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


    /**
     * 设置Tab导航条的标题
     * @param position 当前的Tab角标索引
     * @return  Tab导航条的标题
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return list.get(position);
    }
}

关于Tab导航上字体颜色跟背景色的细节优化以及ViewPager的一些细节问题，笔者在这里就不在赘述，具体优化详情请根据项目需求进行优化。