Android开发CollapsingToolbarLayout可折叠式标题栏
程序员文章站
2022-06-18 11:05:09
CollapsingToolbarLayout是一个作用于ToolBar基础上的布局，他说由Design Support库提供的。CollapsingToolbarLayout可以让ToolBar的效果变得更丰富，除了展示标题还有好看的动效。 CollapsingToolbarLayout不能独立存在 AppBarLayout必须是CoordinatorLayout的子布局所以：......
CollapsingToolbarLayout是一个作用于ToolBar基础上的布局，他说由Design Support库提供的。CollapsingToolbarLayout可以让ToolBar的效果变得更丰富，除了展示标题还有好看的动效。
CollapsingToolbarLayout不能独立存在 AppBarLayout必须是CoordinatorLayout的子布局所以：
<?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=".MainActivity">
<!-- <com.google.android.material.appbar.AppBarLayout-->
<!-- CollapsingToolbarLayout不能独立存在 AppBarLayout必须是CoordinatorLayout的子布局-->
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/fruit_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/banana"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:visibility="visible"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- <android.support.v7.widget.CardView-->
<androidx.cardview.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="match_parent"
android:layout_height="wrap_content"
android:text="先帝(1)创业(2)未半而中道(3)崩殂(4)，今(5)天下三分(6)，益州疲弊(7)，此(8)诚危急存亡之秋也。然(9)侍卫之臣不懈于内，忠志之士忘身(10)于外者，盖追先帝之殊遇(11)，欲报之于陛下也。诚宜开张圣听，以光(13)先帝遗德，恢弘(15)志士之气，不宜妄自菲薄(16)，引喻失义(17)，以塞忠谏之路也(18)。
宫中府中，俱为一体(19)；陟罚臧否(20)，不宜异同：若有作奸犯科(21)及为忠善者(22)，宜付有司(23)论其刑赏(24)，以昭陛下平明之理(25)；不宜偏私(26)，使内外异法也(27)。
侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯(28)，是以先帝简拔以遗陛下(29)：愚以为宫中之事，事无大小，悉以咨之(30)，然后施行，必能裨补阙漏(31)，有所广益(32)。
将军向宠，性行淑均(33)，晓
出师表书法
出师表书法(3张)
畅(34)军事，试用(35)于昔日，先帝称之曰“能”，是以众议举宠为督(36)：愚以为营(37)中之事，悉以咨之，必能使行阵(38)和睦，优劣得所(39)。
亲贤臣，远小人(40)，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓(41)也。先帝在时，每与臣论此事，未尝不叹息痛恨(42)于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节(43)之臣，愿陛下亲之信之，则汉室之隆(44)，可计日(45)而待也。
臣本布衣(46)，躬耕于(47)南阳(48)，苟全(49)性命于乱世，不求闻达于诸侯(50)。先帝不以臣卑鄙(51)，猥(52)自枉屈，三顾(53)臣于草庐之中，咨臣以当世之事，由是感激(54)，遂许先帝以驱驰(55)。后值倾覆，受任于败军之际，奉命于危难之间：尔来二十有(56)一年矣。
先帝知臣谨慎，故临崩寄臣以大事也(57)。受命以来，夙夜忧叹(58)，恐托付不效，以伤先帝之明；故五月渡泸(59)，深入不毛(60)。今南方已定，兵甲已足(61)，当奖率(62)三军，北定中原，庶竭驽钝(63)，攘除奸凶(64)，兴复汉室，还于旧都(65)。此臣所以报先帝而忠陛下之职分也(66)。至于斟酌损益(67)，进尽忠言，则攸之、祎、允之任也。
愿陛下托臣以讨贼兴复之效(68)，不效，则治臣之罪(69)，以告(70)先帝之灵。若无兴德之言(71)，则责攸之、祎、允等之慢(72)，以彰其咎(73)；陛下亦宜自谋，以咨诹善道(74)，察纳雅言(75)，深追先帝遗诏(76)。臣不胜受恩感激。
今当(77)远离，临表涕零(78)，不知所言(79)。 [4-5]"
android:layout_margin="10dp" />
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/banana"
app:layout_anchor="@id/appBar"
android:visibility="visible"
app:layout_anchorGravity="bottom|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
对应的activity：
package com.example.mycollapsingtoolbarlayout;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.os.Bundle;
import android.view.MenuItem;
import com.google.android.material.appbar.CollapsingToolbarLayout;
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);//默认图标返回
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
}
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("大不懂");
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home://返回按钮
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
} 但是他的系统的状态栏还是系统颜色，我们需要把他修改一下：
1.添加：android:fitsSystemWindows="true"
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true">
<!-- <com.google.android.material.appbar.AppBarLayout-->
<!-- CollapsingToolbarLayout不能独立存在 AppBarLayout必须是CoordinatorLayout的子布局-->
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp" android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/fruit_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:visibility="visible"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- <android.support.v4.widget.NestedScrollView-->
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- <android.support.v7.widget.CardView-->
<androidx.cardview.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="match_parent"
android:layout_height="wrap_content"
android:text="12124524545245245"
android:layout_margin="10dp" />
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<!-- <android.support.design.widget.FloatingActionButton-->
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/ic_comment"
app:layout_anchor="@id/appBar"
android:visibility="visible"
app:layout_anchorGravity="bottom|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
2.适配android:statusBarColor
将主题中的android:statusBarColor设置成透明
<item name="android:statusBarColor">@android:color/transparent</item>
但是android:statusBarColor是再Android 5.0 以后才有的，所以需要适配一下。
再res文件下新建一个values-21的包，里面新建一个styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="FruitActivityTheme" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
这样当Android 5.0 及以上就会调用这个方法。但是5.0一下会崩溃，解决5.0一下：
再values文件夹下添加：
<style name="FruitActivityTheme" parent="AppTheme"></style>
完整：
<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/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="FruitActivityTheme" parent="AppTheme"></style>
</resources>
转发表明出处：https://blog.csdn.net/qq_35698774/article/details/108171257
推荐阅读
-
Android开发实现可拖动排序的ListView功能【附源码下载】
-
Android 开发隐藏标题栏的方法总结
-
Android开发app保活，最小化可唤起界面，强杀可再次弹起（已兼容7.0）
-
Android开发 自定义底部可滑动浮层控件及原理解析
-
Android开发CollapsingToolbarLayout可折叠式标题栏
-
Android开发高级组件--ExpandableListView(可伸展的列表组件)
-
解决用android Studio开发不能去除标题栏的问题
-
Android开发：去除标题栏title
-
Android开发实现可拖动排序的ListView功能【附源码下载】
-
Chrome新增移动开发工具：可模拟Android调试环境