使用CoordinatorLayout打造各种炫酷的效果

最新推荐文章于 2024-08-15 13:29:08 发布
最新推荐文章于 2024-08-15 13:29:08 发布
阅读量559 收藏
点赞数
分类专栏： CoordinatorLayout

CoordinatorLayout简介

CoordinatorLayout是在 Google IO/15 大会发布的，遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果

CoordinatorLayout简介通常用来 干什么

Google官方地址

CoordinatorLayout is intended for two primary use cases:

As a top-level application decor or chrome layout

As a container for a specific interaction with one or more child views

简单来说就是 
- 作为最上层的View 
- 作为一个 容器与一个或者多个子View进行交互

下面我们一起先来看一下我们实现的效果图

动态图

结合ToolBar

结合ViewPager

ViewPager

结合ViewPager的视觉特差

AppBarLayout

它是继承与LinearLayout的，默认 的 方向 是Vertical

类型说明
int SCROLL_FLAG_ENTER_ALWAYSWhen entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling.
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSEDAn additional flag for ‘enterAlways’ which modifies the returning view to only initially scroll back to it’s collapsed height.
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSEDWhen exiting (scrolling off screen) the view will be scrolled until it is ‘collapsed’.
int SCROLL_FLAG_SCROLLThe view will be scroll in direct relation to scroll events.
int SCROLL_FLAG_SNAPUpon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it’s closest edge.
类型说明
int SCROLL_FLAG_ENTER_ALWAYSW((entering) / (scrolling on screen))下拉的时候，这个View也会跟着滑出。
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED另一种enterAlways，但是只显示折叠后的高度。
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSED((exiting) / (scrolling off screen))上拉的时候，这个View会跟着滑动直到折叠。
int SCROLL_FLAG_SCROLL这个View将会响应Scroll事件
int SCROLL_FLAG_SNAP在Scroll滑动事件结束以前 ，如果这个View部分可见，那么这个View会停在最接近当前View的位置

我们可以通过两种 方法设置这个Flag

  • 方法一
 setScrollFlags(int)
  • 方法二
 app:layout_scrollFlags="scroll|enterAlways"

注意事项

AppBarLayout必须作为CoordinatorLayout的直接子View，否则它的大部分功能将不会生效，如layout_scrollFlags等。

首先我们先来看一下我们 效果图一是怎样实现的

代码

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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: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>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

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

思路 分析

从图中我们可以知道 layout_scrollFlags=”scroll|enterAlways， 
前面已经说到layout_scrollFlags=scroll的时候，这个View会 跟着 滚动 事件响应， 
layout_scrollFlags=“enterAlways”的时候 这个View会响应下拉事件 
所以呈现出来的结果应该是我们在上拉的时候toolBar 会隐藏，下拉的时候toolBar会出来

那如果当我们的toolBar 等于 app:layout_scrollFlags=”scroll|snap”的时候 ， 
layout_scrollFlags=scroll的时候，这个View会 跟着 滚动 事件响应， 
layout_scrollFlags=“snap”的时候 在Scroll滑动事件结束以前 ，如果这个View部分可见，那么这个View会停在最接近当前View的位置。 
综上呈现的效果如下，代码见ToolBarSampleSnar的布局文件

结合ViewPager

布局代码如下

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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">


        <ImageView android:layout_width="match_parent"
                   android:layout_height="200dp"
                   android:background="?attr/colorPrimary"
                   android:scaleType="fitXY"
                   android:src="@drawable/tangyan"
                   app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>

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


    <android.support.v4.view.ViewPager

        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

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

思路分析

其实相对于前 一个例子，只是把 摆放RecyclerView 的位置替换成ViewPager而已，为了有页面导航器的效果，再使用 TabLayout而已，而TabLayout 在我们滑动的时候最终会停靠在 最顶部，是因为我们没有设置其layout_scrollFlags，即TabLayout是静态的

运行以后，即可看到以下的结果

ViewPager

下面我们一起来看一下 TabLayout是怎样结合ViewPager直线 导航器的效果的

代码注释 里面已经解释地很清楚了 ，这里我就不解释了

public class ViewPagerSample extends AppCompatActivity {

    ViewPager mViewPager;
    List<Fragment> mFragments;

    String[] mTitles = new String[]{
            "主页", "微博", "相册"
    };
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_third);
        // 第一步，初始化ViewPager和TabLayout
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);
        setupViewPager();
    }

    private void setupViewPager() {

        mFragments = new ArrayList<>();
        for (int i = 0; i < mTitles.length; i++) {
            ListFragment listFragment = ListFragment.newInstance(mTitles[i]);
            mFragments.add(listFragment);
        }
        // 第二步：为ViewPager设置适配器
        BaseFragmentAdapter adapter =
                new BaseFragmentAdapter(getSupportFragmentManager(), mFragments, mTitles);

        mViewPager.setAdapter(adapter);
        //  第三步：将ViewPager与TableLayout 绑定在一起
        mTabLayout.setupWithViewPager(mViewPager);
    }


}

如果我们想更改Indicator的相关样式，我们可以在布局文件里面使用

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="?attr/colorPrimary"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabIndicatorHeight="4dp"
    app:tabSelectedTextColor="#000"
    app:tabTextColor="#fff"/>

如果你不想使用Google 帮我们 封装好的控件的话，你也可以自己自定义一个控件，你可以参考我的这一篇博客仿网易新闻的顶部导航指示器

在看例子结合ViewPager的视觉特差之前 ，我们需要先了解CollapsingToolbarLayout这个控件

CollapsingToolbarLayout

CollapsingToolbarLayout继承与FrameLayout，官网地址,请自备梯子。

简单来说 ,CollapsingToolbarLayout是工具栏的包装器,它通常作为AppBarLayout的孩子。主要实现以下功能 
- Collapsing title（可以折叠 的 标题 ） 
- Content scrim（内容装饰），当我们滑动的位置 到达一定阀值的时候，内容 装饰将会被显示或者隐藏 
- Status bar scrim（状态栏布） 
- Parallax scrolling children，滑动的时候孩子呈现视觉特差效果 
- Pinned position children，固定位置的 孩子

下面我们一起来看一下几个常量

常量解释说明
int COLLAPSE_MODE_OFFThe view will act as normal with no collapsing behavior.(这个 View将会 呈现正常的结果，不会表现出折叠效果）
int COLLAPSE_MODE_PARALLAXThe view will scroll in a parallax fashion. See setParallaxMultiplier(float) to change the multiplier used.（在滑动的时候这个View 会呈现 出 视觉特差效果 ）
int COLLAPSE_MODE_PINThe view will pin in place until it reaches the bottom of the CollapsingToolbarLayout.（当这个View到达 CollapsingToolbarLayout的底部的时候，这个View 将会被放置，即代替整个CollapsingToolbarLayout）

我们有两种方法可以设置这个常量,

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

setCollapseMode(int collapseMode)

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

app:layout_collapseMode="pin"

到此 ，CollapsingToolbarLayout的一些重要属性已经讲解完毕，下面我们一起来看一下我们是怎样结合ViewPager实现视差效果的

结合ViewPager的视觉特差

布局代码

<?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:background="@android:color/background_light"
    android:fitsSystemWindows="true"
>

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/tangyan"
                app:layout_collapseMode="parallax"
            />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

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

效果图如下

思路解析

  • 结构图如图片所示，先说明CollapsingToolbarLayout的变化

    CollapsingToolbarLayout里面 包含ImageView 和ToolBar，ImageView的app:layout_collapseMode=”parallax”，表示视差效果，ToolBar的 app:layout_collapseMode=”pin”，当这个TooBar到达 CollapsingToolbarLayout的底部的时候，会代替整个CollapsingToolbarLayout显示

  • 接着说明TabLayout的变化

    从前面的描述我们已经知道当 没有指定app:layout_scrollFlags的时候，最终TabLayout会静止，不会随着滑动的 时候消失不见

拓展

如果我们仅仅 改变CollapsingToolbarLayout的app:layout_scrollFlags=”scroll|exitUntilCollapsed|snap”的时候，其它代码不变，运行以后，我们将可以看到如下效果图

总结

这篇博客主要讲解了CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout的一些相关属性。 
- 对于AppBarLayout，我们主要 讲解了这个属性app:layout_scrollFlags，设置不同 的属性我们可以在滚动的时候显示不同 的效果 
- 对于CollapsingToolbarLayout，我们主要讲解了app:layout_collapseMode这个属性，设置不同的值，我们可以让其子View呈现不同的 炫酷效果，如parallax和pin等

CoordinatorLayout的相关用法还有很多，有兴趣 了解的请自行阅读: 官方文档地址

Luckie stone
关注
专栏目录
CoordinatorLayout使用详解: 打造折叠悬浮效果
weixin_43901866的博客
03-20 583
1.简介 CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果。 作为最上层的View 作为一个 容器与一个或者多个子View进行交互 2.AppBarLayout 它是继承与LinearLayout的，默认 的 方向 是Verti...
仿it快播顶部button点击背景滑动切换的效果
04-10
源码 博文链接：https://793101503-qq-com.iteye.com/blog/1669165
CoordinatorLayoutExample:CoordinatorLayout 打造炫酷效果的例子
04-28
简介 这个库，主要自定义 CoordinatorLayout behavior，来实现一些酷炫的效果。比如 仿新浪微博首页 仿 QQ 浏览器 仿美团商家首页 下面我们一起先来看一下我们实现的效果图 仿 QQ 浏览器 仿美图商家详情页面的： 仿新浪微博效果图： 相关博客 微信公众号 程序员徐公(stormjun94)，希望让你看到程序猿不同的一面，除了分享 Coding，，还有职场心得，面试经验，学习心得，人生感悟等等。希望通过该公众号，让大家看到，我们不只会敲代码，我们还会。。。。。。
发现新大陆啦 CoordinatorLayout AppBarLayout CollapsingToolBarLayout
xc2430939709的专栏
12-06 398
使用CoordinatorLayout打造各种炫酷的效果 使用CoordinatorLayout打造各种炫酷的效果 自定义Behavior —— 仿知乎，FloatActionButton隐藏与展示 CoordinatorLayout简介 CoordinatorLayout是在 Google IO/15 大会发布的，遵循Material 风格，包含在 support Lib
Android CoordinatorLayout使用
最新发布
QG
08-15 464
协调者布局
使用CoordinatorLayout实现炫酷的效果
一只特立独行的猪
12-20 2万+
在android5.0的时候添加CoordinatorLayout、AppBarLayout、Toolbar、CollapsingToolbarLayout等等一系列的新控件，他们组合在一起可以实现很多非常nice的效果，目前国内很多app都使用了这些效果，下面我们来逐一介绍这些控件。 CoordinatorLayout 又名协调者布局，它是support.design包中的控件，所以使用的时候要...
使用CoordinatorLayout实现炫酷的效果【折叠控件】
fengyeNom1的博客
06-08 684
详细介绍，就不转载了，直接看吧
Android CoordinatorLayout打造酷炫的顶部栏
07-08
`CoordinatorLayout`是Android设计支持库中的一个自定义布局，它提供了高度的定制能力，使得我们可以打造出各种复杂的布局效果，特别是酷炫的顶部栏。在本文中，我们将深入探讨如何利用`CoordinatorLayout`、`...
玩转AppBarLayout，更酷炫的顶部栏
热门推荐
huachao1001的专栏
06-02 3万+
上一篇文章《CoordinateLayout的使用如此简单 》对CoordinateLayout的使用做了讲解，今天我们再讲解常常与其一起使用的几个View：AppBarLayout、CollapsingToolbarLayout以及Toolbar。一下子出现3个陌生的View，是不是觉得很慌张~，很多人都写了这几个布局的使用，但是他们却没有有针对性的单独讲解每个View的作用以及如何使用，我看的很多文章都是一上来就
CoordinatorLayout效果大集合
wang_yong_hui_1234的博客
05-30 1516
状态栏
使用CoordinatorLayout打造各种炫酷的效果 安卓
04-06
作者gdutxiaoxu，源码CoordinatorLayoutExample.git，使用CoordinatorLayout打造各种炫酷的效果
CoordinatorLayout的常见用法4种
09-06
CoordinatorLayout的常见用法4种： 1.CoordinatorLayout+Snackbar+FAB 2.CoordinatorLayout+AppBarLayout+Toolbar 3.CoordinatorLayout+AppBarLayout+TabLayout 4.CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar+TabLayout
几种ui效果/CoordinatorLayout
07-10
CoordinatorLayout AppBarLayout CollapsingToolbarLayout 等工具使用
Android 中 CoordinatorLayout + AppBarLayout 实现滑动头部悬停效果（页面附带TabLayout + ViewPager + RecyclerView结构）
01-03
序 昨晚经历了美股本月的第三次熔断 ，有史以来的第四次熔断 。 突 。 突突 。。突突突 。。。 很尴尬 ，找不到做 gif 的东西 。怎么办呢 。（找了好久 ，在手机上下载了一个  GIF 动图制作） AppbarLayout 回顾 我记得 16 、17年的时候这个效果在很多 APP 上都有出现 。之前写过demo ，然后一直也没机会在项目中使用 。 实现类似的效果 ，主要是使用三个控件相结合 CoordinatorLayout 、AppbarLayout 、NestedScrollView 。 AppbarLayout 是一种支持响应滚动手势的 app bar 布局 , Collapsi
CoordinatorLayout 滑动置顶及背景渐变
09-26
滑动置顶，title颜色渐变，最近项目有这么个要求，百度了好多，感觉不符合公司项目的需求，所以就开始了搬运的模式，还好最后弄出来了这个效果，不过感觉少了沉浸式状态栏，哪位大神要是有沉浸式状态栏的可以发我哈，QQ 528804904
CoordinatorLayout 使用酷炫效果
qq_34639226的博客
02-15 368
效果和布局里的搭配是固定的，能修改时内容部分。
CoordinatorLayout深度解析：打造流畅动画效果
在Android开发中，CoordinatorLayout是一个非常重要的布局组件，它是Android设计支持库的一部分，用于实现高级交互和动画效果，特别是与AppBarLayout和CollapsingToolbarLayout配合使用时，可以创建出类似Material ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值