Android材料设计之AppBarLayout+CoordinatorLayout
Android材料设计之AppBarLayout+CoordinatorLayout
张风捷特烈
发布于 2018-12-19 16:35:52
发布于 2018-12-19 16:35:52
零、前言：
AppBarLayout+CoordinatorLayout:废话不多说，Material Design还是用图说话
1.scroll:首子控件吸顶:
app:layout_scrollFlags="scroll"2.exitUntilCollapsed:首子控件半吸顶:app:layout_scrollFlags="scroll|exitUntilCollapsed"+minHeight3.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));
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.11.28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录