Android Support Design库之TabLayout

TabLayout作用：用于显示可切换的标签效果替代PagerTabStrip的效果，且比PagerTabStrip要好看，TabLayout的效果要优良与Tab导航模式。（其实就是我们用的最多的导航栏）

1.需要引入degisn库的支持

compile 'com.android.support:design:23.2.0'

2.布局引入，这里使用了两个上面的自定义了Tab

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.zsy.tablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        app:tabIndicatorColor="#00000000"
        app:tabSelectedTextColor="#1DACF9"
        app:tabTextColor="#808181" />

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

    </android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabSelectedTextColor="#1DACF9"
        app:tabTextColor="#808181" />
</LinearLayout>

3.重要的几个属性

app:tabIndicatorColor="#426ae2"     下方滚动条的下划线颜色
app:tabSelectedTextColor="#1DACF9"  tab被选中后，文字的颜色
app:tabTextColor="#808181"          tab默认的文字颜色

4.这里同时使用TabLayout和ViewPager来实现即可点击又可左右滑动来切换页面的导航栏效果

        /**
         * 设置TabLayout的模式
         * TabLayout具有两个模式
         *  TabLayout.MODE_FIXED        这个也是默认的模式，tab平分屏幕宽度
         *  TabLayout.MODE_SCROLLABLE   意思为可滚动的，每个tab具有固定的宽度，
         *                              当屏幕容不下时可以左右滑动选择页面
         **/
  tabLayout.setTabMode(TabLayout.MODE_FIXED);

5.为TabLayout设置适配器

        //初始化Fragment
        list.add(new FragmentOne());
        list.add(new FragmentTwo());
        list.add(new FragmentThree());
        list.add(new FragmentFour());

        //设置Viewpager的预加载的条目 间接保存Fragment的状态
        viewPager.setOffscreenPageLimit(5);
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter();
        viewPager.setAdapter(adapter);
        //这两个函数设置即可实现点击和滑动切换连动效果
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabsFromPagerAdapter(adapter);

6.在开发中往往默认的控件不能满足我们的要求，所以我们需要自定义，这里我们就可以自定义它的tab内容。

        //自定义的tab布局，tabhost_tab这里面就一个ImageView和TextView这里就不贴出代码了
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            View view = getLayoutInflater().inflate(R.layout.tabhost_tab, null);
            ImageView imageView = (ImageView) view.findViewById(R.id.tab_image);
            TextView textView = (TextView) view.findViewById(R.id.tab_text);
            textView.setText(title[i]);
            imageView.setImageResource(select[i]);
            //设置自定义的tab布局
            tab.setCustomView(view);
        }

7.为tablayout设置页面切换监听

tabLayout.setOnTabSelectedListener(this);
//在这个回调方法中设置ViewPager当前显示的页面，这样点击tab可以切换滑动也可切换
  @Override
    public void onTabSelected(TabLayout.Tab tab) {
        int position = tab.getPosition();
        viewPager.setCurrentItem(position, false);
    }

8.MyFragmentPagerAdapter复写getPageTitle(int position)函数为Tab设置文字

private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        public MyFragmentPagerAdapter() {
            super(MainActivity.this.getSupportFragmentManager());
        }

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

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

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }
    }

9.如果你不需要自定义tab那就省事多了，几步就可以搞定了

//只需四步就可以实现了，是不是soeasy
 private void initTab(TabLayout tabLayout) {
        String title[] = {"页面一", "页面二", "页面三", "页面四"};
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        for (String aTitle : title) {
            tabLayout.addTab(tabLayout.newTab().setText(aTitle));
        }
        tabLayout.setOnTabSelectedListener(this);
    }

tablayout这里还有个小坑，但你一启动程序的时候他不会将第一个tab选中，但页面却是第一个，首次也没有回调页面切换监听。

    //先让他选中第二个在选回第一个。
    onTabSelected(tabLayout.getTabAt(1));
    onTabSelected(tabLayout.getTabAt(0));

到此Tablayout就说完了效果还是很赞的。对于导航栏还是有很多种实现的方式，不过个人还是比较喜欢官方出品的毕竟简单容易上手。如果你对这个效果还不满意可以看下这篇文章安卓BottomNavigationBar酷炫导航栏

最后怎少的了效果图和Demo下载呢