Android5.x新特性之Toolbar，AppBarLayout，CoordinatorLayout，CollapsingToolbarLayout等汇总

最新推荐文章于 2024-03-05 13:28:01 发布

JeffCoding

最新推荐文章于 2024-03-05 13:28:01 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android5.0 文章标签： android Toolbar AppBarLayout CoordinatorLayout CollapsingToolbarLay

本文链接：https://blog.youkuaiyun.com/jeffleo/article/details/51740624

Android5.0 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用Toolbar替换ActionBar，并展示了如何配置主题和样式。同时深入探讨了AppBarLayout的使用方法，包括其与CoordinatorLayout的配合使用，以及如何实现滑动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：Toolbar

Toolbar是继承ViewGroup的，可以自定义Toolbar

使用Toolbar，因此要把原来的ActionBar隐藏起来，有两种方式：

(1) 在原主题隐藏actionbar

<resources>
 
  <!-- Base application theme. -->
  <style name="AppTheme" parent="AppTheme.Base">
  </style>
   
  <style name="AppTheme.Base" parent="Theme.AppCompat">
    <item name="windowActionBar">false</item>
    <del><item name="android:windowNoTitle">true</item></del>
    <!-- 使用 API Level 22 編譯的話，要拿掉前綴字 -->
    <item name="windowNoTitle">true</item>
  </style>
 
</resources>

(2) app主题继承没有actionbar的主题,表示不使用actionbar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

接着配置toolbar的主题，也是在appTheme里面配置

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--导航栏底色-->
        <item name="colorPrimary">@color/accent_material_dark</item>
        <!--状态栏底色-->
        <item name="colorPrimaryDark">@color/accent_material_light</item>
        <!--导航栏上的标题颜色-->
        <item name="android:textColorPrimary">@android:color/black</item>
        <!--Activity窗口的颜色-->
        <item name="android:windowBackground">@color/material_blue_grey_800</item>
        <!--按钮选中或者点击获得焦点后的颜色-->
        <item name="colorAccent">#00ff00</item>
        <!--和 colorAccent相反，正常状态下按钮的颜色-->
        <item name="colorControlNormal">#ff0000</item>
        <!--Button按钮正常状态颜色-->
        <item name="colorButtonNormal">@color/accent_material_light</item>
        <!--主窗口体的背景-->
        <item name="android:windowBackground">@color/dim_foreground_material_dark</item>
        <!--EditText 输入框中字体的颜色-->
        <item name="editTextColor">@android:color/white</item>
</style>

然后在Toolbar中进行设定：

<android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_height="?attr/actionBarSize"
  android:layout_width="match_parent"
  android:background="?attr/colorPrimary" >
 
</android.support.v7.widget.Toolbar>

?attr/colorPrimary表示沿用actionbar的主题，也就是apptheme中的主题，这样就把它设置到了toolbar中

?attr/actionBarSize表示沿用actionBar的尺寸

注意：Toolbar的title和菜单键之类的在java代码中设置

1.colorPrimary: Toolbar导航栏的底色。
2.colorPrimaryDark：状态栏的底色，注意这里只支持Android5.0以上的手机。
3.textColorPrimary：整个当前Activity的字体的默认颜色。
4.android:windowBackground：当前Activity的窗体颜色。
5.colorAccent：CheckBox，RadioButton，SwitchCompat等控件的点击选中颜色
6.colorControlNormal：CheckBox，RadioButton，SwitchCompat等默认状态的颜色。
7.colorButtonNormal：默认状态下Button按钮的颜色。
8.editTextColor：默认EditView输入框字体的颜色。

9.navigationBarColor：底部导航栏颜色只能在api21以后的版本才能使用，因此要放在res/values-v21/styles.xml 中

二：AppBarLayout

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material Design设计的App Bar，支持手势滑动操作。

AppBarLayout把它包裹的内容都当做一个App Bar，一般与CoordinatorLayout连用来实现滑动效果

二：CoordinatorLayout

CoordinatorLayout是一个增强型的framelayout

CoordinatorLayout应该要作为父布局，而他的子布局应该要有

1.AppBarLayout

2.可滑动的view，如recyclerView和NestedScrollView，listView之类则不行

<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:layout_width="match_parent"
        android:layout_height="160dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill" />


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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:paddingTop="10dp">

    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/sym_action_email"
        android:layout_gravity="bottom|end"
        android:layout_margin="10dp"
        >
    </android.support.design.widget.FloatingActionButton>

</android.support.design.widget.CoordinatorLayout>

为了做到动画效果，我们要做下面这几步：

1.需要滑动的组件设置 app:layout_scrollFlags

(1) scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
(2) enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
(3) enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
(4) exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

2.给CoordinatorLayout下可滑动的控件如recyclerView加上

app:layout_behavior="@string/appbar_scrolling_view_behavior"

作用：告诉CoordinatorLayout，我（recyclerView）是可滑动的控件，并且在我滑动的时候，设置了

app:layout_scrollFlags的ToolBar可以滑出或滑入

并且layout_behavior可以自定制（这里不详细说了）

二：CoordinatorLayout

CollapsingToolbarLayout包裹 Toolbar 的时候提供一个可折叠的 Toolbar，一般作为AppbarLayout的子视图使用。

此时CollapsingToolbarLayout作为CoordinatorLayout滑动的布局，因此，别忘了在CollapsingToolbarLayout的属性下设置app:layout_scrollFlags，并且在RecyclerView中设置app:layout_behavior="@string/appbar_scrolling_view_behavior"

CollapsingToolbarLayout 提供以下属性和方法：

1. Collapsing title：ToolBar的标题

当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。

2. ExpandedTitleMarginStart：ToolBar标题伸缩前的margin

3. ExpandedTitleMarginEnd：ToolBar标题伸缩后的margin

4. Content scrim：ToolBar被折叠到顶部固定时候的背景

你可以调用setContentScrim(Drawable)方法改变背景或者在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。

5. Status bar scrim：状态栏的背景

调用方法setStatusBarScrim(Drawable)。只能在Android5.0以上系统有效果。

6. Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差

可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。

7. CollapseMode ：子视图的折叠模式，有两种

“pin”：固定模式，在折叠的时候最后固定在顶端；

“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性

app:layout_collapseMode来改变。

<?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:layout_width="match_parent"
        android:layout_height="160dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleMarginEnd="64dp"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:statusBarScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                android:id="@+id/image"
                app:layout_collapseParallaxMultiplier="0.6"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="fitXY"
                android:src="@drawable/yuwenle"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/tl_custom"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:layout_collapseMode="pin">
            </android.support.v7.widget.Toolbar>

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


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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:paddingTop="10dp">

    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/sym_action_email"
        android:layout_gravity="bottom|end"
        android:layout_margin="10dp"
        >
    </android.support.design.widget.FloatingActionButton>

</android.support.design.widget.CoordinatorLayout>