AndroidUI——CoordinatorLayout与CollapsingToolbarLayout实现ToorBar折叠效果

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

Prozac1996

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

阅读量449

点赞数

分类专栏： android

本文链接：https://blog.csdn.net/qq_22683747/article/details/89521371

版权

本文介绍了如何利用CoordinatorLayout和CollapsingToolbarLayout在Android中实现ToolBar随着滑动自动隐藏，提升用户体验。通过设置特定的属性如`layout_scrollFlags`，`appbar_scrolling_view_behavior`等，可以创建一个可以上滑出去的Toolbar。进一步使用CollapsingToolbarLayout，结合ImageView和适当的参数配置，如`contentScrim`、`expandedTitleMargin`和`layout_scrollFlags`，可以完成折叠效果。最后，讨论了`layout_collapseMode`对Toolbar子布局的影响。

摘要由CSDN通过智能技术生成

可见区域的大小在移动设备中是非常重要的，有的时候我们在滑动list的时候，上方的ToolBar可以自动隐藏掉，从而使得下方的可见区域变大，提升用户体验，先看一下最终的效果：
在这里插入图片描述
我们一步一步来完成这个过程。

使用CoordinatorLayout来搞一个可以上滑出去的Toolbar

xml代码还是用的前几个的结构，只需要改造部分属性就可以了。
将包裹的布局改为CoordinatorLayout
在Toolbar中设置属性 app:layout_scrollFlags=“scroll|enterAlways”
其中scroll 代表Toolbar可以在viewPager上滑时是否可以划出屏幕。
enterAlways代表无论下方viewPager下滑时是否滑到顶部，只要上滑就把Toolbar显示出来。
viewPager设置属性app:layout_behavior="@string/appbar_scrolling_view_behavior"
为android已经定义好的一个滑动时的行为。

<?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/main_container"
    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&#