通过TabLayout自定义tab实现图文混搭导航栏

国际惯例先看效果

好久不见，最近沉默与需求无法自拔，也根据最近的小需求做出一篇使用性的教程，内容不难。

本效果是使用谷歌提供的design库中的tabyout来实现的效果

com.android.support:design:25.1.1

如果不使用design库，我们可能需要自定义个横向的导航栏来实现这种效果，但是谷歌推出了官方的东西，这东西也好用我们不妨使用官方库来实现我们的需求。

先说几个使用TabLayout的优势：

1.我们可以看到tab下方的红线是有过渡动画并且可以伸缩，如果自己手写动画也是比较麻烦的。

2.可以直接给TabLayout设置ViewPager直接实现联动

3.支持图文混搭也支持自定义的view加入tab中。（本文demo就是自定义的一个view加入tab中）

4.多tab可以滑动的时候，居中滚动流畅准备。

5.支持方法多，扩展性强（比如tab想支持GIF就在tab加个imageview使用Glide显示一下gif十分方便），官方出品用着放心。

接下来就组装一下这个小demo

首先在xml中定义一个TabLayout和一个ViewPager

<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@drawable/tab_backgroud"></android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
android:id="@+id/p1"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>

然后关联TabLayout和ViewPager

mTabLayout.setupWithViewPager(mViewpager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
TabLayout.Tab tab = mTabLayout.getTabAt(i);
if (tab != null) {
tab.setCustomView(mPagerAdapter.getTabView(i));
}
}

我们自定义一个pagerAdapter，并额外提供一个getTabView方法

public View getTabView(int position) {
if (position == 4 || position == 6) {
View v = LayoutInflater.from(context).inflate(R.layout.textview_item, null);
return v;
}

View v = LayoutInflater.from(context).inflate(R.layout.imageview_item, null);
ImageView im = (ImageView) v.findViewById(R.id.m1);
imageViewSparseArray.put(position, im);
if (position == 0)
im.setImageResource(R.mipmap.timg);
return v;
}

给TabLayout设置监听并且处理选中非选中等状态：

mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {

Log.d("lmt", "tabtabtab" + tab.getPosition());
if (imageViewSparseArray.get(tab.getPosition()) != null)
imageViewSparseArray.get(tab.getPosition()).setImageResource(R.mipmap.timg);
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
if (imageViewSparseArray.get(tab.getPosition()) != null)
imageViewSparseArray.get(tab.getPosition()).setImageResource(R.mipmap.ic_launcher);

}

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

}
});

tabLayout默认是有点击水波纹的，如果我们不需要这个系统原生的点击水波纹效果。在tabLayout设置一个自定义的selector即可。

app:tabBackground="@drawable/tab_backgroud

跟多的TabLayout API博主就不一样介绍了，大家可以自行查阅。

demo地址：

https://github.com/AndroidMsky/TabLayoutWithAnyView

哪里可以找到我：

我的Github： https://github.com/AndroidMsky

我的博客主页： http://blog.csdn.net/androidmsky

欢迎加作者自营安卓开发交流群：

308372687