Android Material Design之AppBarLayout

最新推荐文章于 2024-08-11 03:44:05 发布

luckyliuqs

最新推荐文章于 2024-08-11 03:44:05 发布

阅读量1.9k

点赞数

分类专栏： Android Material Design

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

版权

Android Material Design 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

2.5 实现Material Design设计理念

成功的遇到一坑，这里ToolBar不会随着ListView滚动而显示或者隐藏。可以说ListView不支持这个效果。一个Fragment根布局是ScrollView，另一个是ListView，上面的折叠框架都不支持，需要把ScrollView变成NestedScrollView，ListView采用RecyclerView来代替。

1.概述

AppBarLayout是Design Support库提供的，它实际上是一个垂直方向上的LinearLayout，在内部做了很多滚动事件的封装。

AppBarLayout必须是CoordinateLayout的子布局才能实现效果。可用于处理遮挡问题

2.案例

2.1 布局代码

<?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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#3c3b3b"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="35dp" />
    <ListView
        android:id="@+id/listview"
        android:divider="@null"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

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

2.2 案例展示效果

未引入ListView之前效果：

引入ListView后效果：

2.3 案例分析

由于ToolBar和ListView都是放置在FrameLayout中的，在FrameLayout中的所有控件在不明确定位的情况下，都会默认摆放在布局的左上角，从而就产生了遮挡效果。ToolBar被ListView的内容遮挡住了。

这里有两个解决方法：

1.通过使用偏移，让ListView向下偏移一个ToolBar的高度。

2.使用AppBarLayout。

2.3 通过AppBarLayout解决

只需两个步骤：1.将ToolBar嵌套到AppBarLayout:中；2.给ListView指定一个布局行为：app:layout_behavior="appbar_scrolling_view_behavior",appbar_scrolling_view_behavior定义在design包中。如下所示：

<?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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#3c3b3b"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </android.support.design.widget.AppBarLayout>

    <ListView
        android:id="@+id/listview"
        android:divider="@null"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

效果图如下所示：

2.4 分析

从上面看出，AppBarLayout成功的解决了ListView遮挡ToolBar的问题，当ListView滚动的时候，就将滚动事件通知给AppBarLayout了。

问题：在上面的布局中，如果没有指定app:layout_behavior属性或者如果将CoordinateLayout换成FrameLayout，ListView会有一部分处于Toolbar的遮挡下，为ToolBar和AppBarLayout设置margin，都不起作用，还是遮挡住，不知为何？所以还是用CoordinateLayout好一点。如下图所：

2.5 实现Material Design设计理念

在ToolBar里面添加app:layout_scrollFlags属性，如下所示：

<?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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#3c3b3b"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap"/>
    </android.support.design.widget.AppBarLayout>

    <ListView
        android:id="@+id/listview"
        android:divider="@null"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

成功的遇到一坑，这里ToolBar不会随着ListView滚动而显示或者隐藏。可以说ListView不支持这个效果。一个Fragment根布局是ScrollView，另一个是ListView，上面的折叠框架都不支持，需要把ScrollView变成NestedScrollView，ListView采用RecyclerView来代替。

如下图所示：

所以以后尽量使用RecycleView，这里就使用NestedScrollView，如下所示：

<?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="wrap_content">
        <android.support.v7.widget.Toolbar
            android:scrollbars="vertical"
            android:id="@+id/toolbar"
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:background="#3c3b3b"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1200dp"
            android:orientation="vertical"
            android:background="#892f8a">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="nihaop"
                android:textColor="#ec0436"
                android:background="#7b7338"
                android:layout_marginTop="50dp"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

效果图如下所示：当向上滚动时，ToolBar跟着向上滚动并隐藏；向下滚动时，ToolBar会跟随向下滚动并显示。

app:layout_scrollFlags属性详解：

1.scroll	表示当向上滚动时，ToolBar跟着向上滚动并隐藏；
2.enterAlways	表示向下滚动时，ToolBar会跟随向下滚动并显示。
3.snap	表示当ToolBar还没完全隐藏或显示的时候，会根据当前滚动的距离，自动选择是隐藏还是显示。