CoordinatorLayout和AppBarLayout（android MD 三）

系统管理员 2022-06-06 03:51 176阅读 0赞

> > CoordinatorLayout  
> > 调度协调子布局或者单纯的作为ViewGroup使用
> 
> `public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent`
> 
> ## CoordinatorLayout和AppBarLayout搭配使用 ##
> 
> >     添加依赖
> >     compile 'com.android.support:design:25.0.0'
> 
> **AppBarLayout嵌套Toolbar**
> 
> ![这里写图片描述][SouthEast]
> 
> > 白色区域是一个可滚动的view，NestedScrollView或RecyclerView，listview无效
> 
>     "><android.support.design.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="com.example.coordinatorlayoutdemo.MainActivity">
>         <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content">
>             <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:background="?attr/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways" android:layout_width="match_parent" android:layout_height="wrap_content"/>
>             <TextView android:layout_width="match_parent" android:layout_height="40dp" android:background="@color/colorAccent" android:text="我是不动的，因为我没有设置layout_scrollFlags" />
>         </android.support.design.widget.AppBarLayout>
>         <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v4.widget.NestedScrollView>
>     </android.support.design.widget.CoordinatorLayout>
> 
> > **app:layout\_scrollFlags有如下几个可以设置**
> > 
> >     scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。没有设置这个值，将会停留在屏幕顶部。   enterAlways:
> > 
> > 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。 enterAlwaysCollapsed:  
> > 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。  
> > exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。
> 
> **给滑动的View设置app:layout\_behavior属性**
> 
>  *  设置系统已经有的
>  *  自定义Behavior 通过继承 CoordinatorLayout.Behavior

**AppBarLayout嵌套CollapsingToolbarLayout**

![这里写图片描述][SouthEast 1]

<?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.coordinatorlayoutdemo.AppBarLayout_CollapsingToolbarLayout">
        <android.support.design.widget.AppBarLayout android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">
    
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">
    
            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax"
                />
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

> app:contentScrim=”?attr/colorPrimary”  
> ToolBar被折叠到顶部固定时候的背景 也可以通过方法  
> ![这里写图片描述][SouthEast 2]
> 
> app:layout\_collapseMode=”parallax”  
> pin 固定模式，在折叠的时候最后固定在顶端  
> parallax 来改变子视图的折叠模式
> 
> app:title=”@string/app\_name”  
> 改变标题优先级大余Toolbar里面设置的标题

[源码下载地址][Link 1]

后期还会更新一些通过自定义Behavior来实现的效果图～～～

[SouthEast]: /images/20220606/bf20b7ac5ecf4f1798518f005bb1c641.png
[SouthEast 1]: /images/20220606/e46bce05b39a483388cd01c47b78b2ce.png
[SouthEast 2]: /images/20220606/dd5be32d976e4dd3aea529b23da39eff.png
[Link 1]: https://github.com/yang-mr/Study_Notes/tree/master/MDDemo/coordinatorlayoutdemo