美文网首页
Android实现界面滚动时顶部部分内容置顶(附源码)

Android实现界面滚动时顶部部分内容置顶(附源码)

作者: Geeny | 来源:发表于2018-11-03 18:35 被阅读331次

    先看效果。

    实现的效果

    源码:GitHub地址


    实现与分析

    很显然,这样的效果用到了Android Material Design里的控件,分别是CoordinatorLayout和AppBarLayout。其中,AppBarLayout控件便具备顶部固定的功能,但它需要被CoordinatorLayout嵌套起来才能实现滚动固定的效果,否则无效

    上面效果图的Layout代码如下:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:focusable="true"
        android:focusableInTouchMode="true">
    
        <android.support.design.widget.AppBarLayout
            android:id="@+id/abl_head"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:translationZ="5dp">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/white"
                android:minHeight="50dp"
                android:orientation="vertical"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways|snap">
    
                <include layout="@layout/layout_hidden_bar" />
    
                <include layout="@layout/layout_stick_bar" />
    
            </LinearLayout>
    
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
    </android.support.design.widget.CoordinatorLayout>
    

    其中include进来的@layout/layout_hidden_bar和@layout/layout_stick_bar就是效果图中顶部的可隐藏布局和固定布局。都是简单色块+文本,就不展示xml源码了。

    上面的实现,关键的在于LinearLayout的两个属性:

    app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways|snap"
    
    android:minHeight="50dp"  // 其中50dp是指@layout/layout_stick_bar的高度
    

    先说说app:layout_scrollFlags属性。

    查看源码知道,CoordinatorLayout实现了NestedScrollingParent2接口,它支持对所嵌套的子控件滚动时进行响应控制。用CoordinatorLayout包含了整个界面,在界面滚动时,所有控件都会根据CoordinatorLayout的滚动实现方法进行动态排版。这才有AppBarLayout在滚动时的折叠置顶效果,如果离开CoordinatorLayout控件,AppBarLayout便不具备这样的效果。

    app:layout_scrollFlags属性指明了LinearLayout在AppBarLayout中滚动时状态。其中:

    • scroll

    滚动时响应。如果不加上这个属性值,界面滚动时,顶部内容将不会随滚动折叠或变化。

    • exitUntilCollapsed

    Scroll Up: the view is always visible, provided its height is > 0 and the expanded version (e.g. Toolbar with an ImageView) will become visible when scrolled all the way up
    Scroll Down: the view scrolls with the rest of the layout's content, but only till its collapsed state (hence - "exit until collapsed"), so in case of a Toolbar with a fixed height, it will always be visible on the top

    界面在向上滚动时,如果有指定最小高度,指定最小高度的顶部布局内容会保持可见(即置顶)。向下移动,剩余的内容会跟着显示出来。

    如果没有设置这个属性,顶部内容将会随向上滚动而滚动,至最终消失。

    • enterAlways

    顶部布局总是进入。如果设定这个属性,无论在哪个地方只要界面向下滚动,顶部内容都会跟着滚下来。如果没有设定,则需要滚动到界面最顶部后,顶部布局才会出现。

    • snap

    Scroll Up AND Down fast scrolls up or down based on how much of the view is visible - if more than 50% - the view will scroll down, showing itself, if less - the view will hide; used with other flags as a further customization

    吸附显示。设置这个值后,隐藏的内容被拖出超过50%时,松开手就会自动显示整个布局;相反,显示的布局被隐藏超过50%时,松开手就会自动隐藏整个布局。

    可以看到,我们都设置了这四个属性。

    设置exitUntilCollapsed属性值后,还要设置顶部布局的最小高度,否则顶部的所有内容仍会随界面的向上滚动而全部隐藏(因为最小高度默认为0)。上面效果图中,顶部布局的最小高度是50dp,也就是固定视图@layout/layout_stick_bar的高度。


    另外,为了让recyclerView附着在AppBarLayout下面,需要对其设置app:layout_behavior属性,

    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    

    其中@string/appbar_scrolling_view_behavior的值为:

    <string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>
    

    大致作用是使recyclerView附着着AppBarLayout的滚动。具体实现待深究。

    相关文章

      网友评论

          本文标题:Android实现界面滚动时顶部部分内容置顶(附源码)

          本文链接:https://www.haomeiwen.com/subject/qqbkxqtx.html