美文网首页
折叠标题栏的一种简单实现方式

折叠标题栏的一种简单实现方式

作者: Faint_smile | 来源:发表于2020-02-17 00:58 被阅读0次

在重构公司app的过程种,遇到折叠标题栏类似的设计,以前也实现过类似的功能,但是都是判断scrillview滑动距离,控制两个view的的滑动,来实现的,效果不尽人意。发现一个google原生控件CoordinatorLayout,能够很好的实现这种功能,今天分享出来,希望能够帮到大家。
布局:
<pre>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/ss"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:elevation="0dp">

            <RelativeLayout
                android:id="@+id/title1_layout"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_46"
                app:layout_scrollFlags="scroll | snap"

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/titiel2_layout"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_44">
        
            </RelativeLayout>
        </com.google.android.material.appbar.AppBarLayout>

        <com.baoyz.widget.PullRefreshLayout
            android:id="@+id/mian_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:nestedScrollingEnabled="false"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

        </com.baoyz.widget.PullRefreshLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</pre>
如上:
两个头布局,一个主布局,上拉的时候titiel2_layout会滑动到title1_layout的位置,下拉的时候title1_layout会从屏幕顶部滑回原先位置。
关键在于title1_layout中 app:layout_scrollFlags="scroll|snap" 属性的设置,这个有很多属性,具体功能自行百度,我解释一下我用到的两个属性:scroll使title1_layout布局可滑动、snap 当滑动距离达到title1_layout布局的高度的一半以上的时候,才能将title1_layout滑出或者滑入屏幕
主布局mian_layout 需要设置 app:layout_behavior="@string/appbar_scrolling_view_behavior"属性,behavior可以自定义,作用是控制布局位于AppBarLayout布局下边和滑动事件的传递,这里不多做描述


image.png

相关文章

网友评论

      本文标题:折叠标题栏的一种简单实现方式

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