在Android5.0之後，Android給我們提供了非常豐富關于UI設計的材料設計庫，其中就有非常實用的折疊式布局
常見問題：
1. ToolBar中自定義的title不能居中
設定CollapsingToolbarLayout的app:titleEnabled="false"即可
背景圖檔沒有完全沉浸在狀态欄裡邊
設定即可
常見模闆布局1：
效果圖：
image
image.gif
布局代碼：
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="卡片1"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/news_content" />
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_discuss"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"/>
image.gif
常見模闆布局2：
效果圖：
image
image.gif
布局代碼：
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_done" />
image.gif
1.CoordinatorLayout
根布局必須使用CoordinatorLayout，即協調式布局，用來協調AppBarLayout和Scrollview之間的滾動關系
2.AppBarLayout
AppBarLayout必須依賴父控件CoordinatorLayout，AppBarLayout為ChildrenView提供了一個`app:layout_scrollFlags屬性來設定ScrollView滾動時Childview的滾動模式`，ScrollFlags共有五種常量值，對應的值為：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed；
2.1 app:layout_scrollFlags="scroll" :往下滾ScrollView優先滾動
`
image
image.gif
`
2.2 app:layout_scrollFlags="scroll|enterAlways" :往下滾ChildView優先滾動
`
image
image.gif
`
2.3 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"：往下滾動ChildView優先滾動，且滾動到指定的最小高度，然後開始滾動ScrollView，直到ScrollView滾動完畢再開始滾動ChildView
`
image
image.gif
`
2.4 app:layout_scrollFlags="scroll|exitUntilCollapsed"：往上滾動ChildView優先滾動，且滾動到指定的最小高度，然後開始滾動ScrollView
`
image
image.gif
`
2.5 app:layout_scrollFlags="scroll|snap"：往下滾ScrollView優先滾動，然後ChildView開始滾動，但是ChildView必須滾動到一定的比例才能繼續往下滾，否則ChildView滾動沒有到達一定比例，手松了之後就會回彈回去，類似ViewPager左滑右滑的那種效果
`
image
image.gif
`
3.CollapsingToolbarLayout
CollapsingToolbarLayout必須依賴父控件AppBarLayout，其中非常重要的幾個屬性如下
3.1 title
标題，布局展開時放大顯示在圖檔底部，布局折疊時縮小顯示在Toolbar左側。注意，沒有設定這個屬性時，預設使用Toolbar的标題；
3.2 statusBarScrim
頂部視圖折疊狀态下，狀态欄的遮罩色。通常這樣設定：app:statusBarScrim="?attr/colorPrimaryDark"，即style樣式中定義的沉浸式狀态欄顔色。這個屬性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);(支援API19及以上版本，位于setContentView語句前面)一起使用，使頂部視圖展開時圖檔能夠延伸到狀态欄位置顯示，如效果圖中所示；
3.3 contentScrim
内容遮罩，上下滾動時圖檔上面顯示和隐藏的遮罩色，Toolbar位置的的背景色；通常這樣設定：app:contentScrim="?attr/colorPrimary"，即顯示為Toolbar顔色，應用的主題色；
3.4 layout_collapseMode：ChildView使用
折疊模式，設定其他控件滾動時自身的互動行為，有兩種取值：parallax，折疊視差效果，比如上述效果圖中的圖檔；pin，固定别針效果，比如上圖中的Toolbar；
3.5 layout_collapseParallaxMultiplier：ChildView使用
不折疊視差系數，配合parallax模式使用，取值有點類似alpha(不透明度)，在0.0 ～ 1.0之間，預設值為0.5。當設定為1.0，滾動清單時圖檔不會折疊移動；
4.Toolbar
4.1Toolbar初始設定
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbar.setNavigationOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
onBackPressed();
}
});
image.gif
4.2 Activity樣式設定：
@mipmap/navbar_icon_return
image.gif
#673AB7
#512DA8
#FF4081
image.gif
問題回報
在使用中有任何問題，歡迎回報給我，可以用以下聯系方式跟我交流
QQ：303704981
email：[email protected]
weibo：@geduo_83
關于作者
var geduo_83 = {
nickName : "geduo_83",
site : "http://www.weibo.com/geduo83"
}
image.gif