IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 号称最难用的布局CoordinatorLayout实现标题栏折叠吸顶 -> 正文阅读

[移动开发]号称最难用的布局CoordinatorLayout实现标题栏折叠吸顶

1 CoordinatorLayout

CoordinatorLayout最常用的场景就是实现View之间的联动效果,例如标题栏的扩展、吸顶等效果,都可以通过CoordinatorLayout来实现,但是其中涉及到的技术点也比较多

2 CoordinatorLayout和AppBarLayout

通过CoordinatorLayout和AppBarLayout,可以实现简单的列表与标题栏之间的联动效果,那么我不使用AppBarLayout,直接只用ToolBar可以吗?

答案是不可以的,因为想要标题栏做一滑动的效果,需要借助一个属性app:layout_scrollFlags,通过设置这个属性,才可以实现一些滑动的效果

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".fragment.MineFragment">
    
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:title="我的"
            app:subtitle="次级标题"
            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="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/rv_mine"
           android:layout_width="match_parent"
           android:layout_height="match_parent"/>

   </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2.1 layout_scrollFlags

需要注意的是,scroll可以单独使用,但是其他的属性必须要配置scroll使用才可以,使用 | 分割

类型效果
scroll标题栏作为列表的头部,可随列表滑出屏幕,等到列表往回滑到顶部后,AppBarLayout才出现
enterAlways上滑作为头部滑出屏幕,下滑时,先完全展示AppBarLayout,再滑动列表
enterAlwaysCollapsed跟enterAlways基本一致,只是下滑时,会先展示AppBarLayout的最小高度,等到列表完全展示之后,才显示全部的AppBarLayout
exitUntilCollapsedAppBarLayout不会完全消失,会保留最小高度

2.2 layout_behavior

只有通过设置layout_behavior才可以实现AppBarLayout和列表的滑动,但是列表需要通过NestedScrollView包裹一下,因为com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior只是针对AppBarLayout和NestedScrollView的联动效果

3 CollapsingToolbarLayout

CollapsingToolbarLayout是可折叠的布局,折叠的内容就是AppBarLayout内包裹的内容,可以给AppBarLayout设置特定的高度

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

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

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            
            <!--CollapsingToolbarLayout内部包裹的全部组件的高度,就是AppBarLayout的高度-->

            <ImageView
                android:layout_width="100dp"
                android:layout_height="80dp"
                android:src="@drawable/player"/>

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:layout_collapseMode="pin"
                app:title="我的" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <!-- TODO: Update blank fragment layout -->
   <androidx.core.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/rv_mine"
           android:layout_width="match_parent"
           android:layout_height="match_parent"/>

   </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

CollapsingToolbarLayout需要设置layout_scrollFlags,实现想要的效果;

如果设置ToolBar的layout_collapseMode为”pin“,那么就可以实现ToolBar吸顶的效果

4 自定义Behavior

后续会讲

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-12-11 15:50:25  更:2021-12-11 15:52:59 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 7:15:30-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码