Android Material Design新UI控件使用大全 三

发布时间:2021-10-16 15:26:45

序言

在我们对NavigationView侧滑,TextInputLayout输入框,Snackbar弹出提示框,FloatingActionBar圆形button,TabLayout顶部导航栏及CoordinatorLayout有了一定的了解后,我们最后将对AppBarLayout,CollapsingToolbarLayout进行最后的分析,我们先看两张效果图,(因为暂时没找到好的方法来录制gif,先借用网上的图)



AppBarLayout

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,默认的AppBarLayout是垂直方向的,它的作用是把AppBarLayout所包裹的内容都作为AppBar, 支持手势滑动操作,可以管理其中的控件在内容滚动时的行为,如图所示:




实现这样效果的代码布局如下:


android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />

android:id="@+id/appbar_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="@android:color/white" app:tabSelectedTextColor="@android:color/holo_red_light"
app:tabGravity="fill" />




注意:这里我们将Toolbar和TabLayout共同组成AppbarLayout的内容,并且AppbarLayout必须作为ToolBar的父布局


CoordinatorLayout与AppbarLayout的结合使用

我们知道,AppBarLayout是支持我们的手势滑动操作的,不过需要跟CoordinatorLayout一起搭配使用,我们先看两张效果图,然后再进行分析:



左侧是我们初始化的代码,从上至下分别为Toolbar,TabLayout,ViewPager,底部为一个FloatingActionBar,我们现在来看一下xml文件布局的代码:



xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />

android:id="@+id/appbar_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="@android:color/white"
app:tabSelectedTextColor="@android:color/holo_red_light"
app:tabGravity="fill" />




android:id="@+id/appbar_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:borderWidth="0dp"
android:layout_margin="20dp"
android:src="@drawable/floating_icon" />





我们现在来分析一下整个布局中CoordinatorLayout的作用:


    因为CoordinatorLayout是一个超级的FrameLayout,所以我们只要设置android:layout_gravity="bottom|end"这个属性即可将FloatingActionBar放置在底部靠右的位置;

    如果我们想要在手指向上滑动的时候Toolbar隐藏,就需要给Toolbar设置一个属性,app:layout_scrollFlags="scroll|enterAlways",来确定滚动出屏幕时候的动作,我们现在来解释一些这些参数:


    scroll: 所有想滚动出屏幕的view**都需要**设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。例如,TabLayout 没有设置这个值,将会停留在屏幕顶部。enterAlways: 配合scroll使用,设置这个flag时,任意向下的滚动都会导致该view变为可见,当向上滑的时候Toolbar就隐藏,下滑的时候显示,启用快速“返回模式”。enterAlwaysCollapsed: 这个flag定义的是何时进入(已经消失之后何时再次显示),配合scroll使用,当你的视图已经设置minHeight属性又使用此标志时,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候完全展开。exitUntilCollapsed: 这个flag是定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。注意:这些flag的模式一般是前两个一起使用或者 scroll与enterAlwaysCollapsed 一起使用,而最后一个flag只有在CollapsingToolbarLayout中才有用,所以这些flag的使用场景,一般都是固定的;

    当然,为了使Toolbar可以滚动,还需要一个条件,就是CoordinatorLayout布局下需要包裹一个可以滑动的布局,比如 RecyclerView或者NestedScrollView(ListView及ScrollView不支持),CoordinatorLayout包含的子布局中带有滚动属性的View需要设置app:layout_behavior属性。示例中Viewpager设置了此属性:app:layout_behavior="@string/appbar_scrolling_view_behavior",这样一来AppBarLayout就能响应RecyclerView中的滚动事件,CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了;


总结:如果想让Toolbar划出屏幕,需要做到以下4点


    CoordinatorLayout作为顶层的父布局需要给Toolbar也就是想要划出屏幕的view设置flag值,app:layout_scrollFlags=”scroll|enterAlways”需要给可滑动的组件设置一个layout_behavior的属性,示例中为viewpager,app:layout_behavior="@string/appbar_scrolling_view_behavior"可滑动的组件目前经测试支持RecyclerView,NestedScrollView,示例中viewpager中包含的就是一个RecyclerView

CollapsingToolbarLayout?可折叠的Toolbar

我们知道如果在某些详情页面,我们只是在AppbarLayout中使用了可隐藏/展示的Toolbar的话, 只能固定到屏幕顶端并且不能做出好的动画效果,而且无法控制不同元素如何响应collapsing(折叠)的细节,所以为了达到此目的,CollapsingToolbarLayout就应运而生.


CollapsingToolbarLayout一般都是需要包括一个Toolbar,这样就可以实现一个可折叠的Toolbar,一般都是作为AppbarLayout的子view使用,CollapsingToolbarLayout的子视图类似于LinearLayout垂直方向排放。


CollapsingToobarLayout的属性及用法:


    Collapsing title:ToolBar的标题,CollapsingToolbarLayout和Toolbar在一起使用的时候,title会在展开的时候自动变得比较大,而在折叠的时候让字体变小过渡到默认值。注意,你必须在CollapsingToolbarLayout上调用setTitle(),而不是在Toolbar上进行设置。Content scrim:ToolBar被折叠到顶部固定时候的背景,你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。Status bar scrim:状态栏的背景,调用方法setStatusBarScrim(Drawable)。Parallax scrolling children:CollapsingToolbarLayout滑动时,子视图的视觉因子,可以通过属性app:layout_collapseParallaxMultiplier=”0.7”来改变。值的范围[0.0,1.0],值越大视差越大。 CollapseMode :子视图的折叠模式,需要在子视图设置;

    “pin”:固定模式,在折叠的时候最后固定在顶端;“parallax”:视差模式,在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。layout_anchor : 这个是CoordinatorLayout提供的属性,与layout_anchorGravity 一起使用,可以用来放置与其他视图关联在一起的悬浮视图(如 FloatingActionButton)或者头像

我们先来看看实现的效果图:




我们现在看看布局文件的写法:



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="suericze.coordinatoreps.CollapsingToobar.CollapsingToobarActivity">

android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp">

android:id="@+id/collapsing_collaps_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="?attr/colorPrimary"

>

android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@mipmap/example"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.6" />

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>






android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">





android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/floating_icon"
app:backgroundTintMode="multiply"
app:layout_anchor="@id/appbar"
android:layout_margin="20dp"
app:layout_anchorGravity="bottom|end|right"/>





注意:


    我们使用了下面的参数设置了FloatingActionButton的位置,两个属性共同作用使得浮动按钮可以随着手势能折叠消失和展现。

    app:layout_anchor=”@id/appbar”
    app:layout_anchorGravity=”bottom|right|end”

    AppBarLayout 的高度layout_height固定,不能 “wrap_content”,如果不固定的话动画效果不友好

    CollapsingToolbarLayout的子视图设置layout_collapseMode属性关联悬浮视图设置app:layout_anchor,app:layout_anchorGravity属性

源码地址: GitHub
OK,到这里我们已经将Materil Design的常用控件介绍完毕,下次我们将对自定义的Behavior进行解析,我们将会实现更加酷炫好看的效果,愿大家都有美好的一天…

相关文档

  • 魅族魅蓝note6缺点
  • 好闺蜜生日祝贺词感动
  • 吴迪结婚怎么打起来了
  • 酒店客服人员辞职信范文
  • C51中~XBYTE 简介
  • [原创]对于“优盘变成了RAW的文件系统,双击提示需要格式化,右键查看属性是0字节,也无法打开”的解决办法...
  • 新加坡留学选校三个必看
  • 【点分治】树的重心
  • 幼儿园中班科学教案《纸》
  • 北师大小学六年级数学下册教学计划
  • 如何鉴别尖锐湿疣与阴茎珍珠状丘疹 尖锐湿疣与扁平湿疣如何区分
  • 旁氏米粹洗面奶怎么样值得购买吗
  • 心内科护士实习总结
  • Word取消目录链接的方法步骤详解
  • 烹饪鸭子的做法
  • 杭州seo:做高质量的友链对网站的好处有什么
  • 走呀走课文教学教案
  • 《诗词曲五首》疑难解析精选
  • 鱼肉的16种做法大全
  • 家庭消防安全计划书
  • 夏季感冒吃它,防空调病吃它,没有胃口也吃它~
  • 简单儿童水彩风景画图片大全
  • 开车怎样才不烧离合片
  • MySQL Connector C++库在VS2010平台连接访问远程MySQL数据库
  • 借助远程教育平台努力提高办学水平——远程教育经验交流材料
  • 荣耀手机没有软件搬家怎么办
  • 用GPU输出Hello Word
  • 化妆的好处与坏处
  • 小学一年级语文识字方法有哪些
  • 秋天女生穿搭图片撩男心机秋天穿搭
  • 猜你喜欢

  • 乙型肝炎病毒母婴传播预防指南ppt课件
  • 如何提高信息技术课堂教学效果2
  • 德阳经开区产业发展投资有限公司(企业信用报告)- 天眼查
  • 福建省龙海市福龙塑胶联营厂企业信用报告-天眼查
  • 飞不高的鸟儿的惩罚
  • 以社会主义荣辱观为指导,加强高职学生价值观教育
  • 藏匿着的母爱
  • 最新整理施工现场防火、防雷的安全技术措施.docx
  • 云南楚雄州东兴中学18-19学度高二上9月抽考-数学(理)
  • 单分支的条件语句
  • 四年级上册语文课件-第四单元 作文 我喜欢的小动物 人教新课标(共35张PPT)
  • 啤酒鸡翅的做法怎么做好吃
  • 广州市正点未来营销策划股份有限公司企业信用报告-天眼查
  • 金融学第六讲风险管理
  • 八年级语文下册课件18吆喝 (共19张PPT)
  • NBA中场、每节休息多长时间
  • 南宁市恋购商贸有限公司企业信用报告-天眼查
  • 小学识字教学方法的种类
  • 吃玉米粥能减肥吗 玉米含有叶酸吗
  • 吴江区松陵镇君客装饰材料经营部企业信息报告-天眼查
  • 中华花龟寿命多长,多大成年
  • 后勤管理员岗位责任制
  • 【附20套中考模拟试题】青海省西宁市大通回族土族自治县2019-2020学年中考数学模拟试卷含解析
  • 2019-要下雨了教案优秀设计五精彩奉献-推荐word版 (4页)
  • 登岳阳楼记读后感3篇
  • 精选--学年上学期四年级班主任德育工作总结
  • 六年级语文下册《为人民服务》教学课件
  • 2015年造价师《案例分析》考试大纲
  • 《爱的教育》读后感_读书笔记900字
  • 2019年温州市中考物理模拟试题与答案
  • 贵州省贵阳市第三十八中学2018_2019学年高三英语上学期期中试题(无答案)
  • 新人教版三年级上册数学第二单元《几百几十加、减几百几十(例3)》参考教案
  • 通用版高考语文二轮复*第1部分核心突破专题6语言文字运用第1讲正确使用成语课件
  • 部编版四年级语文上册课件习作6 记 一次游戏
  • 笔记本上有摄像头吗
  • 2019-2020年一年级语文下册 第四单元 要下雨了教案 人教新课标版
  • 商务汉语词汇量101-200
  • 整理一年级下册看拼音写汉字
  • 商丘市人民政府关于加快推进“互联网+政务服务”实施政务服务“
  • 初一写人作文:我最好的朋友_700字_6
  • 【最新2019】小学四年级下册数学字母表示数课后检测题-推荐word版 (1页)
  • 东莞寮步创基印刷厂企业信息报告-天眼查
  • 电脑版