TabLayout实现标签切换

通常我们有这样一个需求，需要实现多个标签的切换，实现指示器背景色的改变，可以使用系统提供的TabLayout来实现。

一、首先我们在xml定义一个tablayout文件

<android.support.design.widget.TabLayout
                    android:id="@+id/tabLayout"
                    android:layout_width="500dp"
                    android:layout_height="50dp"
                    android:background="@drawable/tab_bg"
                    android:elevation="3dp"
                    app:tabGravity="fill"
                    app:tabIndicator="@drawable/tab_sel"
                    app:tabIndicatorColor="@android:color/blue"
                    app:tabIndicatorGravity="center"
                    app:tabRippleColor="@android:color/transparent"
                    app:tabTextAppearance="@style/tabLayoutTextStyle"
                    app:tabTextColor="@android:color/white">

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

app:tabIndicator tab指示器的背景图片

app:tabIndicatorColor tab指示器的颜色

app:tabIndicatorGravity 指示器居中

app:tabRippleColor="@android:color/transparent" 取消指示器点击波纹效果

app:tabTextColor="@android:color/white" tab的文字颜色

app:tabTextAppearance="@style/tabLayoutTextStyle" 这个是设置tab的文字大小，只能通过此方法，如下：

<style name="tabLayoutTextStyle">
        <item name="android:textSize">28sp</item>
    </style>

二、在onCreate()进行初始化

        tabLayout.addTab(tabLayout.newTab().setText("成都"));
      //设置true为默认选中，不然第一次点击tablayout不会回调监听方法
        tabLayout.addTab(tabLayout.newTab().setText("重庆"), true);
        tabLayout.addTab(tabLayout.newTab().setText("上海"));
      //默认选中的tab
        tabLayout.setScrollPosition(1, 0, false);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                switch (position) {
                    case 0: 
                    //修改指示器的颜色                                                                                        
         tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.007a67));                           
                        //修改指示器背景图片
                        tabLayout.setSelectedTabIndicator(R.drawable.tab_sel_1);
                    case 1:
                        tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.065eab));
                        tabLayout.setSelectedTabIndicator(R.drawable.tab_sel_2);
                        break;
                    case 2:
                        tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.6f5a0f));
                        tabLayout.setSelectedTabIndicator(R.drawable.tab_sel_3);
                        break;
                }
            }

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

            }

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

            }
        });

这样基本能满足我们的需求了。但是可能有小伙伴注意到了，通过tabLayout.setSelectedTabIndicator(Drawable drawable);方法，我们只能把tab的标签设置成跟图片一样的形状，颜色并不是跟我们的图片一样，只能通过setSelectedTabIndicatorColor设置tab的背景颜色。而且TabLayout只能修改所有tab的文字颜色，如果我们需要改变单独某个tab的文字颜色，或者将指示器的背景使用图片，并在某些状态下tab还不能被选中呢，这样我们就只能使用自定义view来实现了，以后我会再开一篇文章给大家讲解。

TabLayout实现标签切换

猜你喜欢