欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-03-05 15:07:27
需求最近有需求要实现商品详情界面,比较常见的就是那种头部是Tab页,下面是滑动视图,具体效果类似下图:当选中头部某个tab,下部视图滑动到具体内容,或者视图滑动到某具体内容时,tab页自动选中某tab。现在实现这种效果很简单的,做个简单总结。实现这里使用TabLayout+NestedScrollView ,TabLayout负责头部tab,NestedScrollView 负责界面上下滑动的视图。如下部分代码:

需求

最近有需求要实现商品详情界面,比较常见的就是那种头部是Tab页,下面是滑动视图,具体效果类似下图:
android使用TabLayout+NestedScrollView 实现详情界面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