CoordinatorLayout、AppbarLayout、C

2018-01-11 本文已影响0人草帽团长

一、前言

依赖关系：
CollapsingToolbarLayout > AppbarLayout > CoordinatorLayout

CollapsingToolbarLayout，用来包装Toolbar实现可折叠标题栏，必须作为AppbarLayout的直接子view使用；AppbarLayout又要作为CoordinatorLayout的直接子view使用，否则功能不能正常使用。

三者都是design包中的，使用需要导入design包

compile 'com.android.support:design:25.3.1'

二、CoordinatorLayout

1. 简介

CoordinatorLayout，design包提供的一个加强版的FrameLayout，可以监听子控件的各种事件，自动协调作出最合理的响应。

2. 要点

app:layout_behavior （用于child view）

布局示例：
根部局CoordinatorLayout，子视图 Toolbar + NestedScrollview

因为 CoordinatorLayout 实际上是 FrameLayout，所以 NestedScrollview 会覆盖遮挡 Toolbar。

解决办法：

NestedScrollview 加上 MarginTop 属性，值为 Toolbar 高度。

但是，CoordinatorLayout 为我们提供了更好的解决办法：

为Toolbar包裹一层AppbarLayout
为NestedScrollview添加属性app:layout_behavior="@string/appbar_scrolling_view_behavior"

子视图为滚动视图

子视图为滚动控件时，要选择实现NestedScrollingChild接口的控件，如NestedScrollview 或 Recyclerview ；如果用listview 或 scrollview联动有问题

三、AppbarLayout

1. 简介

AppbarLayout继承自LinearLayout，是个垂直的线性布局，严重依赖CoordinatorLayout。

2. 要点

app:layout_scrollFlags （用于child view）

AppbarLayout通过child view设置的这个属性获知它们需要的滚动行为。共有5种常量值：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed。

代码设置：

AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL| AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP);

xml设置：

 <android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    app:layout_scrollFlags="scroll|snap"/>

scroll

滚动模式，此属性将会让child view直接与滚动事件关联，随着scroll view滚动而滚动，优先滚动scroll view。

注意：

使用其他常量值，必须结合使用scroll常量值，否则不起作用
使用此常量值的子view，如果前面还有其他子view，也要使用此常量值，否则不起作用

 <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:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll" />
</android.support.design.widget.AppBarLayout>

[图片上传失败...(image-ef5f3-1545206955442)]

enterAlways
快速返回模式，向下滚动时优先滚动child view至完全显示，再去滚动scroll view。

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

    <android.support.v7.widget.Toolbar
       ……
    app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>

image

enterAlwaysCollapsed
快速返回折叠标题栏的最小高度，enterAlaways的附加值，向下滚动时优先滚动child view至最小高度，再滚动scroll view 至完全显示，最后滚动child view 至完全显示。

 <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:layout_width="match_parent"
        android:layout_height="200dp"
        android:minHeight="56dp"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />
</android.support.design.widget.AppBarLayout>

image

exitUntilCollapsed
滚出屏幕至折叠处（最小高度），向上滚动时child view 随 scroll view滚动出屏幕直到最小高度后不再滚动；向下滚动时优先滚动scroll view 至完全显示，再滚动child view至完全显示。

 <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:layout_width="match_parent"
        android:layout_height="200dp"
        android:minHeight="56dp"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|exitUntilCollapsed" />
</android.support.design.widget.AppBarLayout>

image

snap
吸附模式，根据child view在我们滑动中松开手指时的滑动高度决定child view 要么完全显示，要么完全不显示。

<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:layout_width="match_parent"
        android:layout_height="200dp"
        android:minHeight="56dp"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" />
</android.support.design.widget.AppBarLayout>

image

上图因为结合使用了exitUntilCollapsed，toolbar最少显示为最小高度，不能完全不显示

四、CollapsingToolbarLayout

1. 简介

CollapsingToolbarLayout继承自FrameLayout，用来包装Toolbar实现折叠标题栏，必须在AppbarLayout中使用。

2. 要点

theme （用于自身）
为实现更高级的toolbar效果，theme属性要提到collapsingtoolbarlayout上，否则collapsingtoolbarlayout使用的是应用的主题。

上图，只给toolbar设置了theme：

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

应用主题:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

collapsingtoolbarlayout使用了应用主题，所以它的标题为黑色

app:layout_collapseMode （用于child view）
collapsingtoolbarlayout中的child view的折叠模式。
- pin
  大头针效果，在折叠的过程中保持位置不变。
- parallax
  视觉差效果，在折叠过程中产生错位偏移。
app:contentScrim （用于自身）
此属性用于collapsingtoolbarlayout自身，用于设定它在折叠过程中趋于折叠状态和折叠后的背景色，折叠后就是普通的toolbar，一般设为背景色为colorPrimary。

五、整合使用实现酷炫折叠标题栏

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="250dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <ImageView
                android:id="@+id/iv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        </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">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lineSpacingExtra="4dp"
            android:text="
    宋祖儿（lareina），1998年5月23日出生于天津，中国内地影视女演员。
    2005年，宋祖儿出演了个人首部影视作品《海阔天高》，由此开始涉足演艺圈[1]  。2007年，首次登上央视春晚舞台，并表演节目《阳光下的花朵》[2]  ；同年，由她领衔主演的公益电影《你是天使》上映[3]  。2009年，因在古装神话剧《宝莲灯前传》中饰演哪吒而被观众熟知[4]  。
    2016年，主演喜剧冒险片《洛杉矶捣蛋计划》[5]  。2017年，除了加盟湖南卫视明星自助旅游真人秀《花儿与少年第三季》[6]  ，她还主演古代传奇《九州缥缈录》及青春剧《全职高手》[7]  。
"
            android:textSize="22sp"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        app:elevation="8dp"/>

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

2. 代码设置

final ImageView iv = (ImageView) findViewById(R.id.iv);
iv.post(new Runnable() {
    @Override
    public void run() {
        setPic(iv);
    }
});
        
 public void setPic(ImageView imageView) {
        // 获取imageview控件的宽高
        int targetW = imageView.getWidth();
        int targetH = imageView.getHeight();
        if (targetW == 0 || targetH == 0) {
            imageView.measure(0, 0);
            targetW = imageView.getMeasuredWidth();
            targetH = imageView.getMeasuredHeight();
        }

        // 获取图片的宽高
        BitmapFactory.Options bmOptions = new BitmapFactory.Options();
        bmOptions.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(getResources(),R.drawable.girl,bmOptions);
        int photoW = bmOptions.outWidth;
        int photoH = bmOptions.outHeight;

        // 获得最小压缩比例
        int scaleFactor = Math.min(photoW/targetW, photoH/targetH);

        // Decode the image file into a Bitmap sized to fill the View
        bmOptions.inJustDecodeBounds = false;
        bmOptions.inSampleSize = scaleFactor;
        bmOptions.inPurgeable = true;
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.girl,bmOptions);

        imageView.setImageBitmap(bitmap);
    }

[图片上传失败...(image-edcfeb-1545206955442)]

3. 注意

如果不使用iv.post(runnable),会报错在这行

int scaleFactor = Math.min(photoW/targetW, photoH/targetH);

错误为：

java.lang.ArithmeticException: divide by zero

原因是：
代码在onCreate()中执行，而view的绘制分为onMeasure、onDraw()、onLayout()三个步骤，view的宽高要在onLayout()这个步骤才能获取到，但在onCreate()中获取时不能保证view的绘制已经到了这一步，没有到这步，获取的是0，所以报这个除数为零的算术异常。

view.post(Runnable)的作用：
将任务添加到消息队列中，保证在UI线程执行。MessageQueue是按顺序处理消息的，而在setContentView()后队列中会包含一条询问是否完成布局的消息，而我们的任务通过View.post()方法被添加到队列尾部，保证了在layout结束以后才执行。

图片压缩
上面代码可看出，collapsingtoolbarlayout中的imageview设置图片是通过代码设置的，并且进行了图片压缩。
如果不压缩，图片尺寸过大，会导致OOM 或者页面非常卡顿。
当然也可以直接用图片处理框架，如glide

GitHub示例：ViewDemo/CoordinatorLayoutDemo

个人总结，水平有限，如果有错误，希望大家能给留言指正！如果对您有所帮助，可以帮忙点个赞！如果转载，希望可以留言告知并在显著位置保留草帽团长的署名和标明文章出处！最后，非常感谢您的阅读！

CoordinatorLayout、AppbarLayout、C

一、前言

二、CoordinatorLayout

1. 简介

2. 要点

三、AppbarLayout

1. 简介

2. 要点

四、CollapsingToolbarLayout

1. 简介

2. 要点

五、整合使用实现酷炫折叠标题栏

1. 布局

2. 代码设置

3. 注意

猜你喜欢

热点阅读