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

这里写图片描述