基于Android实现一个常用的布局吸顶效果

今天给大家带来一个布局吸顶效果。一般出现在内容较长页面还嵌套着分类页面的情况，比如电商的详情页嵌套分类，在页面滑动到tab的时候我们希望tab还能保留在页面顶部而不被顶上去。话不多说，直接上效果图：

替换大法：

其实很早之前就接触到这类效果了。当时采用的最古老的方式：XML中编写两套一模一样的tab。其中多出的一套放在页面最顶部默认隐藏，监听最外层的滑动控件。当Y向滑动值达到tab的top时显示顶部隐藏的那个tab以达到目的。反之，当滑动距离小于tab的bottom时，隐藏顶部的tab。

scroll?.setOnScrollChangeListener { _, _, scrollY, _, _ ->
   tabTop.visible = scrollY > tab.top
}

这样写得到的效果完全没问题，但需要编写两套同样的布局，有时候可能还需要编写两套同样的逻辑，这显然是不可取的。

VLayout布局：

后来又接触过阿里的VLayout，一个针对RecyclerView的LayoutManager扩展库。可以将各种布局融为一体，整个页面就只是一个RecyclerView。其中有一个StickyLayoutHelper布局，可以叫做吸附布局，可起到吸附顶部或底部等功能。但可能不适用于我们这个页面，仅因为一个吸附功能就去引入一个库且配置稍微繁琐一点，所以这个方案仅当备用方案。

ConsecutiveScroller：

无意之中在Github上看到了ConsecutiveScroller，可以说它是专门为各类滑动效果做的一个轮子。不仅支持各类模式的吸顶功能，还可以嵌套各类滑动控件使其连续滑动，咱们就以上面的效果图简单做个实现。

通过文档得知，ConsecutiveScrollerLayout是作为顶级控件，由它包裹咱们的内容。其中有个layout_isSticky属性，为true就代表托顶，当然可以多个控件都托顶。由于我们布局是有ViewPager的，为了能够正常滑动需要实现IConsecutiveScroller接口，直接自定义一个ViewPager实现该接口即可。

</com.donkingliang.consecutivescroller.ConsecutiveScrollerLayout>
   ......
<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    app:layout_isSticky="true"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/teal_200"
    app:tabIndicatorHeight="3dp"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/black" />
<com.donkingliang.consecutivescroller.ConsecutiveViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</com.donkingliang.consecutivescroller.ConsecutiveScrollerLayout>

像这样配置后运行即可达到效果，使用起来很简单，但其中还有些细节需要注意：

• 文档中注明最好将ConsecutiveScrollerLayout作为顶级布局，但我们的应用通常是配置了无标题栏和沉浸式主题的效果。如果将标题写在ConsecutiveScrollerLayout中会被滑动出屏幕，所以外部还是需要根据情况套一层布局用来实现沉浸式和标题栏。
• 该布局作为顶级布局后，其子View不再支持margin等属性，需要用View进行填充
• 当子View是Linearlayout且视图超过一屏时是不能滑动的，需要在Linearlayout外部嵌套一层可滑动控件

好了，以上便是实现一个常用的布局吸顶的全部内容，希望对大家有所帮助。

到此这篇关于基于Android实现一个常用的布局吸顶效果的文章就介绍到这了,更多相关Android实现布局吸顶内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论