Android材料設計之AppBarLayout+CoordinatorLayout

摘要： 零、前言： AppBarLayout+CoordinatorLayout: 廢話不多說，Material Design還是用圖說話 1.scroll:首子控制元件吸頂: app:layout_scrollFlags="scroll" 2.exitUntil...

零、前言：

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.下滑監聽：

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));
}

後記：捷文規範

1.本文成長記錄及勘誤表

專案原始碼	日期	備註
V0.1--無	2018-11-28	ofollow,noindex">Android材料設計之AppBarLayout+CoordinatorLayout

2.更多關於我

筆名	QQ	微信	愛好
張風捷特烈	1981462002	zdl1994328	語言
我的github	我的簡書	我的掘金	個人網站

3.宣告

1----本文由張風捷特烈原創,轉載請註明

2----歡迎廣大程式設計愛好者共同交流

3----個人能力有限，如有不正之處歡迎大家批評指證，必定虛心改正

4----看到這裡，我在此感謝你的喜歡與支援