android使用TabLayout+NestedScrollView 实现详情界面tab页 关联 上下滑动视图的效果

需求

最近有需求要实现商品详情界面，比较常见的就是那种头部是Tab页，下面是滑动视图，具体效果类似下图：

当选中头部某个tab，下部视图滑动到具体内容，或者视图滑动到某具体内容时，tab页自动选中某tab。现在实现这种效果很简单的，做个简单总结。

实现

这里使用TabLayout+NestedScrollView ，TabLayout负责头部tab，NestedScrollView 负责界面上下滑动的视图。如下部分代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="@color/white"
    >
    <androidx.core.widget.NestedScrollView
        android:id="@+id/mainScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <View
                    android:id="@+id/oneStartView"
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:visibility="invisible"
                    />
            </LinearLayout>
           <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <View
                    android:id="@+id/twoStartView"
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:visibility="invisible"
                    />
            </LinearLayout>
             <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <View
                    android:id="@+id/threeStartView"
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:visibility="invisible"
                    />
            </LinearLayout>   
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/goodsDetailsTabLayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_30"
        android:background="@color/translucent"
        app:tabIndicatorColor="@color/cash_gift_font_red"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorHeight="@dimen/dp_2"
        app:tabRippleColor="@color/translucent"
        app:tabSelectedTextColor="@color/black_font_color"
        app:tabTextAppearance="@style/music_tabLayout_text"
        android:visibility="gone"
        app:tabTextColor="@color/black_font_color">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="商品" />
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="详情" />
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="店铺" />
    </com.google.android.material.tabs.TabLayout>
</FrameLayout>

视图布局好以后，具体控制代码 大致如下：

goodsDetailsTabLayout!!.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                when (tab.position) {
                    Int_ZREO -> {
                        mainScrollView.smoothScrollTo(0,30)
                    }
                    Int_ONE -> {
                        mainScrollView.smoothScrollTo(0,twoStartView.y.toInt())
                    }
                    Int_THREE ->{
                        mainScrollView.smoothScrollTo(0,threeStartView.y.toInt())
                    }
                }
            }

            override fun onTabUnselected(tab: TabLayout.Tab) {}
            override fun onTabReselected(tab: TabLayout.Tab) {}
        })

上面是通过addOnTabSelectedListener实现选中tab，视图滑动到某块内容位置。
下面是通过setOnScrollChangeListener实现滑动视图时触发 选中某类tab 。

 mainScrollView.setOnScrollChangeListener(NestedScrollView.OnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->
            when {
                scrollY < 30 -> {
                    goodsDetailsTabLayout.visibility = View.GONE
                }
                scrollY < oneStartView.y.toInt() -> {
                    goodsDetailsTabLayout.visibility = View.VISIBLE
                    goodsDetailsTabLayout!!.selectTab(goodsDetailsTabLayout!!.getTabAt(0))
                    goodsDetailsTabLayout!!.setScrollPosition(0, 0f, true)
                }
                scrollY > twoStartView.y.toInt() -> {
                    goodsDetailsTabLayout.visibility = View.VISIBLE
                    goodsDetailsTabLayout!!.selectTab(goodsDetailsTabLayout!!.getTabAt(1))
                    goodsDetailsTabLayout!!.setScrollPosition(1, 0f, true)
                }
                scrollY > threeStartView.y.toInt() -> {
                    goodsDetailsTabLayout.visibility = View.VISIBLE
                    goodsDetailsTabLayout!!.selectTab(goodsDetailsTabLayout!!.getTabAt(2))
                    goodsDetailsTabLayout!!.setScrollPosition(2, 0f, true)
                }
            }
        })

以上就是使用TabLayout+NestedScrollView 实现详情界面tab页 关联 上下滑动视图的效果，代码都是抽离出来的，大致如上。

本文地址：https://blog.csdn.net/qjsjp/article/details/110290711