Android学习之CoordinatorLayout+AppBarLayout
•AppBarLayout
简介
AppbarLayout 是一种支持响应滚动手势的 app bar 布局;
基本使用
新建一个项目,命名为 TestAppBarLayout;
修改 activity_main.xml 中的代码;
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll"
app:title="Title"
/> </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"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="测试数据1"
android:textSize="20sp" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="测试数据2"
android:textSize="20sp" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="测试数据3"
android:textSize="20sp" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="测试数据4"
android:textSize="20sp" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="测试数据5"
android:textSize="20sp" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="测试数据6"
android:textSize="20sp" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="测试数据7"
android:textSize="20sp" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="测试数据8"
android:textSize="20sp" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="测试数据9"
android:textSize="20sp" /> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="30dp"
android:text="测试数据10"
android:textSize="20sp" />
</LinearLayout>
</androidx.core.widget.NestedScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout>AppbarLayout 继承了 LinearLayout(默认的 AppBarLayout 是垂直方向),它的作用是把 AppBarLayout 包裹的内容都作为 AppBar;
说白了它的出现就是为了和 CoordinatorLayout 搭配使用,实现一些炫酷的效果的;
没有CoordinatorLayout,它和Linearlayout没区别;
细心的你会发现,Toolbar 多了一个属性 app:layout_scrollFlags="scroll" ,
该属性是 AppBarLayout 的直接子控件可以设置,有多个取值:
app:layout_scrollFlags="scroll"
- 值设为 scroll 的 View 会跟随滚动事件一起发生移动
- 就是当指定的 NestedScrollView 发生滚动时,该 View 也跟随一起滚动
- 就好像这个 View 也是属于这个 NestedScrollView 一样
app:layout_scrollFlags="scroll|enterAlways"
- 当任何时候 NestedScrollView 往下滚动时,Toolbar 会直接往下滚动
- 而不用考虑 NestedScrollView 是否滚动到最顶部
- 也就是说只要向下滚动 Toolbar 就会显示出来,只要向上滑动 Toolbar 就会向上收缩
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
- 向下滚动 NestedScrollView 到最底端时 Toolbar 才会显示出来
app:layout_scrollFlags="scroll|exitUntilCollapsed"
- Toolbar 往上逐渐 “消失” 时,会一直往上滑动
- 直到剩下的的高度达到它的最小高度后,再响应 NestedScrollView 的内部滑动事件
- 修改 Toolbar 的 android:layout_height="100dp"
需要注意的是与 AppBarLayout 组合的滚动布局(RecyclerView, NestedScrollView等),
需要设置 app:layout_behavior="@string/appbar_scrolling_view_behavior" ;
@string/appbar_scrolling_view_behavior 是一个系统字符串,
值为 android.support.design.widget.AppBarLayout$ScrollingViewBehavior ;
唯一的作用是把自己(使用者)放到 AppBarLayout 的下面,你可以尝试去掉这句话看看效果如何;
去掉该属性,并设置 app:layout_scrollFlags="scroll" ,android:layout_height="?attr/actionBarSize"
运行效果
设置 $app:layout\_behavior$ 属性 不设置 $app:layout\_behavior$ 属性
•扩展
我们可以在 AppBarLayout 中包含 Toolbar 和 ImageView;
然后只给 ImageView 设置 app:layout_scrollFlags=”scroll” 属性,Toolbar 不设置;
修改 activity_main.xml 中的代码;
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"> <ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll"
android:src="@drawable/luffy"
android:scaleType="centerCrop"
/> <androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Title"
/> </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">
<LinearLayout
......
</LinearLayout>
</androidx.core.widget.NestedScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout>运行效果
•声明
参考资料
Android学习之CoordinatorLayout+AppBarLayout的更多相关文章
- Android学习之CoordinatorLayout+FloatingActionButton+Snackbar
CoordinatorLayout •简介 CoordinatorLayout 协调布局,可以理解为功能更强大的 FrameLayout 布局: 它在普通情况下作用和 FrameLayout 基本一致 ...
- Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)
在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚 ...
- [Android] Android利用Coordinatorlayout+AppbarLayout实现折叠式布局
折叠式布局在App中相当常见,给人一种科技感,充满良好的用户体验. 本文就以两个简单的例子,来举例说明基本折叠式布局: 首先需要在app/build.gradle下添加如下依赖: compile 'c ...
- CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout使用
本文介绍Design Support Library中CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout的使用. 先列出了Design S ...
- android.support.design.widget.AppBarLayout 在android5.0+底部显示空白条问题
在最外层使用 RelativeLayout作为根节点,同时设置 android:fitsSystemWindows="true"问题解决. <?xml version=&qu ...
- Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
ok,今天继续更新Material Design系列!!! 废话不说,先看看效果图吧: 好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件: CoordinatorLayout 该控件也是De ...
- Android学习路线总结,绝对干货
title: Android学习路线总结,绝对干货 tags: Android学习路线,Android学习资料,怎么学习android grammar_cjkRuby: true --- 一.前言 不 ...
- Android 学习资源
下面这些资源对Android开发来说是很有帮助的! 最常用的: Android开发官方网站:http://developer.android.com/index.html 这个网站应该是Android ...
- Android学习资料收集
1.Android 学习之路 http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/
随机推荐
- 高阶函数 HOF & 高阶组件 HOC
高阶函数 HOF & 高阶组件 HOC 高阶类 js HOC 高阶函数 HOF 函数作为参数 函数作为返回值 "use strict"; /** * * @author x ...
- 使用 js 实现一个简易版的 drag & drop 库
使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...
- vue3 deep dive
vue3 deep dive vue core vnode vue core render / mount / patch refs https://www.vuemastery.com/course ...
- 2019 front-end job Interview
2019 front-end job Interview 2019 前端面试题 掘金 https://juejin.im/tag/面试 https://juejin.im/post/5c875791e ...
- H5 直播 & App 直播
H5 直播 & App 直播 polyv 直播 https://github.com/polyv 宝利威 直播 https://www.polyv.net/live/ SDK https:// ...
- 观点纠正,yarn和npm对比,今天yarn仍然比npm快吗
yarn和npm的区别和对比,网上很多了,不多说了. 只纠正一个观点:yarn仍然比npm快吗?不. 2016年,yarn刚刚发布,速度确实比npm快,于是网络上出现了好多推荐yarn的文章. 于是很 ...
- 09、IO流—File类与IO流
目录 一.File类 基本认识 实用方法 获取功能 重命名功能(包含剪切) 判断功能 创建.删除文件 实际小案例 二.IO流 1.认识IO流 2.IO流基类介绍 字节流基类介绍 字符流基类介绍 三.节 ...
- Spring中的@Enable注解
本文转载自SpringBoot中神奇的@Enable注解? 导语 在SpringBoot开发过程,我们经常会遇到@Enable开始的好多注解,比如@EnableEurekaServer.@Enable ...
- 微信小程序中input标签高度设置
如果没有设置高度所以显示的是控件自身的高度. 微信小程序input控件原始设置: 上图发现: 我只覆盖了官方input的height,而没有覆盖min-height; .query input{ bo ...
- SpringBoot以war包形式部署到外部Tomcat
SpringBoot 项目打包时能打成 .jar 与 .war包文件,.jar使用 java -jar xx.jar 就可以启动,而 .war 可以部署到tomcat的 webapps 中,随tomc ...