CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar+Behavior

最新推荐文章于 2025-05-28 10:50:24 发布

Mars-xq

最新推荐文章于 2025-05-28 10:50:24 发布

阅读量884

点赞数

CC 4.0 BY-SA版权

分类专栏：控件

本文链接：https://blog.youkuaiyun.com/sinat_31057219/article/details/81222725

控件专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了CoordinatorLayout及其子组件的使用方法与注意事项，包括AppBarLayout、CollapsingToolbarLayout等组件的特性设置，帮助开发者实现Android应用中的高级UI特效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：
coordinatorLayout使用详解及注意事项,看完这篇完全可以开发5.0的高级特效了

CoordinatorLayout

public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent2 {

// public abstract class ViewGroup extends View implements ViewParent, ViewManager {

FloatingActionButton

public class FloatingActionButton extends VisibilityAwareImageButton 
		implements TintableBackgroundView, TintableImageSourceView, ExpandableTransformationWidget {...}

// public class VisibilityAwareImageButton extends ImageButton {...}

// public class ImageButton extends ImageView {...}

// public class ImageView extends View {...}

SwipeRefreshLayout

public class SwipeRefreshLayout extends ViewGroup implements NestedScrollingParent, NestedScrollingChild {

public abstract class ViewGroup extends View implements ViewParent, ViewManager {

RecyclerView

public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild2 {

// public abstract class ViewGroup extends View implements ViewParent, ViewManager {

Snackbar

public final class Snackbar extends BaseTransientBottomBar<Snackbar> {...}

// public abstract class BaseTransientBottomBar<B extends BaseTransientBottomBar<B>> {...}

AppBarLayout

public class AppBarLayout extends LinearLayout {

// public class LinearLayout extends ViewGroup {

// public abstract class ViewGroup extends View implements ViewParent, ViewManager {

AppBarLayout继承自LinearLayout，布局方向为垂直方向。

AppBarLayout响应了CoordinatorLayout的layout_behavior属性

AppBarLayout的【直接子控件】可以设置的属性:layout_scrollFlags （是否可响应滑动）：

1.scroll|exitUntilCollapsed
如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,
向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,
向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局

2.scroll|enterAlways:
只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩

3.scroll|enterAlwaysCollapsed:
向下滚动NestedScrollView到最底端时该布局才会显示出来

4.如果不设置改属性,则改布局不能滑动，滑动的时候最终位置停靠在顶部

方法一：在代码中使用这个方法

setScrollFlags(int)

方法二：在布局文件中使用自定义属性

app:layout_scrollFlags="scroll|enterAlways"

CollapsingToolbarLayout

public class CollapsingToolbarLayout extends FrameLayout {

字面意思是【折叠的toolbar】 ,它确实是起到折叠作用的,
可以把自己的自布局折叠继承自framLayout,所以它的直接子类可以设置layout_gravity来控制显示的位置,

它的【直接子布局】可以使用的属性:layout_collapseMode (折叠模式):

1.pin:
在滑动过程中,此自布局会固定在它所在的位置不动,
直到CollapsingToolbarLayout全部折叠或者全部展开

2.parallax:
视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,
不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,
当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果)

其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点

3.不设置:
跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离

方法一：在代码中使用这个方法

setCollapseMode(int collapseMode)

方法二：在布局文件中使用自定义属性

app:layout_collapseMode="pin"

Toolbar

public class Toolbar extends ViewGroup {

Toobar主要是用来替换ActionBar的，换句话说，ActionBar能做的，Toolbar都能做。

NestedScrollView

public class NestedScrollView extends FrameLayout implements NestedScrollingParent,
        NestedScrollingChild, ScrollingView {

NestedScrollView+Recyclerview 可解决 ListView+ScrollView 的嵌套滑动冲突

Behavior

AppBarLayout与可滚动的view（如：ScrollView）关联起来需要的 layout_behavior ：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

// android.support.design.widget.AppBarLayout$ScrollingViewBehavior

总结：

1、 AppbarLayout 要作为 CoordinatorLayout 的直接子View使用，CollapsingToolbarLayout 要作为AppbarLayout 的直接子View 使用，否则，上面将的特性是没有效果的。

2、AppbarLayout 的直接子view设置 layout_scrollFlags（滚动响应）

3、CollapsingToolbarLayout 的直接子view设置 layout_collapseMode （折叠模式）

4、CoordinatorLayout 的 AppbarLayout 之外的view设置 app:layout_behavior （行为）

<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="我是CollapsingToolbarLayout">

            <android.support.v7.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="我是toolbar(pin)"
                    android:textColor="#ffffff" />

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

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
	
	<-- 可滚动的view -->

	<-- 其他view -->
	
</android.support.design.widget.CoordinatorLayout>

<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

	<android.support.design.widget.AppBarLayout
		android:id="@+id/appbar"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

		<android.support.v7.widget.Toolbar
			android:id="@+id/toolbar"
			android:layout_width="match_parent"
			android:layout_height="?attr/actionBarSize"
			android:background="?attr/colorPrimary"
			app:layout_scrollFlags="scroll|enterAlways"
			app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

	<-- 可滚动的view -->

	<-- 其他view -->
	
</android.support.design.widget.CoordinatorLayout>