Android Material Design之CollapsingToolbarLayout(可折叠式标题栏）

最新推荐文章于 2024-05-17 09:46:05 发布

luckyliuqs

最新推荐文章于 2024-05-17 09:46:05 发布

阅读量868

点赞数

分类专栏： Android Material Design 文章标签： Android

本文链接：https://blog.csdn.net/qq_35507234/article/details/88918687

版权

Android Material Design 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

难道不修改会报错？由于没有5.0以前的系统模拟器，过段时间回来测试一下。

1.概述

1.1 定义

  CollapsingToolbarLayout(可折叠式标题栏）是一个作用于Toolbar基础之上的布局，可以让Toolbar的效果变得更加丰富，是由Design Support库提供的

  CollapsingToolbarLayout不能独立存在，它被限定只能作为AppBarLayout的直接子布局来使用。而AppBarLayout又必须是CoordinateLayout的字布局。 CoordinateLayout需要配合支持嵌套滚动的控件才能直线折叠效果。

1.2 原理

  CollapsingToolbarLayout在折叠之后就是一个普通的Toolbar。

2.案例

2.1 展示效果

1）初始未折叠效果：图片正常显示

2）向上滚动开始处于折叠状态的效果：图片发生错位偏移

3）折叠完成效果：图片隐藏不见

2.2 创建布局

在activity_main.xml中添加CollapsingToolbarLayout，为其设置属性和为子控件设置属性
<?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.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp">
        
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            
            <ImageView
                android:id="@+id/image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/image_back"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>
            
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbars"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="800dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="#555454">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="800dp"
            android:orientation="vertical"
            android:layout_margin="15dp"
            android:background="#FFFFFF">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="#303030"
                android:text="This is text!"
                android:textSize="20sp"
                android:textColor="#e70969"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>
2.3 属性解析

在上面布局中，添加了很多属性，下面是解析：

app:contentScrim 用于指定CollapsingToolbarLayout在趋于折叠状态及折叠状态完成之后的背景色
app:layout_scrollFlags
用于指定CollapsingToolBarLayout随着滚动而显示的效果

scroll：表示CollapsingToolBarLayout会随着文字滚动而一起滚动

exitUntilCollapsed：表示CollapsingToolBarLayout随着滚动完成折叠之后就保留在界面上，

不再移除屏幕。

app:layout_collapseMode
用于指定当前控件在CollapsingToolBarLayout折叠过程中的折叠模式

这里ImageView指定成parallax，表示图片会在折叠过程中产生一定的错位偏移，视觉效果很好。

这里Toolbar指定成pin，表示在折叠过程中其位置始终保持不变。

2.4 业务处理

在MainActivity.java中可以对CollapsingToolbarLayout进行很多的设置
public class MainActivity_4 extends AppCompatActivity {
    private  CollapsingToolbarLayout collapsingToolbarLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_4);
        Toolbar toolbar = findViewById(R.id.toolbars);
        setSupportActionBar(toolbar);
        collapsingToolbarLayout = findViewById(R.id.collapsing_toolbar);
        //设置标题
        collapsingToolbarLayout.setTitle("hello world");
    }
}
2.5 优化：充分利用系统状态栏空间

在前面的效果展示图中，系统的状态栏存在与背景图的上方，感觉很丑。如何将系统状态栏和背景图融合到一起？

在Android 5.0之前是无法对系统状态栏的背景或者颜色进行操作的，那个时候还没有Material Design的概念。Android 5.0之后的系统支持这个功能。在5.0之后的系统中，使用背景图和状态栏融合的模式，在5.0之前的使用普通模式。

想要背景图和系统状态栏融合，需要借助android:fitsSystemWindows这个属性来实现。在上面的布局中，将CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout这种嵌套结构的布局中中设置android:fitsSystemWindows=“true”属性，表示该控件会出现在系统状态栏里面；必须将ImageView的所有父布局都设置上这个属性才可以。

设置后的布局如下所示：
<?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="250dp"
        android:fitsSystemWindows="true">
        
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true">
            
            <ImageView
                android:id="@+id/image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/image_back"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:fitsSystemWindows="true"/>
            
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbars"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    ......

</android.support.design.widget.CoordinatorLayout>
注意：设置好android:fitsSystemWindows=“true”属性后还是没有用的，必须得在程序主题中将状态栏的颜色指定成透明色才可以。

设置透明色的方法很简单，在主题中将android:statusBarColor属性的值指定为:@android:color/transparent就可以了。这里又出现一个问题，android:statusBarColor这个属性是从API 21（也就是Android 5.0系统）才开始有的。之前的系统无法指定这个属性，因此要进行系统的差异性处理，如下所示：

1）右击res，创建values-21目录，然后在其目录下创建styles.xml，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MainActivityTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>
上述定义了一个MainActivityTheme主题，其父类是AppTheme，继承了父类中的所有特性。将状态栏的颜色设置为透明色，由于values-21目录只有Android 5.0及以上的系统才会去读取，但是5.0之前的系统无法识别MainActivityTheme这个主题，因此还需要对values/styles.xml文件进行修改。

难道不修改会报错？由于没有5.0以前的系统模拟器，过段时间回来测试一下。

2）对values/styles.xml文件进行修改，添加MainActivityTheme主题
<resources>

    
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="MainActivityTheme." parent="AppTheme"></style>
</resources>
这里添加了MainActivityTheme主题，并且其parent主题也是AppTheme，但是其内部是空的，因为5.0之前的系统是无法识别指定状态栏的颜色的。因此这里什么都不做就可以了。

3）修改AndroidManifest.xml，为MainActivity添加MainActivityTheme
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.luckyliuqs.materialdesign">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity
            android:name=".MainActivity"
            android:theme="@style/MainActivityTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>
效果图如下所示：背景图和状态栏完全融合在一起了

luckyliuqs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Android Material Design之CollapsingToolbarLayout(可折叠式标题栏）

目录1.概述1.1 定义1.2 原理2.案例2.1 展示效果2.2 创建布局2.3 属性解析2.4 业务处理2.5 优化：充分利用系统状态栏空间难道不修改会报错？由于没有5.0以前的系统模拟器，过段时间回来测试一下。1.概述1.1 定义 CollapsingToolbarLayout(可折叠式标题栏）是一个作用于...
复制链接

扫一扫