Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Android实现布局吸顶

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

作者:似曾相识2022

这篇文章给大家介绍一个布局吸顶效果,一般出现在内容较长页面还嵌套着分类页面的情况,比如电商的详情页嵌套分类,在页面滑动到tab的时候我们希望tab还能保留在页面顶部而不被顶上去,文中有详细的代码示例,需要的朋友可以参考下

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

替换大法:

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

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

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

VLayout布局:

后来又接触过阿里的VLayout,一个针对RecyclerViewLayoutManager扩展库。可以将各种布局融为一体,整个页面就只是一个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>

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

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

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

您可能感兴趣的文章:
阅读全文