可摺疊式標題欄

         CollapsingToolbarLayout是一個作用於Toolbar基礎之上的佈局，可以使標題欄產生華麗的效果。

         CollapsingToolbarLayout不能獨立存在，只能作為AppBarLayout的直接子佈局來使用。而AppBarLayout又必須是CoordinatorLayout的子佈局。

         佈局分為兩部分，一個水果標題欄，一個水果內容詳情。

         我先使用CoordinatorLayout來完成最外層佈局

<android.support.design.widget.CoordinatorLayout     xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools
 
:context="com.example.rotateimageview.FruitActivity">

</android.support.design.widget.CoordinatorLayout>

其中xmlns：app的命題空間，在Material Design的開發中我們會經常用到。

         接著我們在CoordinatorLayout中巢狀一個AppBarLayout佈局

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width=
 
"match_parent"
    android:layout_height="250dp">

</android.support.design.widget.AppBarLayout>

高度設為250dp，個人覺得250dp的視覺效果比較好。

         接著我們在AppBarLayout中巢狀一個CollapsingToolbarLayout佈局

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:contentScrim="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

</android.support.design.widget.AppBarLayout>

android:theme屬性設定主題

app：contentScrim屬性設定CollapsingToolbarLayout在趨於摺疊狀態以及摺疊之後的背景色

app：layout_scrollFlags屬 scroll表示CollapsingToolbarLayout會隨著內容詳情的滾動一起滾動，exitUntilCollapsed表示當CollapsingToolbarLayout隨著滾動完成摺疊之後就保留在介面上，不在移出螢幕。

這樣我們把框架這些搭好了，現在定義標題欄的具體內容。

         在CollapsingToolbarLayout中巢狀一個ImageView，一個Toolbar

<ImageView
    android:id="@+id/fruit_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_collapseMode="pin"
    />

這樣就佈局就意味著，這個標題欄就由普通的標題欄加上圖片組合而成的。

android:scaleType是控制圖片如何resized/moved來匹對ImageView的size

android:scaleTyoe = “centerCrop” 按比例擴大圖片的size居中顯示，使得圖片長(寬)等於或大於View的長(寬)。

app:layout_collapseMode屬性表示摺疊過程中的摺疊方式是怎麼樣的。

app:layout_collapseMode = “parallax” 表示摺疊過程中產生一定的錯位偏移

app:layout_collapseMode= “pin”表示摺疊過程中位置始終保持不變

標題欄搞定，我們在CoordinatorLayout佈局中新增關於內容的詳細部分。

         我們在CoordinatorLayout中巢狀一個NestedScrollView

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>   

App:layout_behavior屬性指定一個佈局行為

@string/appbar_scrolling_view_behavior可以上下滾動的行為

         無論是ScrollView還是NestedScrollView都是隻允許存在一個直接子佈局，所以我們加入LinearLayout，在其中新增自己想加入東西。

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</android.support.design.widget.AppBarLayout>

 我們在LinearLayout中新增一個ImageView(這裡我們使用CardView，因為前面有一個CardView佈局，我們把資料直接傳過來就是)和一個TextView.

<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"
    app:cardCornerRadius="4dp">
    <TextView
        android:id="@+id/fruit_content_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"/>
</android.support.v7.widget.CardView>

我們再在CoordinayorLayout中新增一個懸浮按鈕FloatingActionButton。

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:src="@drawable/gege"
    app:layout_anchor="@id/appBar"
    app:backgroundTint="#fafcfa"
    app:layout_anchorGravity="bottom|end"/>

app:layout_anchor屬性指定一個錨點（我們將錨點設定為AppBarLayout，使懸浮按鈕出現在水果標題欄的區域）

app:layout_anchorGravity屬性將懸浮按鈕定位在標題欄區域的右下角

佈局宣佈搞定，這下來活動中編寫邏輯程式碼

public class FruitActivity extends AppCompatActivity {

    public static final String FRUIT_NAME = "fruit_name";
    public static final String FRUIT_IMAGE_ID = "fruit_image_id";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fruit);
        Intent intent = getIntent();
        String fruitName = intent.getStringExtra(FRUIT_NAME);//接受名字
        int fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID,0);//接受圖片地址
        android.support.v7.widget.Toolbar toolbar =
                (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
        android.support.design.widget.CollapsingToolbarLayout collapsingToolbarLayout =
                (android.support.design.widget.CollapsingToolbarLayout)
                        findViewById(R.id.collapsing_toolbar);
        ImageView fruitImageView = (ImageView)findViewById(R.id.fruit_image_view);
        TextView fruitContentText = (TextView) findViewById(R.id.fruit_content_text);
        setSupportActionBar(toolbar);//把Toolbar作為ActionBar顯示
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);//啟動HomeAsUP按鈕,預設新增一個返回箭頭

        }
        collapsingToolbarLayout.setTitle(fruitName);//將傳入的水果名作為當前介面的標題
        Glide.with(FruitActivity.this).load(fruitImageId).into(fruitImageView);//載入傳入的水果圖片
        String fruitContent = generateFruitContent(fruitName);//呼叫方法
        fruitContentText.setText(fruitContent);
    }
    private String generateFruitContent(String fruitName){
        StringBuffer fruitContent = new StringBuffer();
        for (int i = 0;i<500;i++){
            fruitContent.append(fruitName);//把水果名拼接，迴圈500次
        }
        return fruitContent.toString();
    }

    //HomeAsUp按鈕的點選事件
    public boolean onOptonsItemSelected(MenuItem item){
        switch (item.getItemId()){
            case android.R.id.home:
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

然後在主活動相應的介面卡中獲取水果名和水果圖片資源的id,並把它們通過Itent實現活動之間的資料傳遞。

所有工作完成

下面成果展示：               

補充：

充分利用系統狀態列空間

         在CoodinatorLayout、AppBarLayout、CollapsingToolbarLayout、ImageView中新增一句

        android:fitsSystemWindows="true"

         這個屬性表示控制元件可以出現在狀態列裡

然後編寫一個res/Values resource file/styles.xml

<resources>
    <style name="FruitActivityTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

在AndroidManifest.xml中註冊

<activity
    android:name=".FruitActivity"
    android:theme="@style/FruitActivityTheme">
</activity>