1 CollapsingToolbarLayout 布局
CollapsingToolbarLayout 是基于 Toolbar 的布局。它可以讓 Toolbar 的效果變得更加華麗褂萧。
注意：CollapsingToolbarLayout 只能作為 AppBarLayout 的直接子布局闷串。
現(xiàn)在我們創(chuàng)建一個空活動來顯示貓的詳情：
然后在 activity_cat.xml 中編寫界面布局，主要分為兩個部分铅鲤，一個是標題欄，另一個是內(nèi)容：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:material="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/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
material:contentScrim="?attr/colorPrimary"
material:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/cat_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
material:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
material:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--內(nèi)容布局-->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
material:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="35dp"
material:cardCornerRadius="4dp">
<TextView
android:id="@+id/cat_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<!--用于評論的懸浮按鈕-->
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/comment"
material:layout_anchor="@id/app_bar_layout"
material:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
- 整體布局使用 CoordinatorLayout。
- 定義了
xmlns:material="http://schemas.android.com/apk/res-auto"命名空間呆瞻。
標題欄布局：
- 標題欄布局使用 AppBarLayout，內(nèi)層嵌套了 CollapsingToolbarLayout径玖。
- CollapsingToolbarLayout 中的 contentScrim 可指定當標題欄趨于折疊以及折疊之后的背景色痴脾；而 layout_scrollFlags 中的 scroll 表示 CollapsingToolbarLayout 會隨著內(nèi)容的滾動而滾動； layout_scrollFlags 中的 exitUntilCollapsed 表示折疊后會保留在界面中（不會被移出屏幕）梳星。
- 在 CollapsingToolbarLayout 中赞赖，定義了 ImageView 與 Toolbar。即這個標題欄是由普通標題欄加圖片組合而成的冤灾。其中有一個 layout_collapseMode 屬性前域，它用于設(shè)置折疊模式。pin 表示在折疊過程中使用保持韵吨，就像被大頭針定住了一樣匿垄；parallax 表示在折疊過程中會產(chǎn)生視差。
內(nèi)容布局：
- 外層使用 NestedScrollView，它不僅支持使用滾動的方式來查看屏幕外的數(shù)據(jù)椿疗，還能嵌套響應(yīng)滾動事件漏峰。我們還通過 layout_behavior 來指定布局行為。
- 因為 NestedScrollView 內(nèi)部只允許存在一個直接的子布局届榄，所以我們可以先嵌套一個 LinearLayout浅乔，然后再其內(nèi)部放入更多內(nèi)容。
- 這里使用 TextView 來顯示內(nèi)容铝条，然后把它放入 CardView （卡片式布局）中靖苇。
- 我們?yōu)?CardView 設(shè)置了外邊距，還設(shè)置了圓角班缰。這些工作都是為了讓頁面變得更好看贤壁。
最后我們還加了一個懸浮按鈕（FloatingActionButton）：
- 首先把按鈕圖片 png ，放在 drawable 文件夾下埠忘。
- 通過 layout_anchor 來設(shè)置錨點脾拆，讓懸浮按鈕出現(xiàn)在標題欄區(qū)域內(nèi)。
- 通過 layout_anchorGravity 讓按鈕出現(xiàn)在標題欄區(qū)域的右下角给梅。
2 活動類
public class CatActivity extends AppCompatActivity {
/**
* 貓名
*/
public static final String CAT_NAME = "cat_name";
/**
* 貓圖片 ID
*/
public static final String CAT_IMAGE_ID = "cat_image_id";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_cat);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {//啟用 HomeAsUp 按鈕（返回箭頭）
actionBar.setDisplayHomeAsUpEnabled(true);
}
Intent intent = getIntent();
//設(shè)置標題
CollapsingToolbarLayout layout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
String catName = intent.getStringExtra(CAT_NAME);
layout.setTitle(catName);
//設(shè)置圖片
int catImageId = intent.getIntExtra(CAT_IMAGE_ID, 0);
ImageView imageView = (ImageView) findViewById(R.id.cat_image_view);
Glide.with(this).load(catImageId).into(imageView);//加載圖片
//設(shè)置內(nèi)容
TextView contentView = (TextView) findViewById(R.id.cat_text_view);
contentView.setText(generateContent(catName));
}
/**
* 生成內(nèi)容
*
* @param catName 貓名
* @return
*/
private String generateContent(String catName) {
//實踐中假丧，會根據(jù)參數(shù)名稱，返回對應(yīng)的內(nèi)容
return "俄羅斯藍貓（Russian Blue）动羽，歷史上曾被稱做阿契安吉藍貓包帚，曾有過三種不同的名字。最初是阿契安吉藍貓运吓，直到20世紀40年代才有現(xiàn)在的名字渴邦，另外有段時間它則叫做馬耳他貓。證據(jù)顯示拘哨，這種貓確實原產(chǎn)于俄羅斯谋梭，因為已在俄羅斯寒帶地區(qū)發(fā)現(xiàn)了同種的貓。俄羅斯藍貓體型細長倦青，大而直立的尖耳朵瓮床，腳掌小而圓，走路像是用腳尖在走产镐。身上披著銀藍色光澤的短被毛隘庄，配上修長苗條的體型和輕盈的步態(tài)，盡顯一派貓中的貴族風度癣亚。";
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home://點擊 HomeAsUp 按鈕時
finish();//關(guān)閉當前活動（即返回上一個活動）
return true;
}
return super.onOptionsItemSelected(item);
}
}
- 我們在標題欄啟用 HomeAsUp 按鈕（返回箭頭）丑掺，用于關(guān)閉當前活動。
- 將 CollapsingToolbarLayout 傳遞過來的貓類型述雾，作為標題街州。
- 接著使用 Glide 來加載圖片兼丰。
- 然后設(shè)置內(nèi)容。
- 最后在 onOptionsItemSelected 中處理 HomeAsUp 按鈕的點擊事件唆缴。
現(xiàn)在我們要處理首頁活動 RecyclerView 的點擊事件鳍征，當點擊某只貓時，打開它的詳情活動頁：
public class CatAdapter extends RecyclerView.Adapter<CatAdapter.ViewHolder> {
private Context context;
private List<Cat> cats = new ArrayList<>();
public CatAdapter(List<Cat> cats) {
this.cats = cats;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (context == null) {//設(shè)置上下文環(huán)境
context = parent.getContext();
}
View view = LayoutInflater.from(context).inflate(R.layout.cat_item, parent, false);
//處理 RecyclerView 點擊事件
final ViewHolder holder = new ViewHolder(view);
holder.cardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getAdapterPosition();
Cat cat = cats.get(position);
Intent intent = new Intent(context, CatActivity.class);
intent.putExtra(CatActivity.CAT_NAME, cat.getType());
intent.putExtra(CatActivity.CAT_IMAGE_ID, cat.getImgId());
context.startActivity(intent);
}
});
return holder;
}
...
}
運行效果：
3 融合系統(tǒng)頂部狀態(tài)欄
利用 fitsSystemWindows 屬性我們可以將標題欄中的圖片與系統(tǒng)頂部狀態(tài)欄融合起來。
注意： 因為我們這里的 ImageView 嵌套的很深，所以必須把它以及它的祖先布局中的 fitsSystemWindows 都設(shè)置為 true熊楼，才能真正生效：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:material="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<!--標題欄布局-->
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
material:contentScrim="?attr/colorPrimary"
material:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
>
<ImageView
android:id="@+id/cat_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
material:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
/>
...
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>
接著把狀態(tài)欄的顏色設(shè)置為透明闯第，即
<item name="android:statusBarColor">@android:color/transparent</item>
因為這個屬性從 API21 （Android 5.0 +）才出現(xiàn)，所以我們必須做差異化實現(xiàn)旺聚。
在 res 目錄下新建一個 values-v21 目錄织阳，然后再新建一個 styles.xml：
<resources>
<!--Android 5.0+-->
<style name="catActivityTheme" parent="AppTheme">
<!--狀態(tài)欄顏色指定為透明-->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
這樣設(shè)計是因為只有 Android 5.0+ 才會去讀取該文件。
我們還需要在 values/styles.xml 中新建一個不包含實際內(nèi)容的 catActivityTheme砰粹，確保 Android 5.0 之前的版本不會拋錯：
<!--小于 Android 5.0-->
<style name="catActivityTheme" parent="AppTheme">
</style>
最后在 AndroidManifest.xml 中的 CatActivity 活動唧躲，設(shè)置剛剛定義的主題：
<activity android:name=".CatActivity"
android:theme="@style/catActivityTheme"
></activity>
運行效果：
就算是現(xiàn)在的劉海屏，也可以適配的很好哦O(∩_∩)O~
