通过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