Material Design里折疊工具欄
最近 在學(xué)習(xí)Material Design，今天先學(xué)習(xí)了一波CollapsingToolbarLayout瑟幕，現(xiàn)在這種類(lèi)型的工具欄是App的主流了。
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/meizhi"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/appbar_layout_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="9999999"
app:titleTextColor="@color/white"
app:navigationIcon="@mipmap/navigation_back_white"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="18dp"
android:text="@string/large_text"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
activity代碼：
final Toolbar toolbar = (Toolbar) findViewById(R.id.appbar_layout_toolbar);
StatusBarUtils.setTranslucentImageHeader(this,0,toolbar);
toolbar.setTitleTextColor(Color.TRANSPARENT);
toolbar.inflateMenu(R.menu.menu_search);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapse_layout);
collapsingToolbarLayout.setTitle("");
collapsingToolbarLayout.setCollapsedTitleTextColor(getResources().getColor(R.color.white));
collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.white));
collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//這邊來(lái)判斷滑動(dòng)距離础嫡；
if(Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()){
toolbar.setTitleTextColor(getResources().getColor(R.color.white));
toolbar.setTitle("Uustrong");
}else{
collapsingToolbarLayout.setTitle("");
}
}
});
AppBarLayout是一種支持響應(yīng)滾動(dòng)手勢(shì)的app bar布局（比如工具欄滾出或滾入屏幕）挂谍，CollapsingToolbarLayout則是專(zhuān)門(mén)用來(lái)實(shí)現(xiàn)子布局內(nèi)不同元素響應(yīng)滾動(dòng)細(xì)節(jié)的布局。
與AppBarLayout組合的滾動(dòng)布局（Recyclerview繁堡、NestedScrollView等）需要設(shè)置app:layout_behavior="@string/appbar_scrolling_view_behavior"（上面代碼中NestedScrollView控件所設(shè)置的）沈善。沒(méi)有設(shè)置的話乡数，AppBarLayout將不會(huì)響應(yīng)滾動(dòng)布局的滾動(dòng)事件。
CollapsingToolbarLayout和ScrollView一起使用會(huì)有滑動(dòng)bug闻牡，注意要使用NestedScrollView來(lái)替代ScrollView瞳脓。
AppBarLayout的子布局有5種滾動(dòng)標(biāo)識(shí)(就是上面代碼CollapsingToolbarLayout中配置的app:layout_scrollFlags屬性)：
1.scroll:將此布局和滾動(dòng)時(shí)間關(guān)聯(lián)。這個(gè)標(biāo)識(shí)要設(shè)置在其他標(biāo)識(shí)之前澈侠，沒(méi)有這個(gè)標(biāo)識(shí)則布局不會(huì)滾動(dòng)且其他標(biāo)識(shí)設(shè)置無(wú)效劫侧。
2.enterAlways:任何向下滾動(dòng)操作都會(huì)使此布局可見(jiàn)。這個(gè)標(biāo)識(shí)通常被稱(chēng)為“快速返回”模式哨啃。
3.enterAlwaysCollapsed：假設(shè)你定義了一個(gè)最小高度（minHeight）同時(shí)enterAlways也定義了烧栋，那么view將在到達(dá)這個(gè)最小高度的時(shí)候開(kāi)始顯示，并且從這個(gè)時(shí)候開(kāi)始慢慢展開(kāi)拳球，當(dāng)滾動(dòng)到頂部的時(shí)候展開(kāi)完审姓。
4.exitUntilCollapsed：當(dāng)你定義了一個(gè)minHeight，此布局將在滾動(dòng)到達(dá)這個(gè)最小高度的時(shí)候折疊祝峻。
5.snap:當(dāng)一個(gè)滾動(dòng)事件結(jié)束魔吐，如果視圖是部分可見(jiàn)的，那么它將被滾動(dòng)到收縮或展開(kāi)莱找。例如酬姆，如果視圖只有底部25%顯示，它將折疊奥溺。相反辞色，如果它的底部75%可見(jiàn)，那么它將完全展開(kāi)浮定。
CollapsingToolbarLayout可以通過(guò)app:contentScrim設(shè)置折疊時(shí)工具欄布局的顏色相满，通過(guò)app:statusBarScrim設(shè)置折疊時(shí)狀態(tài)欄的顏色。默認(rèn)contentScrim是colorPrimary的色值桦卒，statusBarScrim是colorPrimaryDark的色值立美。這個(gè)后面會(huì)用到。
CollapsingToolbarLayout的子布局有3種折疊模式（Toolbar中設(shè)置的app:layout_collapseMode）
1.off：這個(gè)是默認(rèn)屬性方灾，布局將正常顯示建蹄，沒(méi)有折疊的行為。
2.pin：CollapsingToolbarLayout折疊后迎吵，此布局將固定在頂部躲撰。
3.parallax：CollapsingToolbarLayout折疊時(shí)，此布局也會(huì)有視差折疊效果击费。
當(dāng)CollapsingToolbarLayout的子布局設(shè)置了parallax模式時(shí)拢蛋，我們還可以通過(guò)app:layout_collapseParallaxMultiplier設(shè)置視差滾動(dòng)因子，值為：0~1蔫巩。
