Android Material Design UI方案使用讲解

Material Design 系列

  1. Material Design UI方案使用讲解
  2. Material TextInputLayout使用详解
  3. Material ShapeableImageView 使用详解

博客创建时间:2022.05.23
博客更新时间:2023.05.07

以Android studio build=7.0.0,SDKVersion 31来分析讲解。如图文和网上其他资料不一致,可能是别的资料版本较低而已。


前言

统观Material Design,Google设计的Material Components不仅仅是实现了Android的开发规范,实际上Flutter、Web,甚至是iOS,都统一了开发范式,所以了解过Material Components的开发者会发现不论是Android还是Flutter,它们上面都有着类似的影子,大家可以看看文档。

Material Design官方 Demo:https://material.io/develop/android

官方说明文档:https://material.io/develop/android

github官网地址:https://github.com/material-components/material-components-android


项目创建

使用新版本的Android studio 创建的项目现在是默认支持AndroidX库&Material Design的。打开项目你会发现如下配置

1. material 库依赖

	dependencies {

    implementation 'androidx.appcompat:appcompat:1.4.1'
    。。。
    implementation 'com.google.android.material:material:1.6.0'
  	。。。
	}

2. style 主题使用material风格
在这里插入图片描述

其他的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

3. 颜色说明

	colorPrimary:应用的主要品牌颜色,最常用于主题
	colorPrimaryVariant:您的主要品牌颜色的较浅/较深变体,在主题中很少使用
	colorOnPrimary:用于显示在原色之上的元素的颜色(例如,文本和图标,通常为白色或半- 透明黑色,具体取决于可访问性)
	colorSecondary:您的应用的辅助品牌颜色,主要用作某些需要突出的小部件的重点
	colorSecondaryVariant:您的辅助品牌颜色的较浅/较深变体,在主题中很少使用
	colorOnSecondary:用于显示在辅助颜色之上的元素的颜色
	colorError:用于错误的颜色(通常是红色阴影)
	colorOnError:用于显示在错误颜色之上的元素的颜色
	colorSurface:用于表面的颜色(即材料“片材”)
	colorOnSurface:用于显示在表面颜色之上的元素的颜色
	colorBackground:所有其他屏幕内容背后的颜色
	colorOnBackground:用于显示在背景颜色之上的元素的颜色

风格对比

以自己的项目demo来对比,左边图片是实际运行效果,右边图片是布局预览效果。
在这里插入图片描述
当你使用MaterialComponents 主题时,在控件使用的颜色就会失去作用,如设置
背景色或字体颜色。

android:background="@color/color1"
android:onClick="@{click}"
android:text="蒙层color1"
android:textColor="@color/white"

这是google 为了界面的UI主题颜色的一种方案,每个控件如果颜色没有设置,则默认根据theme中设定的颜色来显示。

  1. 当然如果你需要保持原有的风格,格局控件的设置的背景色和文字颜色来显示UI,则可以对每个Activity单独设置Theme。

  2. 如果项目向正式用MaterialComponents 主题,但是某个Activity的某些UI需要自定义风格,某些继续保持Material 风格,则可以尝试使用Bridge主题。

    <style name="Theme.CodeAanalysis" 	parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge">
    Theme.MaterialComponents.XXXXX.Bridge 是一种变种theme,专为解决前后版本的兼容性问题。
    

总结

Material Design 提供了大量的UI控件且丰富了UI风格,这里有我总结的一系列Material控件的使用总结,欢迎阅读。
有兴趣可以查看源码源码Demo>>
在这里插入图片描述

优秀的参考链接:

  1. https://github.com/ricknout/rugby-ranker
  2. https://github.com/ricknout/android-mdc-theming

相关链接

  1. Material Design UI方案使用讲解
  2. Material TextInputLayout使用详解
  3. Material ShapeableImageView 使用详解

扩展链接:

  1. Android CameraX 使用入门
  2. Android 今日头条屏幕适配详细使用攻略
  3. Android 史上最新最全的ADB及命令百科,没有之一

博客书写不易,您的点赞收藏是我前进的动力,千万别忘记点赞、 收藏 ^ _ ^ !

  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值