CollapsingToolbarLayout可折叠式标题栏

最新推荐文章于 2024-07-24 21:35:56 发布

大不懂

最新推荐文章于 2024-07-24 21:35:56 发布

阅读量631

点赞数 3

分类专栏： CollapsingToolbarLayout CoordinatorLayout 文章标签： android

本文链接：https://blog.csdn.net/qq_35698774/article/details/108171257

版权

CoordinatorLayout 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CollapsingToolbarLayout

1 篇文章 0 订阅

订阅专栏

        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互助群：

感谢：郭霖的《第一行代码第二版》

大不懂

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
CollapsingToolbarLayout可折叠式标题栏

CollapsingToolbarLayout是一个作用于ToolBar基础上的布局，他说由Design Support库提供的。CollapsingToolbarLayout可以让ToolBar的效果变得更丰富，除了展示标题还有好看的动效。 CollapsingToolbarLayout不能独立存在 AppBarLayout必须是CoordinatorLayout的子布局所以：<?xml version="1.0" encoding="utf-8"?>...
复制链接

扫一扫