android使用TabLayout实现底部图文结合滑动

话不多说，直接上图，看效果。

默认的打开app，第一个fragment为选中状态，其他为灰色（未选中）

当我手指滑动fragment，切换到第二个fragment时，第二个为选中，其他为灰色（未选中）

首先图标问题的实现，采用font-Awesome。

①搜索font-Awesome，进入官网下载.ttf文件，并将文件导入到assert文件中（没有的可以创建）或者直接使用下面这个网址www.fontawesome.com.cn/download/font-awesome-4.7.0.zip

解压后导入：

②新建一个类，方便以后的调用

public class MyFont {
    public Typeface getType(Context context){
        Typeface font = Typeface.createFromAsset(context.getAssets(), "fontawesome-webfont.ttf");
        return font;
    }
}
/*
使用方法：
TextView tv;
tv.setText("&#x" + "图标代码;");//
tv.setTypeface(new MyFont().getType(getApplication()));
这样即可显示图标
*/

③在配置文件中加入

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

④添加TabLayout到布局

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="40dp">
        </android.support.design.widget.TabLayout>

⑤在MainActivity中

     //ViewParge设置适配器来加载Fragment这里就不讲了，有更好的博客为大家详细讲解。
     //在ViewParge设置适配器加载了Fragment后，将TabLayout和ViewParge绑定在一起
  

    mTabLayout.setupWithViewPager(mViewPager);//绑定
    setupTabIcon();//设置底部TabLayout的item

    //有几个底部的item就写几个
    private void setupTabIcons() {
        mTabLayout.getTabAt(0).setCustomView(getTabView(0));
        mTabLayout.getTabAt(1).setCustomView(getTabView(1));
        mTabLayout.getTabAt(2).setCustomView(getTabView(2));
    }
    
    public View getTabView(int position) {
        View v = LayoutInflater.from(getApplication()).inflate(R.layout.tab_item, null);
        nav_icon = (TextView) v.findViewById(R.id.nav_icon);
        nav_icon.setText(mListIcon.get(position));
        nav_icon.setTypeface(new FontManager().getType(getApplication()));
        nav_title = (TextView) v.findViewById(R.id.nav_title);
        nav_title.setText(mListTile.get(position));
        if (position == 0) {
            nav_title.setTextColor(getResources().getColor(R.color.colorPrimary));
            nav_icon.setTextColor(getResources().getColor(R.color.colorPrimary));
        } else {
            nav_title.setTextColor(getResources().getColor(R.color.gray_navigation_bar));
            nav_icon.setTextColor(getResources().getColor(R.color.gray_navigation_bar));
        }
        return v;
    }

        //底部item的监听事件
        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                changeTabSelect(tab);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                changeTabUnSelect(tab);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
            }
        });

 private void changeTabUnSelect(TabLayout.Tab tab) {
        View view = tab.getCustomView();
        //未选中（灰色）实例化出控件设置为灰色即可
 }

 private void changeTabSelect(TabLayout.Tab tab) {
        View view = tab.getCustomView();
         //选中（选中颜色）实例化出控件，并设置想要的颜色即可

}

   //tab_item.xml布局文件

 <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/nav_icon"
        android:text="@string/TabLayout_Icon_Translate"
        android:textSize="18dp"
        android:textColor="@color/gray_navigation_bar"
        android:layout_gravity="center"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/nav_title"
        android:textSize="13dp"
        android:textColor="@color/gray_navigation_bar"
        android:layout_gravity="center"
        android:text="fffffff"/>
 </LinearLayout>

至此，TabLayout就搞定啦。需要不同的排版风格，只需要修改xml的布局文件即可。

学习之余，为了加深巩固写此博客，如果有错误，欢迎指出。若有更好的方法，欢迎留言。