前面介绍了TabLayout的基本属性和基本的使用方法。我是传送门。
真实的业务场景中,很多的效果,原生的TabLayout,并不支持。例如下滑线短于文字的效果,底部导航栏效果,标签文字选中是需要加粗效果等等。
所以我们需要使用TabLayout的自定义tab标签。
先上图。
import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.CheckBox;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import butterknife.ButterKnife;
public class MainActivity extends AppCompatActivity {
@BindView(R.id.vp_all)
ViewPager vpAll;
@BindView(R.id.tab_custom)
TabLayout tabCustom;
//存放自定义tab标签的列表
List<View> customTabList = new ArrayList<>();
//存放对应tab标签的fragment页面
List<PageFragment> fgList = new ArrayList<>();
//选中的自定义标签,标记器。默认选中第一个。标记位是0;
int indicator = 0;
ViewPagerAdapter pagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);//此处是用的是butterKnife框架,等同于findviewbyid获取各个控件。
initTabCustomAndViewPager();
initListener();
}
/**
* 初始化tab标签和viewpager内容。
*/
private void initTabCustomAndViewPager() {
//初始化10个自定义tab标签
for (int i = 0; i < 10; i++) {
final View tabView = getCustomTabView(this, "自定义" + i);
customTabList.add(tabView);
if (i==0){
//设置默认第一个选中效果
((CheckBox) tabView.findViewById(R.id.cb_name)).setChecked(true);
tabView.findViewById(R.id.cb_slide).setVisibility(View.VISIBLE);
}
tabCustom.addTab(tabCustom.newTab().setCustomView(tabView));
}
//初始化10个fragment页面
for (int i = 0; i < 10; i++) {
fgList.add(PageFragment.newInstance("我是内容栏目" + i));
}
pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fgList);
vpAll.setAdapter(pagerAdapter);
}
/**
* 将viewpager和tabLayout之间的滑动事件和点击事件关联起来。
* 此处不能使用tabLayout的setupWithViewPager()方法,否则会造成自定义view失效
*/
private void initListener() {
//添加关联接口,此处不能用自带的绑定方法,否则自定义view会失效
vpAll.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int i) {
tabCustom.getTabAt(i).select();
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
tabCustom.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//viewpager联动
vpAll.setCurrentItem(tab.getPosition());
//将之前选中的tab标签,设置为未选中状态
View oldView = customTabList.get(indicator);
CheckBox oldCbName = (CheckBox) oldView.findViewById(R.id.cb_name);
View oldCbSlide = oldView.findViewById(R.id.cb_slide);
oldCbName.setChecked(false);
oldCbSlide.setVisibility(View.INVISIBLE);
//当前选中的tab标签,设置为选中状态。
indicator = tab.getPosition();
View newView = customTabList.get(indicator);
CheckBox newCbName = (CheckBox) newView.findViewById(R.id.cb_name);
View newCbSlide = newView.findViewById(R.id.cb_slide);
newCbName.setChecked(true);
newCbSlide.setVisibility(View.VISIBLE);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
/**
* ViewPager的适配器。
*/
class ViewPagerAdapter extends FragmentPagerAdapter {
List<PageFragment> fragmentList;
public ViewPagerAdapter(FragmentManager fm, List<PageFragment> fragmentList) {
super(fm);
this.fragmentList = fragmentList;
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
/**
* 获取自定义Tab标签的显示的内容
*
* @param context
* @param
* @return
*/
public static View getCustomTabView(Context context, String text) {
View view = LayoutInflater.from(context).inflate(R.layout.item_custom_tab, null);
CheckBox tabText = (CheckBox) view.findViewById(R.id.cb_name);
tabText.setText(text);
return view;
}
}
pageFragment的代码和布局就不贴了。不想写的朋友可以看上一篇:我是传送门
activity_main的布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.administrator.tablayoutdemo.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_custom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="0dp"
app:tabMode="scrollable"
/>
<android.support.v4.view.ViewPager
android:id="@+id/vp_all"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
自定义tab标签的布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:orientation="vertical"
android:gravity="center"
android:descendantFocusability="blocksDescendants">
<CheckBox
android:id="@+id/cb_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:text=""
android:textColor="@drawable/select_text_color"
android:textSize="15sp"
android:paddingTop="13dp"
android:ellipsize="end"
android:singleLine="true"
android:maxEms="5"
android:textStyle="bold"
android:paddingBottom="13dp"
android:clickable="false"
/>
<View
android:id="@+id/cb_slide"
android:layout_width="20dp"
android:layout_height="3dp"
android:visibility="invisible"
android:background="#ff4fbf86"/>
</LinearLayout>
色值文件select_text_color,放在drawable目录下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#ff4fbf86" android:state_checked="true"/>
<item android:color="#BBBBBB" android:state_checked="false" />
</selector>
OK上完代码,针对关键点在做一次说明
1、标签在初始化的过程中,需要对第一个tab标签提前进行选中状态的初始化,否则可能会造成第一次启动的时候,第一个标签没有出现选中状态。
2、viewpager和TabLayout标签进行联动的时候,不可以使用TabLayout的setupWithViewPager()方法,而是要通过ViewPager的addOnPageChangeListener()和Tablayout的addOnTabSelectedListener()方法进行两个控件之间的联动效果。否则会造成自定义的CustomeTab被TabLayout默认生成的标签覆盖掉。
3、在布局文件中,需要将TabLayout的tabIndicatorHeight设为0。用来屏蔽掉控件自动生成的下滑线。
通过自定义的Tab标签可以完全实现自己控制tab标签的内容,这里就不展示tab标签做为底部导航栏的效果了。原理都是一样的。