android学习-----使用TabLayout实现Tab选项卡以及遇到的一些问题（一）

TabLayout的使用

前言: 更好用，更方便，更简洁

link:https://developer.android.google.cn/reference/android/support/design/widget/TabLayout.html

1.开始

1.1 添加TabLayout的引用

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

      1.2  xml添加TabLayout布局

 <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabBackground="@android:color/white"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabIndicatorHeight="1dp"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabTextColor="@android:color/black"
        >

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tab1"
            />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tab2"
            />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tab3"
            />

    </android.support.design.widget.TabLayout>

上面的TabLayout配合TabItem直接使用，先看效果吧

可以看见轻松了实现顶部Tab选项卡的切换，选中的颜色以及默认颜色，底部横线标识等。现在我们看看有些啥属性吧。

app:tabBackground   //tab选项的背景颜色
        app:tabIndicatorColor  // 下划线的颜色
        app:tabIndicatorHeight  //下划线的高度
        app:tabSelectedTextColor //选中时候的文字颜色
        app:tabTextColor //默认时候的文本颜色

  app:tabMode (fixed tab固定一行 scrollable tab过多的时候可滑动)

但是呢我们有时候需要动态添加TabItem怎么办呢，憋着急 慢慢来。

代码如下

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

        mTabLayout.addTab(mTabLayout.newTab().setText("tab01"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab02"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab03"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab04"));


        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) { //点击第一次的tab选项回调
                Toast.makeText(MainActivity.this, tab.getText(), Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {  //上一次的tab回调
                Log.i("MainActivity", "onTabUnselected: " + tab.getText());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) { // 再次点击同一个tab的回调
                Log.i("MainActivity", "onTabReselected: " + tab.getText());

            }
        });
    }

可以看到这里我们通过代码的方式添加了几个item ，并且添加了点击tab时候的点击事件，我们可以通过点击的tab来做一些不可描述的事情 看图吧，图片是最好的解释

上图中可以看见，点一次tab选项会回调2个不同的方法。你就可以在里面做一些羞羞的事情了。

讲到这里先告一段落，一步一步来吧。

下篇文章会讲 tabLayout+Viewpager+Fragment的联合使用，以及会遇到的一些问题。