Android TabLayout

Android开发设计的时候，很多时候都会设计到页面的滑动+导航栏，我们一直的设计都是ViewPager+Fragment+ActionBar,需要自己去实现ViewPager的监听事件，但是Google在Support Design包中发布了一些列新的控件，其中就包括TabLayout。这个配合ViewPager+Fragment来用十分的方便。

一、TabLayout使用

1、引入TabLayout

TabLayout需要引入Support Design包，那么这个就可以支持之前版本的SDK，还是比较方便的

compile 'com.android.support:design:26.0.0-alpha1'

2、xml文件的编写

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabSelectedTextColor="#ff0000"
        app:tabTextColor="#000000"
        app:tabMode="scrollable">

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

</LinearLayout>

这里需要注意的是：需要加xmlns:app="http://schemas.android.com/apk/res-auto"，如果没这行，会出现

Error:(7) Error parsing XML: unbound prefix 错误。

我当时主要关系4个参数：

app:tabIndicatorColor="@color/colorPrimary"    //下滑条的颜色
app:tabSelectedTextColor="#ff0000"   // 字体选择后的背景色   
app:tabTextColor="#000000"  //字体默认背景
app:tabMode="scrollable" //滚动模式 fiexd是固定模式

3、具体的java代码

class MyFragment extends Fragment {
    public MyFragment() {
    }

    public static MyFragment newIntence(String title) {
        Bundle bundle = new Bundle();
        bundle.putString("title", title);
        MyFragment myFragment = new MyFragment();
        myFragment.setArguments(bundle);
        return myFragment;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        TextView textView = view.findViewById(R.id.title);
        textView.setText(getArguments().getString("title"));
    }

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

public class MainActivity extends AppCompatActivity {

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

        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        viewPager.setAdapter(new MySelectFragmentAdapter(getSupportFragmentManager(),getData()));

        TabLayout tb = (TabLayout) findViewById(R.id.tab);
        tb.setupWithViewPager(viewPager);
    }

    public List<String> getData() {
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 6; i++) {
            list.add(String.format(Locale.CHINA, "第%d页", i + 1));
        }
        return list;
    }

    class MySelectFragmentAdapter extends FragmentPagerAdapter {
        private List<String> list;

        public MySelectFragmentAdapter(FragmentManager fm, List<String> list) {
            super(fm);
            this.list = list;
        }

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

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

        @Override
        public CharSequence getPageTitle(int position) {
            return list.get(position);
        }
    }
}

具体代码不难，比较简单，需要注意两点：

1. tb.setupWithViewPager(viewPager); 绑定tab和ViewPager，去掉繁琐的监听
2. FragmentPagerAdapter需要实现public CharSequence getPageTitle(int position)方法，返回tab每项文字。

TabLayout的源码也比较简单，主要是viewPager相关的监听器和滑动方法的东西。