投稿
  1. 首页
  2. app

Android基础知识 - AppbarLayout

《程序员》编辑部 • 2022-5-21 • app • 阅读 19

Android基础知识 - AppbarLayout,第1张

本篇文章完全借鉴如下博文，自己在博客里重新记录下。

https://www.jianshu.com/p/bbc703a0015e

AppbarLayout AppbarLayout效果展示AppbarLayoutxml源码效果重点代码解释scrollFlags设置动作 CollapsingToolbarLayoutCollapsingToolbarLayout添加控件沉浸式设计

AppbarLayout效果展示 在Toolbar的基础上，我们还要学习如何实现Toolbar的收缩和扩展效果。如下效果：
要实现这样的效果，需要用到：CoordinatorLayout 和 AppbarLayout 的配合，以及实现了 NestedScrollView 的布局或控件。AppbarLayout 是一种支持响应滚动手势的app bar布局，CollapsingToolbarLayout 则是专门用来实现子布局内不同元素响应滚动细节的布局。与 AppbarLayout 组合的滚动布局 (RecyclerView，NestedScrollView等) 需要设置app:layout_behavior-"@string/appbar_scrolling_view_behavior"，没有设置的话，AppbarLayout 将不会响应滚动布局的滚动事件。 AppbarLayout xml源码 

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:title="我用什么把你留住"
            app:titleTextAppearance="@style/ToolbarTitle"
            android:theme="@style/fhy_action"
            app:popupTheme="@style/ToolbarPopupTheme"
            app:layout_scrollFlags="scroll"/>
    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">
        <TextView
            android:id="@+id/content"
            android:layout_margin="16dp"
            android:padding="16dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:lineSpacingMultiplier="2"
            android:text="@string/textContent"/>
        
        
        
        
    androidx.core.widget.NestedScrollView>


androidx.coordinatorlayout.widget.CoordinatorLayout>
效果

可以看到 随着文本往上滚动，顶部的Toolbar也往上滚动，直到消失。随着文本往下滚动，一直滚到文本的第一行露出来，Toolbar也逐渐露出来。 再解释重点代码之前，说一下自己相对于原博文Toolbar部分代码的改动，
共有三部分不同：第一部分：增加一条属性：app:titleTextAppearance="@style/ToolbarTitle" ，这是用来设置标题字体的大小和颜色的。具体查看ToolbarTitle内部代码：
第二部分，设置android:theme属性为自定义主题fhy_action，具体查看fhy_action内部代码：
第三部分，设置app:popupTheme属性为自定义主题ToolbarTitle，具体查看ToolbarTitle内部代码：主要是设置overflow按钮d出的菜单背景颜色和位置。 重点代码解释 从上面的布局中可以看到，其实在整个父布局CoordinatorLayout下面，是由2个子布局的： AppbarLayoutNestedScrollViewNestedScrollView先放一边，我们来看AppbarLayoutAppbarLayout继承自LinearLayout，布局方向为垂直方向。所以你把它可以当做垂直布局的LinearLayout来使用。AppbarLayout是在LinearLayout上加了一些材料设计的概念，它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。 注意： 上面提到的“某个可滚动View”，可以理解为某个ScrollView，当某个ScrollView发生滚动时，你可以定制你的“顶部栏”应该执行哪些动作（如跟着一块滚动、保持不懂等等）。这里某个ScrollView就是NestedScrollView或者实现了NestedScrollView机制的其他控件，如RecylerView，它有一个布局行为 layout_behavior：app:layout_behavior="@string/appbar_scrolling_view_behavior"这是一个系统behavior，从字面意思就可以看到，是为appbar设置滚动动作的一个behavior，没有这个属性的话，Appbar就是死的，有了它就有了灵魂。我们可以通过给Appbar下的子View添加 app:layout_scrollFlags 来设置各子View执行的动作，scrollFlags可以设置的动作如下： scrollFlags设置动作 scroll : app:layout_scrollFlags="scroll"值设为scroll的View会跟随滚动事件一起发生移动。就是当指定的ScrollView发生滚动时，该View也跟随一起滚动，就好像这个View也是属于这个ScrollView一样。上面的效果就是设置了scroll之后的： 随着文本往上滚动，顶部的Toolbar也往上滚动，直到消失。随着文本往下滚动，一直滚到文本的第一行露出来，Toolbar也逐渐露出来。 enterAlways: app:layout_scrollFlags="scroll|enterAlways"值设为enterAlways的View，当任何时候ScrollView往下滚动时，该View会直接往下滚动。而不用考虑ScollView是否滚动到最顶部（第一行）还是哪里。效果如下：
exitUntilCollapsed: 值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的高度达到它的最小高度后，再响应ScrollView的内部滑动事件。理解的话，就是在ScrollView往上滑动时，首先是View把滑动事件“夺走”，由View去执行滑动，直到滑动最小高度后，把这个滑动事件“还”回去，让ScrollView内部去上滑。 
   <androidx.appcompat.widget.Toolbar
       ......
       android:layout_height="?attr/actionBarSize"
       android:minHeight="20dp"
       app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
效果图：
看着有些不协调，Toolbar没有完全显示出来，改动下android:layout_height属性和android:minHeight属性 
    <androidx.appcompat.widget.Toolbar
        ......
        android:layout_height="150dp"
        android:minHeight="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
效果图：
enterAlwaysCollapsed: 是enterAlways的附加选项，一般根enterAlways一起使用，它是指，View在往下“出现”的时候，首先是enteAlways效果，当View的高度达到最小高度时，View就暂时不去往下滚动，知道ScrollView滑动到顶部不再滑动时，View再继续往下滑动，直到滑到View的顶部结束。 
   <androidx.appcompat.widget.Toolbar
       ......
       android:layout_height="150dp"
       android:minHeight="?attr/actionBarSize"
       app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>
效果图：
注意: Toolbar的默认最小高度时"?attr/actionBarSize"，很多时候可以不同设置，而且从gif图中可以看出，其实这里有个缺陷，就是title的位置和toolbar上的图标行脱离了。后面讲解的 CollapsingToolbarLayout 可以解决这个问题，先丢出来。 snap: 就是Child View滚动比例的一个吸附效果，也就是说，Child View不会存在局部显示的情况，滚动Child View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕，有点类似ViewPage的左右滑动。 
  <androidx.appcompat.widget.Toolbar
      ......
      android:layout_height="?attr/actionBarSize"
      app:layout_scrollFlags="scroll|snap"/>
效果图：
CollapsingToolbarLayout CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠（其实就是看起来像伸缩）的AppBar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。CollapsingToolbarLayout主要包括几个功能： 折叠Title（Collapsing title）：当布局内容全部显示出来时，title是最大的，但是随着View逐步溢出屏幕顶部，title变得越来越小。你可以通过调用setTitle方法来设置title。内容纱布（Content Scrim）：根据滚动的位置是否到达一个阈值，来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片，默认contentScrim是colorPrimary的色值。状态栏纱布（Status bar Scrim）：根据滚动位置是否到达一个阈值决定是否对状态栏“盖上纱布”，你可以通过setStatusBarScrim(Drawable)来设置纱布图片，但是只能在LOLLOPOP设备上面有作用。默认statusBarScrim是colorPrimaryDark的色值。视差滚动子View（Parallax scrolling children）：子view可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一些）。将布局参数app:layout_collapseMode设为：parallax。将子View位置固定（Pinned position children）：子View可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。将app:layout_collapseMode设为：pin。 更改布局如下： 

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="150dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/fhy_action"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            
            
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:elevation="4dp"
                app:title="我用什么把你留住"
                app:popupTheme="@style/ToolbarPopupTheme"
                app:layout_collapseMode="parallax"/>

        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">
        <TextView
            android:id="@+id/content"
            android:layout_margin="16dp"
            android:padding="16dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:lineSpacingMultiplier="2"
            android:text="@string/textContent"/>
        
        
        
        
    androidx.core.widget.NestedScrollView>


androidx.coordinatorlayout.widget.CoordinatorLayout>
将原本属于Toolbar的几个属性移动到了CollapsingToolbarLayout上，分别是：android:theme="@style/fhy_action" 、app:layout_scrollFlags="scroll|exitUntilCollapsed"同时给Toolbar增添了一个折叠模式属性：app:layout_collapseMode="parallax"效果图如下：
可以看到折叠区域是默认黑色，我们可以给折叠区域加上背景色：
效果如下：
可以看到这时Toolbar区域背景色和折叠区域背景色对比鲜明。 以上的折叠模式，导致Toolbar的顶部图标没了，我们更改下折叠模式：app:layout_collapseMode="pin" 效果图：
我们继续把layout_scrollFlags属性更改下app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways" 效果图
效果蛮不错的，有了点Goole Material Design的感觉了。 CollapsingToolbarLayout添加控件 上面说CollapsingToolbarLayout是个ViewGroup，那么肯定还可以添加控件，那么我们在里面添加一个ImageView来看看，更改布局如下： 

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorAccent"
            android:theme="@style/fhy_action"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/background"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>
            
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:background="@color/colorPrimary"
                android:layout_height="?attr/actionBarSize"
                app:title="我用什么把你留住"
                app:popupTheme="@style/ToolbarPopupTheme"
                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">
        <TextView
            android:id="@+id/content"
            android:layout_margin="16dp"
            android:padding="16dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:lineSpacingMultiplier="2"
            android:text="@string/textContent"/>
        
        
        
        
    androidx.core.widget.NestedScrollView>


androidx.coordinatorlayout.widget.CoordinatorLayout>
效果图
有些意思了，但不美观，Toolbar和折叠区的图片不协调，去掉Toolbar默认的背景属性
效果图
给CollapsingToolbarLayout属性设置contentScrim属性 注意，同时需要把layout_scrollFlags属性修改下，如下所示：
app:layout_scrollFlags="scroll|exitUntilCollapsed" app:contentScrim="@color/colorPrimary"效果如下所示：
沉浸式设计 现在很多APP比较喜欢采用沉浸式设计，简单点就是将状态栏和导航栏都设置成透明或半透明的。我们来把状态栏statusBar设置成透明，在style主题中的AppTheme里增加一条。
在布局里面，将ImageView和所有它上面的父View都添加成 fitsSystemWindows 属性 

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        ...
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            ...
            android:fitsSystemWindows="true">
            <ImageView
                ...
                android:fitsSystemWindows="true"/>
            
            <androidx.appcompat.widget.Toolbar
                .../>

        com.google.android.material.appbar.CollapsingToolbarLayout>
    com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        ...>
        <TextView
            .../>
       
    androidx.core.widget.NestedScrollView>
androidx.coordinatorlayout.widget.CoordinatorLayout>
效果图：自己感觉效果表示不是明显，就不继续往下写了。以上的AppbarLayout知识点已经足够自己用了。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/992386.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
《程序员》编辑部 《程序员》编辑部 一级用户组
0 0
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表（0条）

保存