Material Design
Android5.0最引人MaterialDesign设计风格
Z轴
在Material Design主题当中给UI元素引入了高度的概念，视图的高度由属性Z来表示，决定了阴影的视觉效果，Z越大，阴影就越大且越柔和。但是Z值并不会影响视图的大小。Material Design引入的控件都有这个属性
视图的Z值由两个分量表示：
1. Elevation：静态的分量
2. Translation：用于动画的动态的分量
Toolbar
Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍。如：
设置导航栏图标
设置App的logo
支持设置标题和子标题
支持添加一个或多个的自定义控件
支持Action Menu
在布局文件中设置
app:navigationIcon 设置navigation button
app:logo 设置logo 图标
app:title 设置标题
app:titleTextColor 设置标题文字颜色
app:subtitle 设置副标题
app:subtitleTextColor 设置副标题文字颜色
app:popupTheme Reference to a theme that should be used to inflate popups - shown by widgets in the toolbar.
app:titleTextAppearance 设置title text 相关属性，如：字体,颜色，大小等等
app:subtitleTextAppearance 设置subtitletext相关属性，如：字体,颜色，大小等等
app:logoDescription logo 描述
android:background Toolbar 背景
android:theme 主题
总结：
初衷是好的，但是在实际开发过程中，大多使用自定义view的情况来实现TopBar的需求，因为实际的需求是多变的。
FloatingActionButton
FloatingActionButton是一个继承ImageView悬浮的动作按钮，经常用在一些比较常用的操作中，一个页面尽量只有一个FloatingActionButton，否则会给用户一种错乱的感觉！FloatingActionButton的大小分为标准型(56dp)和迷你型(40dp)，google是这么要求的，如果你不喜欢可以自己设置其他大小。并且对于图标进行使用materialDesign的图标，大小在24dp为最佳！
android:src 设置相应图片
app:backgroundTint 设置背景颜色
app:borderWidth 设置边界的宽度。如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果。
app:elevation 设置阴影效果
app:pressedTranslationZ 按下时的阴影效果
app:fabSize 设置尺寸normal对应56dp，mini对应40dp
app:layout_anchor 设置锚点，相对于那个控件作为参考
app:layout_anchorGravity 设置相对锚点的位置 top/bottom之类的参数
app:rippleColor 设置点击之后的涟漪颜色
Snackbar
Snackbar就是一个类似Toast的快速弹出消息提示的控件，手机上显示在底部，大屏幕设备显示在左侧。但是在显示上比Toast丰富，也提供了于用户交互的接口
BottomAppBar
Material Design的一个重要特征是设计 BottomAppBar。可适应用户不断变化的需求和行为，So，BottomAppBar是一个从标准物质指导的演变。它更注重功能，增加参与度，并可视化地锚定UI要求Activity的主题必须是MaterialComponents的主题。
style="@style/Widget.MaterialComponents.BottomAppBar"（要求Activity的主题必须是MaterialComponents的主题 否则失效）
可以通过FabAlignmentMode，FabCradleMargin，FabCradleRoundedCornerRadius和FabCradleVerticalOffset来控制FAB的放置；
（FabAlignmentMode）可以设置为中心或结束。如果FabAttached设置为True，那么Fab将被布置为连接到BottomAppBar；
FabCradleMargin是设置FAB和BottomAppBar之间的间距，改变这个值会增加或减少FAB和
BottomAppBar之间的间距；
FabCradleRoundedCornerRadius指定切口周围角的圆度；
FabCradleVerticalOffset指定FAB和BottomAppBar之间的垂直偏移量。如果fabCradleVerticalOffset为0，则FAB的中心将与BottomAppBar的顶部对齐。
NavigationView
NavigationView表示应用程序的标准导航菜单，菜单内容可以由菜单资源文件填充。NavigationView通常放在DrawerLayout中，可以实现侧滑效果的UI。DrawerLayout布局可以有3个子布局，第一个布局必须是主界面且不可以不写，其他2个子布局就是左、右两个侧滑布局，左右两个侧滑布局可以只写其中一个。
如图这个意思，只加了一个侧滑
android:layout_gravity 值为start则是从左侧滑出，值为end则是从右侧滑出
app:menu NavigationView是通过菜单形式在布局中放置元素的，值为自己创建的菜单文件
app:headerLayout 给NavigationView设置头文件
app:itemTextColor 设置菜单文字的颜色
app:itemIconTint 设置菜单图标的颜色
app:itemBackground 设置菜单背景的颜色
BottomNavigationView
BottomNavigationView创建底部导航栏，用户只需轻点一下即可轻松浏览和切换顶级内容视图，当项目有3到5个顶层（底部）目的地导航到时，可以使用此模式。
1. 创建一个菜单资源 ，最多5个导航目标（BottomNavigationView不支持超过5个项目，超过5个会抛出异常）；
2. 在内容下面放置BottomNavigationView；
3. 将BottomNavigationView上的app：menu属性设置为菜单资源；
4. 设置选择监听事件setOnNavigationItemSelectedListener(...)
5. 通过app:itemIconTint和app:itemTextColor设置响应用户点击状态。包括Icon以及字体颜色
如图设置
设置style
style="@style/Widget.Design.BottomNavigationView" 默认的材质。BottomNavigationView样式由更新的颜色，文字大小和行为组成。默认的
BottomNavigationView具有白色背景以及带有颜色的图标和文本colorPrimary
style="@style/Widget.MaterialComponents.BottomNavigationView.Colored" 此样式继承默认样式，但将颜色设置为不同的属性。 使用彩色样式获取带有colorPrimary背景的底部导航栏，并为图标和文本颜色添加白色阴影。
style="@style/Widget.Design.BottomNavigationView" 如果希望底部导航栏具有旧行为，可以在BottomNavigationView上设置此样式。 但是，还是建议尽可能使用更新后的Material style
DrawerLayout
DrawerLayout是V4 Library包中实现了侧滑菜单效果的控件，可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后，google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化。
1. 抽屉式导航栏是显示应用主导航菜单的界面面板。当用户触摸应用栏中的抽屉式导航栏图标或用户从屏幕的左边缘滑动手指时，就会显示抽屉式导航栏
2. 抽屉式导航栏图标会显示在使用 DrawerLayout 的所有顶级目的地上。顶级目的地是应用的根级目的地。它们不会在应用栏中显示向上按钮。
3. 要添加抽屉式导航栏，请先声明 DrawerLayout 为根视图。在 DrawerLayout 内，为主界面内容以及包含抽屉式导航栏内容的其他视图添加布局。
一般和NavigationView一起使用，使用参考NavigationView。结合完成侧滑抽屉式需求
CardView
Material Design中有一种很个性的设计概念：卡片式设计（Cards），Cards拥有自己独特的UI特征,CardView 继承自FrameLayout类，并且可以设置圆角和阴影，使得控件具有立体性，也可以包含其他的布局容器和控件。
card_view:cardCornerRadius 设置角半径
CardView.setRadius 要在代码中设置角半径，请使用
card_view:cardBackgroundColor 设置卡片的背景颜色
card_view:cardElevation 设置Z轴阴影高度
card_view:cardMaxElevation 设置Z轴阴影最大高度
card_view:cardUseCompatPadding 设置内边距
card_view:cardPreventCornerOverlap 在v20和之前的版本中添加内边距，这个属性是为了防止卡片内容和边角的重叠
Chips
Chip代表一个小块中的复杂实体，如联系人。 它是一个圆形按钮，由一个标签，一个可选的芯片图标和一个可选的关闭图标组成。 如果Chip可检查，则可以点击或切换Chip。
Chip可以被放置在ChipGroup中，其可以被配置为将其Chip布置在单个水平线中或者重新排列在多个线上。如果一个ChipGroup包含可检查的Chip，那么它也可以控制其一组Chip是否单选。也可以在需要Drawable的上下文中直接使用独立的ChipDrawable
主题设置
tyle="@style/Widget.MaterialComponents.Chip.Entry"： 默认在末尾展示删除按钮；点击后前面展示选中图标，有选中状态 通常可以作为 chipDrawable 使用，比如在填选邮件收件人时可以
使用
style="@style/Widget.MaterialComponents.Chip.Filter"： 使用
style="@style/Widget.MaterialComponents.Chip.Filter" 初始状态下， 不展示前后图标 点击之后会展示前面的选中图标，并且具有选中状态 通常应用在 ChipGroup 中
style="@style/Widget.MaterialComponents.Chip.Choice"： 默认不展示前后的图标，但点击后有选中状态 通常用在 ChipGroup 中 , 通过 ChipGroup 的 singleSelection=true/false 属性可以实现单选或多选
style="@style/Widget.MaterialComponents.Chip.Action"
不设置style时，默认使用上述style 默认前后图标都不展示，点击后没有选中状态Chip 的属性
输入和选项卡结合的实现
Material Button
Material Button是具有更新视觉样式的可自定义按钮组件，且内部内置了多种样式。解决大多数情况下drawable样式需求。
app:backgroundTint //背景着色
app:backgroundTintMode//着色模式
app:strokeColor//描边颜色
app:strokeWidth//描边宽度
app:cornerRadius//圆角大小
app:rippleColor//按压水波纹颜色
app:icon//图标（注：位置只能在文本左侧）
app:iconSize//图标大小
app:iconGravity//图标重心（start
app:iconTint//图标着色
app:iconTintMode//图标着色模式
app:iconPadding//图标和文本之间的间距
TextInputLayout&TextInputEditText
android:hint 提示文字
app:counterEnabled 是否添加计数功能，默认是false
app:counterMaxLength 最大的输入数量（如果计数显示的话，影响显示）
app:errorEnabled 是否有错误提示
app:errorTextAppearance 设置错误提示的文字样式
app:hintAnimationEnabled 是否设置提示文字的动画
app:hintEnabled 是否启动浮动标签功能，如果不启用的话，所有提示性信息都将在Edittext中显示
app:hintTextAppearance 设置提示性文字的样式
app:passwordToggleContentDescription 该功能是为Talkback或其他无障碍功能提供
app:passwordToggleEnabled 是否显示后面的提示图片
app:passwordToggleDrawable 替换后面的提示图片
app:passwordToggleTint 给后面的提示图片设置颜色
app:passwordToggleTintMode 控制密码可见开关图标的背景颜色混合模式
app:counterOverflowTextAppearance 设置计算器越位后的文字颜色和大小(通过style进行设置
的)
app:counterTextAppearance 设置正常情况下的计数器文字颜色和大小(通过style进行设置的)
总结
一般我们使用的比较少，因为这里需求都是定制的
TabLayout
app:tabBackground 设置TableLayout的背景色
app:tabTextColor 设置未被选中时文字的颜色
app:tabSelectedTextColor 设置选中时文字的颜色
app:tabIndicatorColor 设置滑动条的颜色
app:tabTextAppearance="@android:style/TextAppearance.Large" 设置TableLayout的文本主题，无法通过textSize来设置文字大小，只能通过主题来设定
app:tabMode="scrollable" 设置TableLayout可滑动，当页数较多时，一个界面无法呈现所有的导航标签，此时就必须要用。
Bottom Sheet
Bottom Sheet是Design Support Library23.2 版本引入的一个类似于对话框的控件，可以暂且叫做底部弹出框吧。 Bottom Sheet中的内容默认是隐藏起来的，只显示很小一部分，可以通过在代码中设置其状态或者手势操作将其完全展开，或者完全隐藏，或者部分隐藏
有两种类型的Bottom Sheet：
1. Persistent bottom sheet :- 通常用于显示主界面之外的额外信息，它是主界面的一部分，只不过默认被隐藏了，其深度（elevation）跟主界面处于同一级别；还有一个重要特点是在Persistentbottom sheet打开的时候，主界面仍然是可以操作的，其实Persistent bottom sheet不能算是一个控件，因为它只是一个普通的布局在CoordinatorLayout这个布局之下所表现出来的特殊行为。所以其使用方式跟普通的控件也很不一样，它必须在CoordinatorLayout中，并且是CoordinatorLayout的直接子view
app:layout_behavior="@string/bottom_sheet_behavior"，定义了这个属性就相当于告诉了CoordinatorLayout这个布局是一个bottom sheet，它的显示和交互都和普通的view不同。@string/bottom_sheet_behavior是一个定义在支持库中的字符串，等效于
android.support.design.widget.BottomSheetBehavior
Bottom Sheets具有五种状态：
STATE_COLLAPSED： Bottom Sheets是可见的，但只显示可视（部分）高度。此状态通常是底部工作表的“静止位置”。可视高度由开发人员选择，应足以表明有额外的内容，允许用户触发某个动作或扩展Bottom Sheets；STATE_EXPANDED： Bottom Sheets是可见的并且它的最大高度并且不是拖拽或沉降；
STATE_DRAGGING：用户主动向上或向下拖动Bottom Sheets；
STATE_SETTLING： 拖动/轻扫手势后，Bottom Sheets将调整到特定高度。这将是可视高度，展开高度或0，以防用户操作导致底部表单隐藏；
STATE_HIDDEN： Bottom Sheets隐藏。如果已经在Activity使用CoordinatorLayout，添加底部表单很简单：
1. 将任何视图添加为CoordinatorLayout的直接子视图。
2. 通过添加以下xml属性来应用该行为
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
3. 设置所需的行为标志
app:behavior_hideable：是否可以通过拖拽隐藏底部表单。
app:behavior_peekHeight：折叠状态的窥视高度。
app:behavior_skipCollapsed：如果底部表单可隐藏，并且设置为true，则表单不会处于折叠状态
bottom sheet的状态是通过BottomSheetBehavior来设置的，因此需要先得到BottomSheetBehavior对象，然后调用BottomSheetBehavior.setState()来设置状态，比如设置为折叠状态BottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED)； 我们还可以通过BottomSheetBehavior.getState() 来获得状态。
要监听bottom sheet的状态变化则使用setBottomSheetCallback方法，之所以需要监听是因为bottomsheet的状态还可以通过手势来改变
2. 模态bottom sheet :- 顾名思义，模态的bottom sheet在打开的时候会阻止和主界面的交互，并且在视觉上会在bottom sheet背后加一层半透明的阴影，使得看上去深度（elevation）更深
总结
使用popwindow和dialog亦可实现此效果，且更为灵活。
CollapsingToolbarLayout
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承自FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。默认contentScrim是colorPrimary的色值，statusBarScrim是colorPrimaryDark的色值。
CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode）
off：默认属性，布局将正常显示，无折叠行为。
pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。
parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。
当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~1
网友评论