【仿微信】实现主页导航切换效果

[TOCM]

最近在做一个APP，需要在首页实现一个在底部导航切换页面的功能，查了很多资料，在此记录一下实现流程。闲话不多说，我们开始撸代码。

无图无真相，没有图片，就没有说服力，先让我们先看下实现的效果图。

由于作者缺乏审美能力，请忽略颜色或布局的问题。

毫无疑问，我们需要Design库的支持，先依赖它吧

    implementation 'com.android.support:design:27.0.2'

在 activity_home.xml 文件中写布局代码

    <android.support.v4.view.ViewPager
        android:id="@+id/homeViewPagerNav"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.design.widget.TabLayout
        android:id="@+id/aHomeTabLayoutNav"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabIndicatorHeight="0dp"
        app:tabTextColor="#777"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@android:color/holo_blue_bright"
        android:background="#dddddd"/>

我们用ViewPager来存放Fragment，TabLayout存放导航条。

还有一些的属性，可能是你需要的，如下

app:tabSelectedTextColor  // 改变选中字体的颜色
app:tabTextColor          // 改变未选中字体的颜色
app:tabIndicatorColor     // 改变指示器下标的颜色
app:tabBackground         // 改变整个TabLayout的颜色

搜索发现，网上关于它的Adapter有几个，我们姑且参考Google的例子实现吧，会在后面给出链接地址。

    class AdapterFragment(fm: FragmentManager, context: Context) : FragmentPagerAdapter(fm) {

        private lateinit var list : List<Fragment>
        private var mContext : Context = context

        private val titles = listOf("消息", "首页", "我")

        fun setData(list: List<Fragment>) {
            this.list = list
        }

        override fun getItem(position: Int): Fragment = list[position]

        override fun getCount(): Int = list.size

        override fun getPageTitle(position: Int): CharSequence? = titles[position]

    }

我们在Activity中使用我们编写的Adapter，诚然我们写的Adapter是最简单的，因此Google例子给它取名为：SampleFragmentPagerAdapter 。

            val fm : FragmentManager = supportFragmentManager

            val adapter = AdapterFragment(fm, this)

            val list : List<Fragment> = listOf(NewFragment(), HomeFragment(), MyFragment())

            adapter.setData(list)

            homeViewPagerNav.adapter = adapter

            aHomeTabLayoutNav.setupWithViewPager(homeViewPagerNav)

无论是显示文本、图标，亦或者图文，并不能保证可以满足我们的需求或是野心。只有能在Tab上显示任何我们想显示的内容，才能打动我们，从而感叹“好的，就用你来显示Tab了！”。可喜可贺的是，TabLayout中的Tab是支持设置自定义View的。

    <TextView
        android:id="@+id/customTvHomeNavIconNews"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text=""
        android:gravity="center|bottom"
        android:visibility="gone"
        android:enabled="false"
        android:textSize="20dp"
        android:textColor="@color/home_tab_nav_text"/>
    <TextView
        android:id="@+id/customTvHomeNavIconHome"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text=""
        android:gravity="center|bottom"
        android:visibility="gone"
        android:enabled="false"
        android:textSize="20dp"
        android:textColor="@color/home_tab_nav_text"/>
    <TextView
        android:id="@+id/customTvHomeNavIconMy"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text=""
        android:gravity="center|bottom"
        android:visibility="gone"
        android:enabled="false"
        android:textSize="20dp"
        android:textColor="@color/home_tab_nav_text"/>
    <TextView
        android:id="@+id/customTvHomeNavText"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:text="text"
        android:textSize="14dp"
        android:gravity="center"
        android:enabled="false"
        android:textColor="@color/home_tab_nav_text"/>

切换文字颜色变化

    <item android:state_pressed="true" android:color="@color/colorPrimaryDark"/>
    <item android:state_enabled="true" android:color="@color/colorPrimaryDark"/>
    <item android:state_selected="true" android:color="@color/colorPrimaryDark"/>
    <item android:color="@color/color_777"/>

切换背景变化

    <item android:drawable="@android:color/holo_blue_bright" android:state_selected="true"/>
    <item android:drawable="@android:color/darker_gray" android:state_selected="true"/>

需要说明的是，你可能会觉得我这个写得有些臃肿，有一个简单写法，但是不能使用字体图标，所以，作者采用了这种。

此时，你需要让Adapter支持自定义View，这样才能保证我们的自定义View能被使用。

        private val icons = listOf(R.id.customTvHomeNavIconNews,
                                    R.id.customTvHomeNavIconHome,
                                    R.id.customTvHomeNavIconMy)

        @SuppressLint("WrongConstant")
        fun getTabView(position: Int): View {
            val v = LayoutInflater.from(mContext).inflate(R.layout.custom_home_tab_nav, null)

            v.isSelected = false

            val icon = v.findViewById<TextView>(icons[position])
            icon.visibility = visible

            IconFontUtil.injectFont(icon)

            val tv = v.findViewById<TextView>(R.id.customTvHomeNavText)
            tv.text = titles[position]
            return v
        }

            for (i in 0 until aHomeTabLayoutNav.tabCount) {
                aHomeTabLayoutNav.getTabAt(i)!!.customView = adapter.getTabView(i)
            }

            aHomeTabLayoutNav.getTabAt(1)!!.select()

此时，我们的自定义就会被使用了，你可以运行一下，看看效果。

1、TabLayout使用详解

2、Google Play Style Tabs using TabLayout

3、Design库-TabLayout属性详解

4、ViewPager 全面剖析及使用详解

5、 TabLayout的简单运用和若干问题的解决

6、Android之TabLayout使用和默认选中+移动(解决)

7、Android---Tablayout自定义Tab的背景和字体的颜色变化