CoordinatorLayout协调布局

最新推荐文章于 2023-11-26 21:32:32 发布

leeyushi

最新推荐文章于 2023-11-26 21:32:32 发布

阅读量932

点赞数

分类专栏： AndroidStudio

本文链接：https://blog.csdn.net/a1003434346/article/details/99243873

版权

AndroidStudio 专栏收录该内容

105 篇文章 1 订阅

订阅专栏

本文将用以下几类做介绍:

可以用来做什么
示例
使用方法
属性
理论知识、注意事项

可以用来做什么

CoordinatorLayout可以配合其它一些布局【AppBarLayout】、【CollapsingToolbarLayout】打造出一个顶层布局管理者的样式

示例

//引入degisn库的支持
implementation 'com.android.support:design:27.1.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="170dp"
            app:contentScrim="@color/colorAccent"
            app:expandedTitleMarginBottom="100dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="我是collapsebar的标题">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="第一个固定(pin)"
                android:textSize="40sp"
                app:layout_collapseMode="pin" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="不设置,跟随滑动"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="视察效果(parallax)"
                android:textSize="40sp"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_gravity="top"
                android:background="#600f"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="我是toolbar" />
            </android.support.v7.widget.Toolbar>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="appbar之内,collap之外"
            android:textColor="#0f0" />

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

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="哈"
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="哈"
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="哈"
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="哈"
                android:textColor="#0f0"
                android:textSize="200sp" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

使用方法
将从3个属性逐一进行介绍

CoordinatorLayout
AppBarLayout
CollapsingToolbarLayout

CoordinatorLayout

CoordinatorLayout做为一个顶层布局管理者,它继承自Fragment，里面包含的子控件位置具有Fragment的特性(从上往下)，其典型的子View包括：AppBarLayout、FloatingActionButton、SnackBar，这里只对常用的作介绍

它是support.design包中的控件，使用的时候要导入compile ‘com.android.support:design:XX.X.X’包

AppBarLayout

AppBarLayout继承自LinearLayout，里面包含的子控件位置具有LinearLayout的特性，通过对它的子view设置app:layout_scrollFlags属性，来达到滚动时的视觉效果（它需要作为CoordinatorLayout的子布局），它的子view可以是下面将要介绍的CollapsingToolbarLayout，也可以是其它任意控件，如果需要滚动折叠，顶层必须为CollapsingToolbarLayout，否则滚动时无法折叠

CollapsingToolbarLayout

CollapsingToolbarLayout继承自Fragment，里面包含的子控件位置具有Fragment的特性(从上往下)，给它设置layout_scrollFlags属性后（前提是它的父容器必须是AppBarLayout）它可以设置它的子控件在滚动时的视觉样式

属性
CoordinatorLayout

它的子布局里不需要滚动折叠的View,类似与RecyclerView、ViewPage等，需要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"
子元素可以通过android:layout_gravity="bottom"来设置它所在的位置

AppBarLayout

它自己本身不需要设置什么属性，如果说要有的话可以定制它的样式：android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
它的子view可以通过app:layout_scrollFlags属性设置滚动条件
app:layout_scrollFlags有五种滚动标识：
scroll：所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。 
enterAlways：这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。 
enterAlwaysCollapsed：假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。 
exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。 
snap：当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开。
可以组合使用，用|运算符：
app:layout_scrollFlags="scroll|snap"
不设置代表依次固定到顶端，不随着滑动而消失
用addOnOffsetChangedListener可以监听滑动偏移
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int state) {
          // TODO
                if (state == 0) {
                    //展开状态
                    Log.i("onOffsetChanged", "展开状态");

                } else if (Math.abs(state) >= appBarLayout.getTotalScrollRange()) {

                    //折叠状态
                    Log.i("onOffsetChanged", "折叠状态");
                } else {

                    //中间状态
                    Log.i("onOffsetChanged", "中间状态");
                }
    }
});
用appBarLayout.getTotalScrollRange()方可法获取最大偏移值

去除底边阴影:
app:elevation="0dp"
设置背景色为透明，否则默认的底色会遮挡背景色
android:background="@android:color/transparent"

CollapsingToolbarLayout

如果要使用CollapsingToolbarLayout，它的父容器必须是AppBarLayout
CollapsingToolbarLayout的子布局有3种折叠模式（子布局中设置app:layout_collapseMode）

off：这个是默认属性，布局将正常显示，没有折叠的行为。
pin：在滚动期间，此布局将一直固定在顶部(一直到可滚动最大范围到达之后才会滚动上去)。 
parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。
none：默认属性，布局将正常显示，会跟着视觉滚动，不设置默认就是此属性
parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。 
当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~1。如果设置了1，相当于设置了pin（可滚动最大范围到达100%,该子view才滚动上去,如果是0.5就代表滚动到50%时,该子view就随着滚动而消失）

参考资料：

Android 协调者布局 CoordinatorLayout简单认识

CoorinatorLayout协调者布局

leeyushi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CoordinatorLayout协调布局

本文将用以下几类做介绍:可以用来做什么示例使用方法属性理论知识、注意事项可以用来做什么 CoordinatorLayout可以配合其它一些布局【AppBarLayout】、【CollapsingToolbarLayout】打造出一个顶层布局管理者的样式示例 //引入degisn库的支持implementation 'com.android.suppor...
复制链接

扫一扫