Android Material Design控件使用（一）

最新推荐文章于 2024-04-27 11:23:57 发布

gujunhe

最新推荐文章于 2024-04-27 11:23:57 发布

阅读量1.4k

点赞数 3

分类专栏： Android高级开发-高级UI 文章标签： android

本文链接：https://blog.csdn.net/Lbsssss/article/details/126294377

版权

Android高级开发-高级UI 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是Material Design

Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

Tip: 在Android5.0最引人注意的就是MaterialDesign设计风格 Material Design：谷歌拿出媲美苹
果的设计过去Google的产品线，每一个都相当的独立，在产品的设计上反映得尤为明显，甚至不
必看产品设计，只要看一下Google每款产品的LOGO都能发现许多不同风格的设计。这种混乱难
以体现出Google的风格，如果Google的风格不是混乱和无序的话。 2011年，拉里·佩奇成为 Google
CEO之后，他管理公司的政策从过去的自由、放任，变为紧密、整合。根据我们的报道，
在Google发展的早期，因为鼓励观点的碰撞，结果发展成一种不留情面的争论氛围，高管之间冲
突不断，甚至会拒绝合作。佩奇决心要改变公司的氛围，2013年2月，在纳帕山谷的卡内罗斯客
栈酒店里，他对所有Google高管说，Google要实现10倍的发展速度，要用全新的方法来解决问
题，因此高管之间要学会合作。从现在开始，Google要对争斗零容忍。

Material Design不再让像素处于同一个平面，而是让它们按照规则处于空间当中，具备不同的维度
Material Design还规范了Android的运动元素
Material Design更加倾向于用色彩来提示

Google 发布的Material Design语言更像是一套界面设计标准

Z轴

在Material Design主题当中给UI元素引入了高度的概念，视图的高度由属性Z来表示，决定了阴影的视觉效果，Z越大，阴影就越大且越柔和。但是Z值并不会影响视图的大小。
视图的Z值由两个分量表示：

Elevation：静态的分量
Translation：用于动画的动态的分量

Z值的计算公式为： Z=elevation+translationZ

通过在xml布局文件当中给一个视图设置android:elevation属性，来设置视图的高度。当然我们也
可以在代码当中使用View.setElevation()来给视图设置高度。
还可以在代码当中设置视图的translationZ分量:View.setTranslationZ()。
新的ViewPropertyAnimator.z()以及ViewPropertyAnimator.translationZ()方法能够很容易的改变
视图的高度。关于这个动画的更多信息，参考ViewPropertyAnimator以及PropertyAnimation相关的API。
还可以给视图设置Android:StateListAnimator属性来设置视图的状态改变动画，比如当点击按钮
的时候改变其translationZ分量的值。
Z值的单位是dp

Material Design的一些theme

Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar

Toolbar

https://developer.android.com/reference/com/google/android/material/packages
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 主题

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”
可以通过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个顶层（底部）目的地导航到时，可以使用此模式。

创建一个菜单资源，最多5个导航目标（BottomNavigationView不支持超过5个项目）；
在内容下面放置BottomNavigationView； 3. 将BottomNavigationView上的app：menu属性设置为菜单资源；
设置选择监听事件setOnNavigationItemSelectedListener(…)
通过app:itemIconTint和app:itemTextColor设置响应用户点击状态。包括Icon以及字体颜色

<!-- 定义bottom_navigation_colors--> 、
<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:color="@color/colorAccent" android:state_checked="true" /> 
<item android:color="@android:color/white" android:state_checked="false" /> 
</selector>
 <!-- 添加引用 
app:itemIconTint="@drawable/bottom_navigation_colors" 
app:itemTextColor="@drawable/bottom_navigation_colors" -->

设置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自身特性），主内容区的内容可以随着菜单
的点击而变化

抽屉式导航栏是显示应用主导航菜单的界面面板。当用户触摸应用栏中的抽屉式导航栏图标或用
户从屏幕的左边缘滑动手指时，就会显示抽屉式导航栏
抽屉式导航栏图标会显示在使用 DrawerLayout 的所有顶级目的地上。顶级目的地是应用的根级
目的地。它们不会在应用栏中显示向上按钮。
要添加抽屉式导航栏，请先声明 DrawerLayout 为根视图。在 DrawerLayout 内，为主界面内容
以及包含抽屉式导航栏内容的其他视图添加布局。
例如，以下布局使用含有两个子视图的 DrawerLayout：包含主内容的 NavHostFragment 和适用
于抽屉式导航栏内容的 NavigationView