android可摺疊式標題欄
阿新 • • 發佈:2019-02-02
一、先上圖看看實現的效果
二、程式碼
1、MainActivity.java
package com.example.lcf.myapplication;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar ;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.coll);
//設定展示的文字
collapsingToolbarLayout.setTitle("學習");
//設定展示文字的顏色
collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.colorAccent));
}
}
2、activity_main.xml
<?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: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="200dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/coll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:srcCompat="@drawable/ic_launcher_background" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_collapseMode="pin">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
app:srcCompat="@drawable/ic_arrow_back_black_24dp" />
</android.support.v7.widget.Toolbar>
</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="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="hello" />
</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"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="@drawable/ic_edit_black_24dp" />
</android.support.design.widget.CoordinatorLayout>
三、詳解
- CollapsingToolbarLayout只能作為AppBarLayout的子佈局使用
- app:contentScrim=”@color/colorPrimary”摺疊後的背景色
- app:layout_scrollFlags=”scroll|exitUntilCollapsed”滾動並保留toolbar在介面上,如果想全部滾出,就只設置scroll。
- ImageView中設定app:layout_collapseMode=”parallax”,就是摺疊過程中會產生偏移。而Toolbar中設定app:layout_collapseMode=”pin”,摺疊過程中位置不變。
- 為了ImageView能夠與狀態列融合,需要設定android:fitsSystemWindows=”true”屬性,不過只在ImageView中設定android:fitsSystemWindows=”true”屬性是沒用的,它的所有父佈局如CollapsingToolbarLayout、AppBarLayout、CoordinatorLayout都要設定,並且還要在styles.xml中設定android:statusBarColor屬性,styles.xml如下:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimary</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
- NestedScrollView實現內部文字滾動
- FloatingActionButton懸浮按鈕,app:layout_anchor=”@id/appbar”指定一個錨點,app:layout_anchorGravity=”bottom|end”讓懸浮按鈕顯示在AppBarLayout右下角。