美文网首页自定义控件UI
CoordinatorLayout和AppBarLayout的学

CoordinatorLayout和AppBarLayout的学

作者: 喝了小酒的 | 来源:发表于2021-04-27 14:34 被阅读0次

    CoordinatorLayout

    1. 相当于一个加强版的FrameLayout
    2. 给其子view设置Behavior,可以控制子view间的交互(onTouch、onMeasure、onLayout)行为
    3. Behavior可自定义

    AppBarLayout

    1. 是一个垂直的线性布局
    2. 通过设置layout_scrollFlags 属性或是 setScrollFlags()控制子View的滚动行为
    3. 必须作为CoordinatorLayout的直接子View才能正常工作
    4. 需要在CoordinatorLayout 中提供一个可滚动view(NestedScrollView、RecyclerView等)

    layout_scrollFlags

    • 不设置 layout_scrollFlags view不滚动和滚动view没关系
    • scroll 和滚动view一起滚动,同上同下
      scroll
      除了scroll,其他取值必须和scroll一起使用用“|”连接
    • scroll|enterAlways
    1. 向👇滚动 先完全显示AppBarLayout ,再滚动滚动view
    2. 向👆滚动 一起滚动,不管滚动view当前的位置


      scroll|enterAlways
    • scroll|enterAlways|enterAlwaysCollapsed enterAlwaysCollapsed需要和enterAlways一起使用
    1. 需要设置minHeight才能正常使用
    2. 向👇滚动 先滚动到AppBarLayout 的最小高度,然后就滚动滚动view,滚动view滚动到顶后,最后再滚动AppBarLayout 到完全显示
    3. 向👆滚动 一起滚动


      scroll|enterAlways|enterAlwaysCollapsed
    • exitUntilCollapsed
    1. 需要设置minHeight
    2. 定义了AppBarLayout消失的规则
    3. 向👆滚动 一起滚动到最小高度,然后滚动view滚动,AppBarLayout 不完全滚出屏幕
    4. 向👇滚动 先滚动滚动view,滚动view完全展示再滚动AppBarLayout


      scroll|exitUntilCollapsed
    • snap 当一个滚动事件结束,如果视图是部分可见的,那么它将被滚动到收缩或展开。例如,如果视图只有底部 25%显示,它将折叠。相反,如果它的底部 75%可见,那么它将完全展开。

    源码

    只需要修改相应的layout_scrollFlags即可体验对应效果

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.widget.CoordinatorLayout 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"
        tools:context=".act.design.CoordAppbarActivity">
    
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
    
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                app:title="标题"
                app:titleTextColor="@android:color/white"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="26dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
            </androidx.appcompat.widget.Toolbar>
    
        </com.google.android.material.appbar.AppBarLayout>
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recycler"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    

    CollapsingToolbarLayout

    1. 可折叠的toolBar
    2. 设置layout_collapseMode控制折叠模式

    CollapsingToolbarLayout的子布局有3种折叠模式

    • off:这个是默认属性,布局将正常显示,没有折叠的行为。
    • pin:CollapsingToolbarLayout折叠后,此布局将固定在顶部。
    • parallax:CollapsingToolbarLayout折叠时,此布局也会有视差折叠效果。

    以下为demo展示
    Toolbar设置为pin 固定在底部
    ImageView设置为parallax 滑动折叠时,产生视差效果

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.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">
    
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
                <!--视差滚动imageView-->
                <ImageView
                    android:id="@+id/main.backdrop"
                    android:layout_width="wrap_content"
                    android:layout_height="300dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/ball"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.8" />
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?android:attr/actionBarSize"
                    app:layout_collapseMode="pin">
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="标题栏" />
                </androidx.appcompat.widget.Toolbar>
    
    
            </com.google.android.material.appbar.CollapsingToolbarLayout>
    
    
        </com.google.android.material.appbar.AppBarLayout>
    
        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <TextView
                android:id="@+id/tv_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="20dp" />
    
        </androidx.core.widget.NestedScrollView>
    
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    
    
    CollapsingToolbarLayout展示

    相关文章

      网友评论

        本文标题:CoordinatorLayout和AppBarLayout的学

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