Android材料设计之AppBarLayout+CoordinatorLayout

零、前言:

AppBarLayout+CoordinatorLayout:废话不多说,Material Design还是用图说话

1.scroll:首子控件吸顶:app:layout_scrollFlags="scroll" 2.exitUntilCollapsed:首子控件半吸顶:app:layout_scrollFlags="scroll|exitUntilCollapsed"+minHeight 3.enterAlways:首子控件吸顶+首子控件先下滑:app:layout_scrollFlags="scroll|enterAlways" 4.enterAlwaysCollapsed:这个说起来有点麻烦,看下面动图吧...注意下滑时顶部状态 5.snap:过半/未过半,自动贴合:app:layout_scrollFlags="scroll|snap" 6.监听移动分度,动态改变一些属性、如颜色过渡、字号过渡、位移过渡

六个效果一览:

注意enterAlways是和吸顶上滑时的区别

scroll----------

enterAlways

exitUntilCollapsed

enterAlwaysCollapsed

scroll+snap

监听移动分度


一、前置准备:

1.为了不让布局看起来很乱,常用样式抽成Style
<!--测试用的TextView通用属性-->
<style name="TVTestCenter">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">100dp</item>
    <item name="android:gravity">center</item>
    <item name="android:textSize">18sp</item>
    <item name="android:text">Test-测试文字</item>
    <item name="android:background">#6096F3</item>
    <item name="android:textColor">#fff</item>
</style>
2.几个我比较喜欢的颜色
<!--妃色-->
<color name="feise">#F07054</color>
<!--月白-->
<color name="yuebai">#DDEFF3</color>
<!--牙色-->
<color name="yase">#F1E3BC</color>
<!--竹青-->
<color name="zhuqing">#8CA279</color>
<!--品橙-->
<color name="pincheng">#FF7F47</color>
<!--捷特蓝-->
<color name="jietelan">#92DDEA</color>

1.首子控件吸顶:scroll

目测:只有第一个控件能吸顶+app:layout_scrollFlags="scroll" 目测:需要2个及以上子控件才能吸顶 目测:RecyclerVieW加app:layout_behavior="@string/appbar_scrolling_view_behavior"可居AppBarLayout下

<?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:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            style="@style/TVTestCenter"
            android:text="Flag"
            android:background="@color/feise"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
        <TextView
            style="@style/TVTestCenter"
            android:text="没有Flag"
            android:background="@color/zhuqing"/>

        <TextView
            style="@style/TVTestCenter"
            android:text="没有Flag"
            android:background="@color/yase"/>
    </android.support.design.widget.AppBarLayout>

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

2.首子控件半吸顶:scroll+enterAlways

AppBarLayout首控件修改:app:layout_scrollFlags="scroll|exitUntilCollapsed"+minHeight 其他不变,其中minHeight决定保留高度

<TextView
    style="@style/TVTestCenter"
    android:background="@color/feise"
    android:minHeight="50dp"
    android:text="Flag"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
3.首子控件吸顶+首子控件先下滑:app:layout_scrollFlags="scroll|enterAlways"
<TextView
    style="@style/TVTestCenter"
    android:background="@color/feise"
    android:text="Flag"
    app:layout_scrollFlags="scroll|enterAlways"/>

4.scroll+enterAlways+enterAlwaysCollapsed
 <TextView
     style="@style/TVTestCenter"
     android:background="@color/feise"
     android:text="Flag"
     android:minHeight="50dp"
     app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>

5.自动贴合:
<TextView
    style="@style/TVTestCenter"
    android:background="@color/feise"
    android:text="Flag"
    android:minHeight="50dp"
    app:layout_scrollFlags="scroll|snap"/>

6.下滑监听:

监听移动分度.gif

mAlTitle.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
    //下降分度
    float fraction = -verticalOffset * 1.f / (mIdTvMoving.getHeight() - mIdTvMoving.getMinHeight());
    int color = ColUtils.evaluateColor(fraction, 0xffF07054, 0xff3F51B5);
    mIdTvMoving.setBackgroundColor(color);//颜色过渡
    mIdTvMoving.setTextSize(40 * (1 - fraction));//字号缩小
    mIdTvMoving.setTranslationX(-fraction * mIdTvMoving.getWidth());//X平移
});

给一个颜色过渡变化的函数

/**
 * 颜色变换
 *
 * @param fraction 分度值
 * @param startValue 开始色
 * @param endValue 结束色
 * @return 分度值处颜色
 */
public static int evaluateColor(float fraction, int startValue,
                                   int endValue) {
    int startA = (startValue >> 24) & 0xff;
    int startR = (startValue >> 16) & 0xff;
    int startG = (startValue >> 8) & 0xff;
    int startB = startValue & 0xff;
    int endA = (endValue >> 24) & 0xff;
    int endR = (endValue >> 16) & 0xff;
    int endG = (endValue >> 8) & 0xff;
    int endB = endValue & 0xff;
    return (startA + (int) (fraction * (endA - startA)) << 24)
            | (startR + (int) (fraction * (endR - startR)) << 16)
            | (startG + (int) (fraction * (endG - startG)) << 8)
            | startB + (int) (fraction * (endB - startB));
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏苦逼的码农

一些常用的算法技巧总结

数组的下标是一个隐含的很有用的数组,特别是在统计一些数字,或者判断一些整型数是否出现过的时候。例如,给你一串字母,让你判断这些字母出现的次数时,我们就可以把这些...

22130
来自专栏大数据文摘

迷人又诡异的辛普森悖论:同一个数据集是如何证明两个完全相反的观点的?

在辛普森悖论中,餐馆可以同时比竞争对手更好或更差,锻炼可以降低和增加疾病的风险,同样的数据集能够用于证明两个完全相反的论点。

16030
来自专栏数据结构笔记

python基础类型(一):字符串和列表

注意到最后三个的单双引号是嵌套使用的,但是最后一个的使用方法是错误的,因为当我们混合使用两种引号时必须有一种用来划分字符串的边界,即在两边的引号不能出现在字符串...

14020
来自专栏chenssy

多线程:为什么在while循环中加入System.out.println,线程可以停止

这个我们都知道,由于 stopReqested 的更新值在主内存中,而线程栈中的值不是最新的,所以会一直循环,线程并不能停止。加上 Volatile 关键字后,...

21740
来自专栏Python专栏

200行代码,一行行教你自制微信机器人

1) 用一个windows客户端工具运营公众号,真的很局限。虽然工具的功能很强大,能自动添加好友,自动拉好友入群,关键字回复等等,但是有一个绕不开的点,它是一款...

62520
来自专栏编程坑太多

『高级篇』docker之Mesos集群架构图(23)

12140
来自专栏我是攻城师

理解BitMap算法的原理

位图:一种常用的数据结构,代表了有限域中的稠集(dense set),每一个元素至少出现一次,没有其他的数据和元素相关联。在索引,数据压缩,海量数据处理等方面有...

25530
来自专栏机器之心

Diss所有深度生成模型,DeepMind说它们真的不知道到底不知道什么

深度学习在应用层面获得了巨大成功,这些实际应用一般都希望利用判别模型构建条件分布 p(y|x),其中 y 是标签、x 是特征。但这些判别模型无法处理从其他分布中...

11710
来自专栏smy

一张图解释负载均衡

首先当大量用户访问时候,先请求到nignx服务器,因为nignx对于高并发支持较好,所以由nignx服务器将访问需求分配给不同的apache服务器,apache...

21330
来自专栏GreenLeaves

TFS2018环境搭建一硬件要求

TFS可以安装在Windows Server和Windows PC操作系统中,但是TFS2018和2018只支持64位操作系统中,早期的版本没有操作系统的位数限...

41130

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励