Android材料设计之AppBarLayout+Coordin
零、前言:
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.下滑监听:
监听移动分度.gifmAlTitle.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));
}
后记:捷文规范
1.本文成长记录及勘误表
项目源码 | 日期 | 备注 |
---|---|---|
V0.1--无 | 2018-11-28 | Android材料设计之AppBarLayout+CoordinatorLayout |
2.更多关于我
笔名 | 微信 | 爱好 | |
---|---|---|---|
张风捷特烈 | 1981462002 | zdl1994328 | 语言 |
我的github | 我的简书 | 我的掘金 | 个人网站 |
3.声明
1----本文由张风捷特烈原创,转载请注明
2----欢迎广大编程爱好者共同交流
3----个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正
4----看到这里,我在此感谢你的喜欢与支持
icon_wx_200.png