Android材料設計庫之摺疊式佈局你應該知道的一切
github原始碼地址：https://github.com/geduo83/AndroidMaterialDesign/tree/master/module_drawerlayout_coordinatorlayout
在Android5.0之後，Android給我們提供了非常豐富關於UI設計的材料設計庫，其中就有非常實用的摺疊式佈局
常見問題：
1. ToolBar中自定義的title不能居中
設定CollapsingToolbarLayout的app:titleEnabled="false"即可
2. 背景圖片沒有完全沉浸在狀態列裡邊
設定<ImageView android:fitsSystemWindows="true"/>即可
常見模板佈局1：
效果圖：
佈局程式碼：
<?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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout 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.support.design.widget.CollapsingToolbarLayout 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"> <ImageView 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.support.v7.widget.Toolbar 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.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"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingTop="24dp"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/card_margin"> <LinearLayout style="@style/Widget.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="卡片1" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/news_content" /> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton 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"/> </android.support.design.widget.CoordinatorLayout>
常見模板佈局2：
效果圖：
佈局程式碼：
<?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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar 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.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.FloatingActionButton 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" /> </android.support.design.widget.CoordinatorLayout>
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優先滾動
2.2 app:layout_scrollFlags="scroll|enterAlways" :往下滾ChildView優先滾動
2.3 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"：往下滾動ChildView優先滾動，且滾動到指定的最小高度，然後開始滾動ScrollView，直到ScrollView滾動完畢再開始滾動ChildView
2.4 app:layout_scrollFlags="scroll|exitUntilCollapsed"：往上滾動ChildView優先滾動，且滾動到指定的最小高度，然後開始滾動ScrollView
2.5 app:layout_scrollFlags="scroll|snap"：往下滾ScrollView優先滾動，然後ChildView開始滾動，但是ChildView必須滾動到一定的比例才能繼續往下滾，否則ChildView滾動沒有到達一定比例，手鬆了之後就會回彈回去，類似ViewPager左滑右滑的那種效果
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();
}
});4.2 Activity樣式設定：
<style name="AppTheme.BackBar" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="navigationIcon">@mipmap/navbar_icon_return</item>
</style><style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="colorPrimary">#673AB7</item>
<item name="colorPrimaryDark">#512DA8</item>
<item name="colorAccent">#FF4081</item>
</style>問題反饋
在使用中有任何問題，歡迎反饋給我，可以用以下聯絡方式跟我交流
QQ：303704981
email：[email protected]
weibo：@geduo_83
關於作者
var geduo_83 = {
nickName : "geduo_83",
site : "http://www.weibo.com/geduo83"
}