Android 可折疊式标題欄的實作

先看效果圖：

一、實作步驟:

1、布局檔案

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".activity.FruitActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing"
            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">

            <ImageView
                android:id="@+id/iv_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/head"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nested_scrollView"
        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">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="35dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="15dp"
                app:cardBackgroundColor="@color/white"
                app:cardCornerRadius="4dp">

                <TextView
                    android:id="@+id/tv_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:text="我這裡是一個卡片布局！" />
            </androidx.cardview.widget.CardView>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="#00000000"
        android:src="@drawable/comment"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"></com.google.android.material.floatingactionbutton.FloatingActionButton>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
           

接下來我們來分析這裡面的控件和屬性：

1. 最外層的布局為 CoordinatorLayout

   ：相當于加強版的FrameLayout,在普通情況下的作用和FrameLayout基本一緻。當然也會有其獨特的作用，CoordinatorLayout可以監聽其所有子控件的各種事件，然後自動幫我們做出最為合理的響應。

2. AppBarLayout:實際上是一個垂直方向的LinearLayout,在内部做了很多封裝，并應用了一些Material Design的設計理念。
3. CollapsingToolbarLayout是作用于Toolbar基礎之上的一個布局，CollapsingToolbarLayout可以讓Toolbar的效果變得更加豐富。
4. app:layout_scrollFlags="scroll|exitUntilCollapsed"屬性：srcoll表示CollapsingToolbarLayout會随着内容的滾動一起滾動，exitUntilCollapsed表示當CollapsingToolbarLayout随着滾動完成折疊之後就保留在界面上，不再移出螢幕。
5. app:contentScrim="?attr/colorPrimary"屬性：用于指定在CollapsingToolbarLayout在趨于折疊狀态以及折疊之後的背景色。
6. app:layout_collapseMode="pin"屬性：用于指定在控件CollapsingToolbarLayout折疊過程中的折疊模式，pin表示在折疊過程中位置始終不變。
7. app:layout_collapseMode=“parallax” 屬性：表示在折疊的過程中産生一定的錯位偏移。
8. NestedScrollView控件：即有ScrollView控件使用滾動的方式來檢視螢幕以外的資料，NestedScrollView在此基礎之上還增加了嵌套響應滾動事件的功能。
9. app:layout_behavior="@string/appbar_scrolling_view_behavior"指定了一個布局行為
10. CardView：用于實作卡片式布局效果的重要控件，額外提供了圓角和陰影的效果。
11. app:cardCornerRadius屬性：指定卡片圓角的弧度。
12. FloatingActionButton懸浮按鈕

關于控件和屬性就說這麼多。

接下來就是實作java代碼了,代碼如下：

public class FruitActivity extends AppCompatActivity {

    private CollapsingToolbarLayout collapsing;
    private Toolbar toolbar;
    private FloatingActionButton floating;
    private TextView tv_text;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fruit);
        collapsing = findViewById(R.id.collapsing);
        toolbar = findViewById(R.id.toolbar);
        floating = findViewById(R.id.floating);
        tv_text = findViewById(R.id.tv_text);

        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        collapsing.setTitle("這是CollapsingToolbarLayout");
        String text = "努力努力再努力";

        tv_text.setText(generateText(text));
        floating.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(FruitActivity.this, "您點選了懸浮按鈕哦！", Toast.LENGTH_SHORT).show();
            }
        });

    }

    private String generateText(String text) {
        StringBuilder stringBuilder = new StringBuilder("");
        for (int i = 0; i < 500; i++) {
            stringBuilder.append(text);
        }
        return stringBuilder.toString();
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
        	//Toolbar左上角預設有一個傳回的箭頭，含義是傳回上一個活動
        	//這個按鈕叫做HomeAsUp按鈕，這個按鈕的id永遠都是android.R.id.home
            case android.R.id.home:
                finish();
                break;
        }
        return true;
    }
}
           

有不當之處還望各位指正，一起學習，共同進步！加油！