CoordinatorLayout效果大集合

已于 2023-04-25 09:51:01 修改
阅读量1.3k 收藏 3
点赞数 1
分类专栏： UI系列 文章标签： 架构 android ui
于 2020-05-30 14:13:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_yong_hui_1234/article/details/106388197
版权

文章目录

效果一

在这里插入图片描述

<androidx.coordinatorlayout.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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/timg" />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@mipmap/back_icon"
                app:title="歌曲"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="法定辅导辅导辅导辅导法定辅导辅"
            android:textSize="40sp" />
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

效果二

在这里插入图片描述

<androidx.coordinatorlayout.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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        app:layout_behavior=".AppbarZoomBehavior"
        android:layout_height="200dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/imageview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:minHeight="100dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@mipmap/timg" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@mipmap/back_icon"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:title="歌曲" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="法定辅导辅导辅导辅导法定"
            android:textSize="40sp" />
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

一下是关键代码，重写AppBarLayout.Behavior，在AppBarLayout中指定layout_behavior。

public class AppbarZoomBehavior extends AppBarLayout.Behavior {
    private ImageView mImageView;
    private int mAppbarHeight;
    private int mImageViewHeight;
    private static final float MAX_ZOOM_HEIGHT = 500;
    private float mTotalDy;
    private float mScaleValue;
    private int mLastBottom;
    private boolean isAnimate;


    public AppbarZoomBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);

    }

    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, AppBarLayout abl, int layoutDirection) {
        boolean handled = super.onLayoutChild(parent, abl, layoutDirection);
        init(abl);
        return handled;
    }

    private void init(AppBarLayout abl) {
        abl.setClipChildren(false);
        mAppbarHeight = abl.getHeight();
        mImageView = (ImageView) abl.findViewById(R.id.imageview);
        if (mImageView != null) {
            mImageViewHeight = mImageView.getHeight();
        }
    }


    @Override
    public boolean onStartNestedScroll(CoordinatorLayout parent, AppBarLayout child, View directTargetChild, View target, int nestedScrollAxes, int type) {
        isAnimate = true;
        return true;
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed, int type) {
        if (mImageView != null && child.getBottom() >= mAppbarHeight && dy < 0 && type == ViewCompat.TYPE_TOUCH) {
            zoomHeaderImageView(child, dy);
        } else {
            if (mImageView != null && child.getBottom() > mAppbarHeight && dy > 0 && type == ViewCompat.TYPE_TOUCH) {
                consumed[1] = dy;
                zoomHeaderImageView(child, dy);
            } else {
                if (valueAnimator == null || !valueAnimator.isRunning()) {
                    super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
                }

            }
        }

    }


    private void zoomHeaderImageView(AppBarLayout abl, int dy) {
        mTotalDy += -dy;
        mTotalDy = Math.min(mTotalDy, MAX_ZOOM_HEIGHT);
        mScaleValue = Math.max(1f, 1f + mTotalDy / MAX_ZOOM_HEIGHT);
        ViewCompat.setScaleX(mImageView, mScaleValue);
        ViewCompat.setScaleY(mImageView, mScaleValue);
        mLastBottom = mAppbarHeight + (int) (mImageViewHeight / 2 * (mScaleValue - 1));
        abl.setBottom(mLastBottom);
    }

    @Override
    public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, float velocityX, float velocityY) {
        if (velocityY > 100) {
            isAnimate = false;
        }
        return super.onNestedPreFling(coordinatorLayout, child, target, velocityX, velocityY);
    }


    @Override
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout abl, View target, int type) {
        recovery(abl);
        super.onStopNestedScroll(coordinatorLayout, abl, target, type);
    }

    ValueAnimator valueAnimator;

    private void recovery(final AppBarLayout abl) {
        if (mTotalDy > 0) {
            mTotalDy = 0;
            if (isAnimate) {
                valueAnimator = ValueAnimator.ofFloat(mScaleValue, 1f).setDuration(220);
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (float) animation.getAnimatedValue();
                        ViewCompat.setScaleX(mImageView, value);
                        ViewCompat.setScaleY(mImageView, value);
                        abl.setBottom((int) (mLastBottom - (mLastBottom - mAppbarHeight) * animation.getAnimatedFraction()));
                    }
                });
                valueAnimator.start();
            } else {
                ViewCompat.setScaleX(mImageView, 1f);
                ViewCompat.setScaleY(mImageView, 1f);
                abl.setBottom(mAppbarHeight);
            }
        }
    }
}

效果三

在这里插入图片描述

<androidx.coordinatorlayout.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:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="?attr/colorPrimary">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/timg" />

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@mipmap/back_icon"
                app:title="测试" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="法定辅导辅导辅导辅导法"
            android:textSize="40sp" />
    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

属性讲解

1，fitsSystemWindows 更多介绍《来源：郭神》

首先需要了解一下主题配置，我们通常在style中设置的主题有什么用呢，如下代码：

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
  </style>

在这里插入图片描述
假如我们要实现如下效果，布局中的一张图片填充状态栏。首先需要将statusBarColor设置成透明，然后在使用fitsSystemWindows属性。
在这里插入图片描述
首先需要设置在values-v21中设置主题

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
</style>

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:scaleType="centerCrop"
        android:background="@mipmap/timg"
        android:fitsSystemWindows="true" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

图片填充到状态栏 android:fitsSystemWindows="true"起到了关键作用。也就是说这个属性为true状态栏会填充当前view内容。

如下效果，想让状态栏同步AppBarLayout的颜色。

在这里插入图片描述

<androidx.coordinatorlayout.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:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:fitsSystemWindows="true">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Light"
            app:navigationIcon="@mipmap/back_icon"
            app:title="测试" />
    </com.google.android.material.appbar.AppBarLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

这里的AppBarLayout中设置了android:fitsSystemWindows=“true”，因此状态栏就一致了。

2，view设置主题
如下给Toolbar设置主题，AppCompat.Light主题是白底黑字，theme是给当前view以及子view设置主题，popupTheme是给弹出菜单设置主题。

 android:theme="@style/ThemeOverlay.AppCompat.Light"
 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

3， CollapsingToolbarLayout中属性
在上文 “效果三” 中，contentScrim是当页面往上滑动CollapsingToolbarLayout折叠后背景颜色，如果不设置，显示图片的一部分。statusBarScrim自然就是往上滑动后显示状态栏的颜色了。

 app:contentScrim="?attr/colorPrimary"
 app:statusBarScrim="?attr/colorPrimary"

4，Toolbar中的属性
在上文 “效果三” 中，Toolbar中的layout_collapseMode属性。
pin ： 当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。
parallax：在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，
实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

  app:layout_collapseMode="pin"

看个效果，就理解layout_collapseMode和layout_collapseParallaxMultiplier配合使用了。还是 “效果三” 中的代码，把AppBarLayout宽度调成300dp便于观看，然后在ImageView中添加如下代码

  app:layout_collapseMode="parallax"
  app:layout_collapseParallaxMultiplier="0.8"

注意看背景图片，这个效果和 “效果三” 中不同之处就是这个图片有伸缩的效果，而不是直接滑上去。
在这里插入图片描述
5，anchor属性

关键词：layout_anchor和layout_anchorGravity。

简单说明：child B通过layout_anchor 设置child A为anchor，再通过layout_anchorGravity来根据需要设置属性，这样B就可以A的位移相应的位移了。

这就是 “效果三” 中FloatingActionButton的效果。

Behavior原理

https://mp.weixin.qq.com/s/04OFp3W6Ko2klg_3fF1q1g

朽木成才
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 5.0新控件 CoordinatorLayout | 协调布局 介绍及使用详情
郭勇的博客
05-02 2269
Android Material Design 风格之 CoordinatorLayout | 协调布局 介绍及使用详情extends ViewGroupimplements NestedScrollingParent CoordinatorLayout is a super-powered FrameLayout CoordinatorLayout is intended for t
Android CoordinatorLayout+RecyclerView简介
张雨的博客
03-20 5500
布局中比较重要的参数 CollapsingToolbarLayout中 <!--防止最后recyclerview一条数据显示不全 android:minHeight="?actionBarSize"--> <!--设置收缩后的颜色app:contentScrim="@color/amber_600"--> parallax 视差效果，和视差系...
android 仿QQ音乐歌单效果
坚持，努力
02-17 6117
最新的项目里面，有一个需求比较好玩，就是要仿造下QQ音乐里面的歌单上下切换效果，如下 先做一个类似的效果，测试效果如下：
CoordinatorLayout实现TabLayout吸顶效果
最新发布
金戈鐡馬
04-07 1079
吸顶是目前市场上很多应用都会采用的方式，例如京东、闲鱼、美团、美团外卖、饿了么、链家、贝壳找房等首页都有，如果细心的话，其他主流App也都能找到这种效果的实现。以上就是实现吸顶效果的所有代码了，急着用的可以直接拿过去交差了，不急的可以接着往下看，我们不仅要知其然，还要知其所以然。，是因为它的折叠效果，用它来做吸顶不过是意外发现。，然后去处理滑动事件，但是实现出来都不是很理想。的布局嵌套特别复杂，所以不是很想用，不过做出来的效果确实很好。，然后下面分了两个子布局，分别是。属性会将图片以折叠的效果隐藏，
CoordinatorLayout实现二次悬浮和多悬浮
你全家都是博客
12-11 328
CoordinatorLayout实现二次悬浮和多悬浮。
Android M新控件之AppBarLayout，NavigationView，CoordinatorLayout，CollapsingToolbarLayout的使用
热门推荐
废墟的树的专栏
06-17 5万+
【转载请注明出处：http://blog.csdn.net/feiduclear_up/article/details/46514791 CSDN 废墟的树】上一篇博客我们学习了Android Design Support Library库中的 是个简单的组件，不了解的童鞋可以参考之前的博客 Android M新控件之FloatingActionButton，TextInputLayout，Sna
CoordinatorLayout
02-27
CoordinatorLayout是Android开发中的一个布局组件，它是Android Design Support Library的一部分，主要用来实现Material Design的交互效果。这个布局提供了一种高级的机制来协调子视图的行为，特别适合用来构建复杂...
android 网上集合的9种不同经典效果
06-09
标题提到的"android 网上集合的9种不同经典效果"涵盖了多种常见的、创新的UI设计，旨在为用户带来更加生动和吸引人的交互体验。下面我们将逐一探讨这些经典效果的实现原理和应用。 1. **卷曲翻页效果**：这种效果...
v4,v7,design 控件特性大集合
10-26
CoordinatorLayout，一个高级布局容器，支持视图之间的协调行为，如Snackbar和AppBarLayout的联动效果。 4. 使用Support Library的优点 - 向后兼容：支持低版本Android系统，扩大应用的用户群体。 - 新功能：...
Android例子源码健康养生类应用效果集合.zip
07-10
在本压缩包“Android例子源码健康养生类应用效果集合.zip”中，包含了一系列与Android应用开发相关的示例代码，这些代码着重展示了如何构建一个集成了多种功能的健康养生类应用。以下是根据标题、描述以及标签所提炼...
使用CoordinatorLayout协调者布局实现仿京东发现页面效果
03-28
使用CoordinatorLayout协调者布局实现仿京东发现页面效果，有兴趣的可以深入研究下，相关博客https://blog.csdn.net/hq942845204/article/details/88844272
Android 使用CoordinatorLayout实现滚动标题栏效果的实例
01-04
在Material Design里，CoordinatorLayout通常用来作为顶层视图，来协调处理各个子View之间的动作，从而实现各种动画效果，如Snackbar与FloatingActionButton的配合显示效果，就是以CoordinatorLayout作为根布局来实现的 CoordinatorLayout提供Behaviors接口，子View通过实现Behaviors接口来协调和其它View之间的显示效果，可以这么理解： CoordinatorLayout让其子View之间互相知道彼此的存在，任意一个子View的状态变化会通过Behaviors通知其它子View，Coordina
Android CoordinatorLayout使用 标题由图片变纯色，附源码及apk
07-06
Android CoordinatorLayout使用 标题由图片变纯色，附源码及apk，博客地址：http://blog.csdn.net/fan7983377/article/details/51839583
ViewPager的弹性缩回效果
04-16
另一种方法是使用`SpringBehavior`，这是Android Design Support Library中提供的一种行为，可以为 CoordinatorLayout 添加弹簧效果。创建一个自定义的`Behavior`，并将其关联到ViewPager，这样当用户滑动到边缘时，...
android toolbar 底部,android - AppBarLayout.ScrollingViewBehavior-屏幕底部视图底部 - 堆栈内存溢出...
weixin_39853863的博客
05-29 695
当使用AppBarLayout与标准ScrollingViewBehavior ，该AppBarLayout的兄弟姐妹会被默认的CoordinatorLayout和兄弟姐妹的底部的高度将由AppBarLayout的高度屏幕之外。在我的用例中， NestedScrollView只是允许工具栏折叠的一种工具，同时在可折叠工具栏下方显示另一个可滚动视图(在这种情况下为碎片)。 片段是包含固定视图的片段...
CoordinatorLayout 完全解析
u012123938的专栏
05-13 2521
原文：https://www.jianshu.com/p/4a77ae4cd82f一、CoordinatorLayout 的作用CoordinatorLayout 作为一个 “super-powered FrameLayout”，主要有以下两个作用：作为顶层布局；作为协调子 View 之间交互的容器。使用 CoordinatorLayout 需要在 build.gradle 加入：compile ...
使用CoordinatorLayout打造各种炫酷的效果
az44yao的专栏
03-23 184
https://blog.csdn.net/gdutxiaoxu/article/details/52858598 使用CoordinatorLayout打造各种炫酷的效果 自定义Behavior —— 仿知乎，FloatActionButton隐藏与展示 NestedScrolling 机制深入解析 一步步带你读懂 CoordinatorLayout 源码 自定义 Behavior -仿新浪微博发现页的实现 ViewPager，ScrollView 嵌套ViewPager滑动冲突解决 自定义
CoordinatorLayout实现view的联动效果
qq_27942511的博客
03-03 1032
CoordinatorLayout是Material Design包中的用来协调子View的位置,实现联动的动画效果,实现了许多滚动效果 首先添加依赖 compile 'com.android.support:design:22.2.0' compile 'com.android.support:recyclerview-v7:22.2.0' compile 'com.and
使用CoordinatorLayout实现滚动标题栏效果
moyuxueyi的专栏
05-15 468
CoordinatorLayout提供Behaviors接口，子View通过实现Behaviors接口来协调和其它View之间的显示效果，可以这么理解： CoordinatorLayout让其子View之间互相知道彼此的存在，任意一个子View的状态变化会通过Behaviors通知其它子View，CoordinatorLayout就像一个桥梁，连接不同的View，并使用Behavior处理各个子View之间的通信 效果一： xml： <androidx.coordinatorlayout.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值