TabLayout的使用篇章一

TabLayout的使用

一、tablayout的属性设置

"@+id/tabLayout_issue"
            app:tabTextColor="@color/black"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabBackground="@color/white"
            app:tabIndicatorHeight="4dp"
            app:tabMode="fixed"
            app:tabGravity="center"
            app:tabMaxWidth="100dp"
            app:tabMinWidth="80dp"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>

属性参数设置

 改变选中字体的颜色
 app:tabSelectedTextColor="@color/colorPrimary"

  改变未选中字体的颜色
  app:tabTextColor="@color/black"

  改变指示器下标的颜色
  app:tabIndicatorColor="@color/colorAccent"

  改变整个TabLayout的颜色
  app:tabBackground="@color/white"

  设置文字的外貌
  app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"

  设置指示器下标的厚度
  app:tabIndicatorHeight="4dp"

  当Tab很多时，如此设置即可滑动
  app:tabMode="scrollable"  （默认是铺满 FIXED）

  设置tab显示模式 此为居中，如果是fill，则是充满
  app:tabGravity="center"

  设置最大的tab宽度
  app:tabMaxWidth="xxdp"

  最小的tab宽度
  app:tabMinWidth="xxdp"

这些xml的属性设置完成后，我们开始代码实现tab的添加

        tabLayout.addTab(tabLayout.newTab().setText(getResources().getString(R.string.issue_pending)));
        tabLayout.addTab(tabLayout.newTab().setText(getResources().getString(R.string.issue_complete)));
        tabLayout.addTab(tabLayout.newTab().setText(getResources().getString(R.string.issue_assign)));

设置到这里我们的需求并没有结束，需要给tab之间添加分割线，此时我们的布局中无法实现，只能动态添加分割线，如下代码：

        LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);//设置tab分隔符
        linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
        linearLayout.setDividerPadding(80);
        linearLayout.setDividerDrawable(ContextCompat.getDrawable(getContext(),R.drawable.sp_exposure_select));

sp_exposure_select的xml代码：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#757575" />
    <size android:width="1dp" />
shape>

设置到这里，我们需要的效果基本完成，看下图效果：

到这里，我们可能考虑到，界面没有用TabLayout+ViewPager的方式搭建布局，那我们界面如何展示呢？由于需求中要求的列表格式一样，故只使用一个布局就可以了，所以这里我们用的RecyclerView，而点击不同tab时调用不同接口，需要实现tab的选择状态的判断来刷新界面，故此，tablayout的监听可以处理如上情况，代码如下：

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                pos = tab.getPosition();//0、1、2
                presenter.getMyIssue(page,pos);//这里根据不同的pos来调用不同的接口即可
            }

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

            }

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

            }
        });

好了，至此，我们所需要的功能开发完成了！