新版本特性—— 一、Android 5.0、6.0控件学习整理

前言

基于上篇文章Android 5.0之后的各版本与日常开发相关的内容整理,本篇文章对Android5.0和6.0新增的控件做个简单的概述,都有哪些新增控件,能做什么样的效果,怎么简单地使用,更详细的用法可看其他的文章。
看这篇文章建议下载DViewSummary,可以看到示例代码。

简述

新增控件如下
1、CardView、RecyclerView、SwipeRefreshLayout、TabLayout、NavigationView、Snackbar、FloatingActionButton
2、TextInputLayout、TextInputEditText
3、CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、ToolBar
在整理学习时可以简单地把这些归为其他,与EditText相关,与和滚动效果相关,实际上并没有这样的分法,只是为了一眼看出哪些与哪些有关联。

控件 简述
CardView 5.0推出的带圆角和阴影的布局,继承自FrameLayout,在cardview-v7中。阴影效果不佳,不常用。
RecyclerView 是用来代替ListView和GridView,在recyclerview-v7中。常用。
SwipeRefreshLayout 下拉刷新控件,没有加载更多功能,在v4包中。
TabLayout 选项卡,是一个用于放置水平Tab的布局,常见和viewpager、fragment搭配。常用,几乎每个app首页都能看到。
NavigationView 导航视图,用于DrawerLayout抽屉布局中,侧拉拉出的那部分页面就是NavigationView,它提供一个规范,包含一个header和menu布局,在desgin包中。
Snackbar 提示信息的展示,用来代替Toast,从底部滑出,主要区别是Snackbar可以滑动退出,也可以处理用户交互(点击)事件,在design包中。很少见到这效果。
FloatingActionButton 一个悬浮的按钮,简称FAB,比较常见的是在要滚动的页面,浮现一个点击置顶的FAB,在design包中。

EditText相关
TextInputLayout继承自LinearLayout,TextInputEditText继承自AppCompatEditText,都在design包中。

控件 简述
TextInputLayout 主要是作为EditText的容器,它能做的功能有Hint字符串自动移到左上角,设置最大字符数及错误提示,设置错误提示文字,设置密码可见开关等。
TextInputEditText 用来处理输入法在'extract'模式的时候,hint无法显示问题。用TextInputLayout时,如果用EditText虽然不至于报错,但会打印info建议我们替换成TextInputEditText。

和滚动效果相关

控件 简述
CoordinatorLayout CoordinatorLayout是一个布局管理器,主要用通过Behavior协调子View交互行为。
AppBarLayout 是一种支持响应滚动手势的app bar布局,例如可以做折叠导航栏。
CollapsingToolbarLayout 是专门用来实现子布局内不同元素响应滚动细节的布局,作为AppBarLayout的直接子布局。
ToolBar 工具栏(标题栏),代替ActionBar,在appcompat-v7包中。

ConstraintLayout

ConstraintLayout 是在2016年Google的I/O大会上重点宣传的功能,Android Studio 2.2 也是那时候发布的,从 2.2 开始就支持ConstraintLayout,而从Android Studio 3.0开始,创建Project 默认布局也改成它了。其实按时间线来看,它应该算是Android 7.0出的功能,Android7.0就是2016年出的。最近ConstraintLayout2.0也出来了,这里不去管2.0,先了解ConstraintLayout是什么东西。

ConstraintLayout 继承自ViewGroup,好处两点:
1、方便可视化移动布局(就是直接拖动控件)
2、有效解决布局嵌套过多问题,用了约束的方式制定各个控件位置和关系,类似RelativeLayout,但比RelativeLayout强大。(功能是很强大,但还是要看情况使用)

知识点
1、相对定位——layout_constraintXXX_toYYYOf,如layout_constraintLeft_toRightOf是指在B控件的左边在A控件的右边。
2、角度定位,layout_constraintCircle 相关,以控件为圆心,设定转过的角度和距离,可以用这个实现一些圆行轨迹相关的View,比如圆形菜单。
3、margin和goneMargin区别在于goneMargin是控件为gone时才生效的,两者都是必须在布局里约束一个相对位置才生效,且margin>=0。
4、居中和偏移,如水平居中如下,竖直居中同理。
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
5、尺寸约束
1)官方推荐使用 0dp (MATCH_CONSTRAINT) 代替 match_parent,因为设置match_parent会导致约束布局失效,如果该方向上没有约束,使用match_parent也可以。
2)宽高比,当宽或高至少有一个尺寸被设置为0dp时,可以通过属性layout_constraintDimensionRatio设置宽高比。
6、链
在链的第一个控件,用 app:layout_constraintHorizontal_chainStyle = "spread"控制链的样式。
spread:展开元素,默认
spread_inside:展开元素,但端的两端贴近
packed:元素往中间缩在一起
7、辅助工具
Barrier:在多个控件的一侧建立一个屏障。
Group:把多个控件归为一组,方便隐藏或显示一组控件。
Placeholder:在Placeholder中可使用setContent()设置另一个控件的id,使这个控件移动到占位符的位置。

结语
复杂的布局再用ConstraintLayout,如果是简单的还是用LinearLayou或RelativeLayout,它们的测量更快。可以用它做一些有意思的布局,比如用角度定位做圆形菜单,宽高比也可以很方便处理适配布局变形问。

参考
约束布局ConstraintLayout看这一篇就够了

ToolBar

工具栏(标题栏),代替ActionBar,继承于ViewGroup,如果不用v7包的,那么minSdkVersion最小要21(Android 5.0)。它包含的可选元素有导航按钮、logo、标题和子标题、多个视图、动作菜单(action menu)。

常用
一般开发中都会要标题居中,可以在ToolBar中放置一个TextView来实现。如果需要在工具栏右边放置一些按钮,如分享按钮、购物车跳转按钮等,可以用结合menu文件来实现。如果要做更多菜单的弹窗,菜单弹窗的menuItem宽度无法限定,也可以考虑用PopWindow实现。

炫酷的效果
可以搭配AppBarLayout、CoordinatorLayout、
CollapsingToolbarLayout 来实现一些炫酷的折叠效果。它有app:layout_scrollFlags熟悉,有5中滑动属性,具体可看后面的AppBarLayout。

结语
用ToolBar做标题栏方便,但menu和menu之间的间距很难调整,更多弹窗的样式也不好定义。用v7包的toolbar,这样menu.xml设置showAsAction才会生效。

CardView、RecyclerView、SwipeRefreshLayout

CardView
5.0出的带圆角和阴影的布局,继承自FrameLayout,用法简单,有如下常用属性。

属性名 作用
app:cardBackgroundColor 设置背景
app:cardCornerRadius 设置圆角
app:cardElevation 设置z轴高度,来控制阴影大小
app:cardMaxElevation 设置最大z轴高度
app:contentPadding 设置内边距
app:cardPreventCornerOverlap 是否裁剪边界以防止重叠
app:cardUseCompatPadding 如果您需要将CardView与其他视图对齐,可能在21以下,可以将此标志设置为true,CardView将在21之后的平台上添加相同的填充值

RecyclerView
用来代替ListView和GridView,可以实现很多强大的功能。

SwipeRefreshLayout
是系统提供的下拉刷新控件,它不支持上拉加载,要做上拉加载,可以考虑用RecyclerView的滚动监听,判断当前可见Item是否是最后一个item,是则显示Adapter里的footer布局。

结语
RecyclerView常用,它的Adapter推荐用BaseRecyclerViewAdapterHelper来做;SwipeRefreshLayout几乎没用过,推荐用SmartRefreshLayout 来做下拉刷新上拉加载。CardView没用过,因为往往UI要的是只有下边有阴影,而它的阴影是下左右都有的,且没办法改变阴影的颜色,可能用来做圆角方便,虽然这也只是写一个drawable的事。

参考
MaterialDesign系列文章(九)CardView的使用及适配
SwipeRefreshLayout+Recyclerview实现下拉刷新和上拉自动加载

FloatingActionButton

FloatingActionButton(FAB)是 Android 5.0 新特性——Material Design中的一个控件,其实就是一个悬浮的按钮。

常用属性

属性名 作用
android:src FAB中显示的图标
android:backgroundTint 正常的背景颜色
app:rippleColor 按下时的背景颜色
android:elevation 正常的阴影大小
app:pressedTranslationZ 按下时的阴影大小
app:fabSize FAB的大小,normal(56dp)或mini(40dp)
app:borderWidth 边框大小,最好设置成0dp否则会有边框
app:layout_anchor 设置FAB的锚点,即以哪个控件为参照设置位置
app:layout_anchorGravity FAB相对于锚点的位置

结语
比较少用,但使用场景还是有的,曾经在相亲类app的用户主页用到过,一个爱心icon的FAB,点击表示喜欢她。还有某些要滚动,有很长内容的详情页,提供一个FAB点击滚到顶部。

Snackbar

Snackbar 是 Android 5.0 新特性——Material Design 中的一个控件,用来代替 Toast ,Snackbar与Toast的主要区别是:Snackbar可以滑动退出,也可以处理用户交互(点击)事件。
不需要在xml文件布局,一般用CoordinatorLayout作为它的父容器,这样才能使某些功能政策,如滑动关闭,不音响FAB等,此外还可以在Snackbar中添加一个按钮,处理用户点击事件,可以监听显示隐藏状态等。
没用过,不知道具体应用场景,详情可看这篇文章,android Snackbar新控件解析

NavigationView

NavigationView是导航视图,它是搭配DrawerLayout抽屉布局使用的,侧拉拉出的那部分页面就是NavigationView。其实它只是一种布局格式,上面有header,下面有menu,看起来好看一些而已,平时使用也可以不用它,自己定义一个布局。

常用属性

属性名 作用
android:layout_gravity 侧滑从哪边划出(start:左,end:右)
app:headerLayout 头布局文件
app:menu 菜单文件

结语
DrawerLayout、NavigationView、menu搭配,menu要实现好看的效果比较困难,详情可看看这两篇文章:
安卓NavigationView使用方法
DrawerLayout 和 NavigationView到底是什么?

TextInputLayout、TextInputEditText

TextInputLayout 继承 LinearLayout,主要是作为EditText的父容器,它只能有一个EditText,且它的属性也只对EditText生效,如果在它里面添加其他View,则只是addView()进去而已。常见的功能有Hint字符串自动移到左上角,设置最大字符数及错误提示,设置错误提示文字,设置密码是否可见等。
TextInputEditText 作为EditText的子类,是为TextInputLayout设计的一个子容器,输入法在'extract'模式的时候,使用TextInputEditText会显示提示。源码不多,就是处理Hint显示而已。如果用TextInputLayout时,用EditText虽然不至于报错,但会打印info建议我们替换成TextInputEditText。

常用属性

属性名 作用
app:hint 设置浮动提示语,在EditText或 til中选一个设置即可
app:hintEnabled 设置是否开启浮动功能,默认为true
app:hintAnimationEnabled 设置是否开启浮动提示动画,默认为true
app:errorEnabled 设置是否开启错误提示
app:counterEnabled 设置是否开启计数器
app:counterMaxLength 设置计数器的最大长度,超过并不影响输入,但是计数字符串会变色
app:counterOverflowTextAppearance 设置超出字符数后提示文字的颜色,默认为@color/colorAccent
app:passwordToggleEnabled 设置是否开启密码可见开关(EditText必须为password类型才起作用)
app:passwordToggleDrawable 设置密码可见/不可见开关的图标
app:boxBackgroundColor til的背景色,如果用android:background设置背景色,那么boxCornerRadiusXXX等效果就失效了
app:boxBackgroundMode 3种,filled、outline、none。其实Til和Et之间是有一个间距的,用来显示上移的hint,filled的时候,这个间距也在Box范围内;outline则是把间距取消了,hint会覆盖在Box上。
app:boxCornerRadiusTopStart 背景的圆角,左上角
app:boxCornerRadiusTopEnd 右上角
app:boxCornerRadiusBottomStart 左下角
app:boxCornerRadiusBottomEnd 右下角

结语
由属性可发现,遇到需要计数器、显示密码是否可见开关、EditText圆角的时候,使用TextInputLayout方便完成。
参考:
这应该是最够用的TextInputLayout了
TextInputLayout TextInputEditText

TabLayout

TabLayout是比较常用的控件,是一个用于放置水平Tab的布局,常和viewpager、fragment搭配使用。
常用属性

属性名 作用
app:tabTextColor tab文字颜色,未选中
app:tabSelectedTextColor tab文字颜色,选中
app:tabIndicatorColor 指示条颜色
app:tabIndicatorHeight 指示条高度
app:tabMode fixed、scrollable。fixed是指固定tab;scrollable是指tab可滑动,在tab数量超出屏幕范围的时候可看到效果。
app:tabGravity center和fill;center是指居中显示,fill是指占满全屏。在app:tabMode=“fixed”才会生效。

用法
TabLayout经常和ViewPager使用,两者是通过TabLayout.setupWithViewPager(viewPager)绑定在一起的。实际上,是setupWithViewPager()方法底层调用PagerAdapter中的getPageTitle()方法来实现联系。
注意,setupWithViewPager 会执行 removeAllTabs,然后重新new Tab,所以要在关联之前不要去newTab,在关联之后,也不要去newTab,而是用getTabAt 方法来设置title,或者在PagerAdapter的getPageTitle()返回标题。

结语
TabLayout和ViewPager很常用,但我们经常遇到要修改指示条宽度的时候,比如要求指示条比文字短一点点,且各个Tab的文字长度不一样。这种情况如果打算修改TabLayout的指示条就比较难改了,网上有提供的反射方法去修改,效果却不理想,指示条变短,它的宽度变短,文字会变小。
如果要做很炫酷的效果,可用
FlycoTabLayoutSmartTabLayout

CoordinatorLayout

CoordinatorLayout (协调布局)继承于ViewGroup,它是一个超级强大Framelayout,是用来协调其子view之间动作的一个父view,而Behavior就是用来给CoordinatorLayout的子view们实现交互的,系统提供了一些behavior,也可以自定义behavior。

AppBarLayout

AppBarLayout 继承自LinearLayout,布局方向为垂直方向,它是在LinearLayou上加了一些材料设计的概念,当某个可滚动View的滚动手势发生变化时,其内部的子View实现何种动作。

简单例子
让Toolbar随着NestedScrollView滚动
步骤:
1、根布局:CoordinatorLayout (因为它才支持app:layout_behavior)
2、可折叠部分:AppBarLayout 包裹 ToolBar,ToolBar 设置了
app:layout_scrollFlags="scroll"
3、滚动部分:NestedScrollView 设置了app:layout_behavior="@string/appbar_scrolling_view_behavior",这是一个系统behavior,字面意思是为appbar设置滚动动作的一个behavior。

由此可看,我们要知道
1、app:layout_scrollFlags 是什么,它有哪些值。
2、app:layout_behavior是什么,它有哪些值。(系统提供了一些behavior,也可以自定义behavior。)

app:layout_scrollFlags
app:layout_scrollFlags 是每个控件都有的属性,它有5种滑动属性(还有一个snapMargins不知是什么效果,网上没找到这个的解释),实际上可以尝试组合看看效果,比如scroll | enterAlways | snap。

作用
scroll 值为scroll的View会跟随滚动事件一起发生移动。
scroll | enterAlways 当任何时候ScrollView往下滚动时,该View优先滚动,全部滚动出来后,再滚动ScrollView。而不用考虑ScrollView是否滚动到最顶部。
scroll | exitUntilCollapsed 当这个View要往上逐渐“消逝”时,会一直往上滑动,直到剩下的的高度达到它的最小高度后,再响应ScrollView的内部滑动事件。
scroll | enterAlways | enterAlwaysCollapsed 是enterAlways的附加选项,要和enterAlways一起使用,否则没有效果,它是指View在往下“出现”的时候,首先是enterAlways效果,当View的高度达到最小高度时,View就暂时不去往下滚动,直到ScrollView滑动到顶部不再滑动* 时,View再继续往下滑动,直到滑到View的顶部结束。
scroll | snap 设置吸附性效果,当你滚动TabLayout不足一半高度的时候就会回弹,高于一半的时候就会全部隐藏

参考
AppbarLayout最详细使用说明

CollapsingToolbarLayout

折叠工具栏布局。
CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠(其实就是看起来像伸缩~)的App Bar效果。它需要放在AppBarLayout布局里面,并且作为AppBarLayout的直接子View。

主要功能

作用 设值
折叠Title(Collapsing title) title随着布局内容变小而变小 Collapsing的setTitle比Toolbar的优先级高
内容纱布(Content scrim) 根据滚动的位置是否到达一个阀值,来决定是否对View“盖上纱布” setContentScrim(Drawable),默认值为colorPrimary
状态栏纱布(Status bar scrim) 根据滚动位置是否到达一个阀值,来决定是否对状态栏“盖上纱布” setStatusBarScrim(Drawable),默认值为colorPrimaryDark
视差滚动子View(Parallax scrolling children) 让View的滚动的速度比其他正常滚动的View速度稍微慢一点 app:layout_collapseMode=“parallax”
将子View位置固定(Pinned position children) 子View可以选择是否在全局空间上固定位置 app:layout_collapseMode=“pin”

简单例子
看看折叠Title、设置app:layout_collapseMode=“parallax”
和app:layout_collapseMode=“pin”时的效果。

关键代码:

<android.support.design.widget.AppBarLayout   
android:layout_width="match_parent"   
android:layout_height="150dp">    

<android.support.design.widget.CollapsingToolbarLayout       
android:layout_width="match_parent"       
android:layout_height="match_parent"        
app:title="CTitle"       
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"      
app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

<android.support.v7.widget.Toolbar           
android:id="@+id/toolbar"           
android:layout_width="match_parent"           
android:layout_height="44dp"           
android:background="@color/colorPrimaryDark"  
app:title="Title"           
app:layout_collapseMode="pin"           
app:navigationIcon="@drawable/back_icon" >

</android.support.v7.widget.Toolbar>    
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

效果图.jpg

结语
1、Collapsing设置的title优先级比Toolbar高,且titleColor在Collapsing设置才有效。
2、CollapsingToolbarLayout 设置了app:layout_scrollFlags="scroll|exitUntilCollapsed", Toolbar的Height就是它的minHeight。
3、常用都是Toolbar 设置 app:layout_collapseMode="pin"固定。
4、在Collapsing下可以放入多个子View,如在Toolbar之前放入ImageView,可以实现图片收缩。
5、常见的滚动到一定高度,标题栏变色,可以通过设置Collapsing的app:contentScrim="xxx"来实现。
6、常见的图片置顶,可以设置状态栏为透明色,且将ImageView和所有它上面的父View都添加fitsSystemWindows属性,再设置Collapsing的app:statusBarScrim="@android:color/transparent"来实现。
注意,这种情况下可能会遇到Title只显示上面一半的问题,可以通过设置setSupportActionBar(toolbar)恢复正常,具体原因不知。

参考
AppbarLayout最详细使用说明

结尾

这篇文章,介绍了5.0、6.0的新增控件,对它们进行个初步的讲解,有兴趣的可以去结合Demo一同进行学习。
Github地址:DViewSummary

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,383评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,522评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,852评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,621评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,741评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,929评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,076评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,803评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,265评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,395评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,039评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2 350

推荐阅读更多精彩内容