原生TabLayout使用

原生TabLayout解决ViewPager导航指示器非常方便， 还可以用在页面下方，类似微信的效果。
应该算是最简单的原生ViewGroup，源码的设计思想值得参考。

重要属性

tabGravity设置tab排列方式center和fill， tabMode设置滚动方式fixed和scroll。

已知bug

1. xml和代码混用，Mode,Gravity属性失效，建议纯代码；
2. icon默认有marginBotton4dp，配置costomView的要考虑；
3. 用xml配置tab，costomVIew中 selector 初始状态不起作用，建议纯代码；
4. tab间距，indicator长度等无法配置，可以用padding和maxWidth等尝试,如果有这需求建议自己封View，毕竟简单。这不能算bug，只能算局限。

---

Tab

生成Tab的方式有两种

• xml 用TabItem这个控件，可以设置icon和text，但是位置固定，icon在上，text在下。如果需要添加下划线可以设置0.5dp的View。结合AppBar使用，如果需要去掉阴影，可以设置在appbar中设置app:elevation="0dp"

         <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:tabContentStart="50dp"
            app:tabGravity="fill"
            app:tabMode="fixed">
            <android.support.design.widget.TabItem
                android:icon="@drawable/topic_praise_like_nor"
                android:text="嘿嘿"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </android.support.design.widget.TabLayout>
         <View
            android:background="#ddd"
            android:layout_width="match_parent"
            android:layout_height="0.5dp"/>

• 
  
• 代码中添加tab
  

如果需要自定义item的布局，代码中添加tab比较好比较好，用setContentView这个方法，如果添加icon，tablayout高度会变高，最好xml中设置固定高度

 tabRoot = (TabLayout) findViewById(R.id.tabLayout);
        tabRoot.removeAllTabs();
        tabRoot.addTab(tabRoot.newTab().setCustomView(R.layout.contentview_tab_layout).setIcon(R.drawable.selector_tab_local).setText("同城"), true);
        tabRoot.addTab(tabRoot.newTab().setCustomView(R.layout.contentview_tab_layout).setIcon(R.drawable.selector_tab_recommend).setText("推荐"));
        tabRoot.addTab(tabRoot.newTab().setCustomView(R.layout.contentview_tab_layout).setIcon(R.drawable.selector_tab_all1).setText("全部"));

        tabRoot.setTabGravity(TabLayout.GRAVITY_FILL);
        tabRoot.setTabMode(TabLayout.MODE_FIXED);

CustomView布局，如果需要用到setIcon和setText这两个方法，imageVIew和textView的id分别设置成android:id="@android:id/icon" 和android:id="@android:id/text1"

<?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:orientation="horizontal"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content">
    <ImageView
        tools:src = "@drawable/light_blue_praise_icon"
        android:id="@android:id/icon"
        android:layout_width="16dp"
        android:layout_height="16dp"/>
    <TextView
        android:textColor="@color/selecter_text_color_tab"
        tools:text = "hellow "
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

xml和代码的方式不要混用，不然在横竖屏切换时候xml中的tabGravity，tabMode不起作用，不知为什么

---

与ViewGroup结合使用

大神分享的文章很多，待用到再贴代码，待续…

---

pompip原创