Android實現(xiàn)可折疊式標題欄

更新時間：2022年09月19日 14:48:45 作者：路宇

這篇文章主要為大家詳細介紹了Android實現(xiàn)可折疊式標題欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android實現(xiàn)可折疊式標題欄的具體代碼，供大家參考，具體內容如下

先看效果圖：

一、實現(xiàn)步驟:

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可以監(jiān)聽其所有子控件的各種事件，然后自動幫我們做出最為合理的響應。

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在趨于折疊狀態(tài)以及折疊之后的背景色。

6、app:layout_collapseMode="pin"屬性：用于指定在控件CollapsingToolbarLayout折疊過程中的折疊模式，pin表示在折疊過程中位置始終不變。

7、app:layout_collapseMode=“parallax” 屬性：表示在折疊的過程中產生一定的錯位偏移。

8、NestedScrollView控件：即有ScrollView控件使用滾動的方式來查看屏幕以外的數(shù)據(jù)，NestedScrollView在此基礎之上還增加了嵌套響應滾動事件的功能。

9、app:layout_behavior="@string/appbar_scrolling_view_behavior"指定了一個布局行為

10、CardView：用于實現(xiàn)卡片式布局效果的重要控件，額外提供了圓角和陰影的效果。

11、app:cardCornerRadius屬性：指定卡片圓角的弧度。

12、FloatingActionButton懸浮按鈕

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

接下來就是實現(xiàn)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;
? ? }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: