备忘录------协调者布局属性简单使用

ZCGObject

已于 2023-08-28 10:58:35 修改

阅读量33

点赞数

文章标签： java kotlin

于 2019-03-04 16:50:13 首次发布

本文链接：https://blog.csdn.net/ZCGObject/article/details/79003990

版权

为了显的逼格高一点点，先来个英文全名吧----CoordinatorLayout。

首先在这里我要郑重其事的说一点曹尼玛的事情：协调者布局在25和26版本上的效果差距很大！！！

比如：在25的版本的时候，折叠的头部是不能跟随下部滚动控件的惯性给展开的，但是到了36之后，却是可以的！！！不想说那么多了，为了发现这个问题，都是眼泪，眼泪，眼泪！

先罗列出CoordinatorLayout的属性：

使用CoordinatorLayout时，我们的页面整体上分为两部分，一部分是上面折叠的东东，还有一部分是下面的滚动控件。上面折叠的这一部分我们需要写在一个AppBarLayout中，下面的滚动控件你有两种选择，要么使用NestedScrollView，要么使用RecyclerView。其他的滚动控件都是不可以实现的

当使用AppBarLayout的时候，为了实现头部的折叠或者滚动效果，是必须在其内部嵌套CollapsingToolbarLayout布局。当使用CollapsingToolbarLayout的时候，为了实现上面类似ActionBar的状态，必须使用Toolbar ,这样就可以设置在滚动时，将Toolbar中的布局置顶！当我们的界面需要将下面可滚动的部分有标题需要固定在折叠区域的下方时，我们有两种方法实现。

下面说一下CollapsingToolbarLayout的属性：

app：layout_scrollFlags:这个属性的用法是为了实现对其子控件的折叠效果和交互效果

一共有5个flag：

scroll：所有在器内部的子控件想有滚动效果都需要设置这个flag，如果没设置这个flag，那么所有控件都被固定在屏幕顶部。

enterAlways：这个flag让任意向下的滚动都会导致该CollapsingToolbarLayout变为可见，启用快速“返回模式”，类似上面有个搜索栏，上滑消消失，下滑出现的效果。

enterAlwaysCollapsed：此flag必须配合enterAlways使用才有效果。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么一旦底部控件向下滑动那么CollapsingToolbarLayout立即被展开到minHeight(即Toolbar)的高度，然后底部控件开始想下滚动直到滚动到顶部时，才开始继续将CollapsingToolbarLayou的宽度从minHeight(即Toolbar)的高度展开到全部的高度。

exitUntilCollapsed：当你定义了一个minHeight(即Toolbar)的高度，此布局将在滚动到达这个最小高度的时候折叠，类似的可以做悬停的效果，如果没有设置这个flag，则CollapsingToolbarLayout中的控件将全部滚动消失。

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

CollapsingToolbarLayout中的子控件有连个重要的属性：

app：layout_collapseMode

off：默认属性，布局将正常显示，无折叠行为。 pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部(分两种情况：第一：当CollapsingToolbarLayout不设置 exitUntilCollapsed属性时，只是折叠时候会一直在顶部，最终还是会滚出屏幕；第二：当CollapsingToolbarLayout设置exitUntilCollapsed属性时，不仅折叠的时候会在顶部，最终也会悬停在顶部)。 parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~1。

以上就是花费近两天时间总结出来的怕自己忘记，尽量用了最直白的话来记录一下，方便以后回忆。最后有当时修改总结的代码，如有忘记或者不懂的地方，可以复制最后的代码进行实际操作体验。

第一种：像之前的街角、多多项目中的。将需要悬停的部分写到Collapsing 和 AppBarLayout中间即可；

具体代码如下：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">



    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:contentScrim="@color/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|snap">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/reports_banner"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0"
            android:visibility="gone"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/mToolbar"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            app:contentInsetStart="0dp"
         >


            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="48dp">

                <ImageView
                    android:id="@+id/iv"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_centerVertical="true"
                    android:src="@mipmap/ic_launcher"/>


                <TextView
                    android:id="@+id/tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="测试哈哈哈"/>


                <ImageView
                    android:id="@+id/iv2"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="15dp"
                    android:src="@mipmap/ic_launcher"/>


            </RelativeLayout>


        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/shape_cool"
            android:gravity="center"
            android:orientation="horizontal"
            android:visibility="gone">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:src="@drawable/ic_widgets_white"/>

            <EditText
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@null"
                android:cursorVisible="false"
                android:hint="王者荣耀"
                android:paddingStart="10dp"
                android:textColor="@android:color/white"
                android:textColorHint="@android:color/white"
                android:textSize="14sp"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_notifications_white"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="10dp"
                android:src="@drawable/ic_add_white_24dp"/>
        </LinearLayout>

</android.support.design.widget.AppBarLayout>

第二种：将需要悬停的部分放到Collapsing种，具体代码如下，关键点就在于将Toobar设置一个最小高度（用来完成折叠后的悬停在顶部，类似ActionBar的效果）和正常的高度（必须装的下Toolbar和悬停部分的高度和）。并且设置Toolbar的内容属性 gravity = "Top";具体代码如下：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">



    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:contentScrim="@color/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed|snap">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/reports_banner"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/mToolbar"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            app:contentInsetStart="0dp"
            android:gravity="top"
            app:layout_collapseMode="pin">


            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="48dp">

                <ImageView
                    android:id="@+id/iv"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_centerVertical="true"
                    android:src="@mipmap/ic_launcher"/>


                <TextView
                    android:id="@+id/tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="测试哈哈哈"/>


                <ImageView
                    android:id="@+id/iv2"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="15dp"
                    android:src="@mipmap/ic_launcher"/>


            </RelativeLayout>


        </android.support.v7.widget.Toolbar>





        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/shape_cool"
            android:gravity="center"
            android:orientation="horizontal"
            android:layout_gravity="bottom">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:src="@drawable/ic_widgets_white"/>

            <EditText
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@null"
                android:cursorVisible="false"
                android:hint="王者荣耀"
                android:paddingStart="10dp"
                android:textColor="@android:color/white"
                android:textColorHint="@android:color/white"
                android:textSize="14sp"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_notifications_white"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="10dp"
                android:src="@drawable/ic_add_white_24dp"/>
        </LinearLayout>
    </android.support.design.widget.CollapsingToolbarLayout>




</android.support.design.widget.AppBarLayout>

分我们需要写在一个AppBarLayout中，下面的滚动控件你有两种选择，要么使用NestedScrollView，要么使用RecyclerView。其他的滚动控件都是不可以实现的

CollapsingToolbarLayout布局属性有：contentScrim：

1.整体分析

1.AppBarLayout中的写法

整个头部我们都写在AppBarLayout中，但是要实现折叠效果还需要CollapsingToolbarLayout布局，事实上，我们在AppBarLayout中放一个CollapsingToolbarLayout，头部的ImageView和Toolbar都写在CollapsingToolbarLayout中，一个简单的示例如下：

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/p1"/>
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

app:contentScrim="@color/colorPrimary"表示当ImageView折叠后Toolbar的颜色，这里的颜色我们不可以直接在Toolbar中设置，因为Toolbar一开始是透明的，只有当ImageView折叠到Toolbar的高度时Toolbar才变为蓝色的。

app:layout_scrollFlags是一个非常重要的属性，它里边的取值主要有五种，下面我分别来解释：

        1.scroll 表示CollapsingToolbarLayout可以滚动（不设置的话头部的ImageView将不能折叠）
        2.enterAlways 表示底部的滚动控件只要向上或向下滚动，头部就显示出来
        3.enterAlwaysCollapsed 表示当底部滚动控件滚动见顶时，头部显示出来
        4.exitUntilCollapsed 表示头部折叠到最小高度时（Toolbar的高度），就不再折叠
        5.snap 表示在滑动过程中如果停止滑动，则头部会就近折叠（要么恢复原状，要么折叠成一个Toolbar）

app:layout_collapseMode="parallax"表示ImageView的折叠和CollapsingToolbarLayout的折叠不同步，那么这个不同步到底是怎样一个不同步法呢？还有另外一个参数来设置不同步的参数，如下：

app:layout_collapseParallaxMultiplier="0.5"表示视觉乘数，该数值的取值为0～1，数值越大，视觉差越大（如果这里的值为0，则在头部折叠的过程中，ImageView的顶部在慢慢隐藏，底部不动，如果这里的值为1，ImageView的顶部不懂，底部慢慢隐藏，如果这里的取值为0～1之间，则在折叠的过程中，ImageView的顶部和底部都会隐藏，但是头部和底部隐藏的快慢是不一样的，具体速度和视觉乘数有关）

app:layout_collapseMode这个属性还有一个取值，是pin，该属性表示当折叠完成时将该控件放在页面的头部.

另一方面，当我们在使用CollapsingToolbarLayout的时候，我们一般也不再是通过Toolbar来给页面设置title了，因为这个title能够实现的效果非常有限，那么我们怎么给页面设置Title呢？我们可以通过给CollapsingToolbarLayout设置如下属性来解决Title的问题：

app:title="MyToolBar" 表示给页面设置一个Toolbar
app:collapsedTitleGravity="right" 表示折叠之后Title显示的位置
app:expandedTitleGravity="left|bottom" 表示展开时Title显示的位置

最后附上当时总结时候的测试代码，方便以后更改测试可以直接使用。

<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:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:minHeight="48dp"
            app:contentScrim="#00000000"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/reports_banner"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_gravity="bottom"
                android:background="#004455"
                android:gravity="center"
                android:text="我就是搜索框"
                android:textColor="#994565"
                android:textSize="20sp"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/mToolbar"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin"
                >


                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    android:background="@color/colorPrimary"
                    >

                    <ImageView
                        android:id="@+id/iv"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_centerVertical="true"
                        android:src="@mipmap/ic_launcher"/>


                    <TextView
                        android:id="@+id/tv"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="测试哈哈哈"/>


                    <ImageView
                        android:id="@+id/iv2"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="15dp"
                        android:src="@mipmap/ic_launcher"/>


                </RelativeLayout>

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/shape_cool"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:src="@drawable/ic_widgets_white"/>

            <EditText
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@null"
                android:cursorVisible="false"
                android:hint="王者荣耀"
                android:paddingStart="10dp"
                android:textColor="@android:color/white"
                android:textColorHint="@android:color/white"
                android:textSize="14sp"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_notifications_white"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="10dp"
                android:src="@drawable/ic_add_white_24dp"/>
        </LinearLayout>

    </android.support.design.widget.AppBarLayout>


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

        </android.support.v7.widget.RecyclerView>


        <LinearLayout
            android:id="@+id/ll_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#339977"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:src="@mipmap/ic_launcher"/>

                <TextView
                    android:id="@+id/tv_top"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="name"/>

            </LinearLayout>


            <View
                android:id="@+id/top_divider"
                android:layout_width="match_parent"
                android:layout_height="0.2dp"
                android:background="#33000000"/>

        </LinearLayout>


    </FrameLayout>


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/register_protocol_txt"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

ZCGObject

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
备忘录------协调者布局属性简单使用

为了显的逼格高一点点，先来个英文全名吧----CoordinatorLayout。首先在这里我要郑重其事的说一点曹尼玛的事情：协调者布局在25和26版本上的效果差距很大！！！比如：在25的版本的时候，折叠的头部是不能跟随下部滚动控件的惯性给展开的，但是到了36之后，却是可以的！！！不想说那么多了，为了发现这个问题，都是眼泪，眼泪，眼泪！先罗列出CoordinatorLayo...
复制链接

扫一扫