失眠网 > Android Material Design UI方案使用讲解

Android Material Design UI方案使用讲解

时间：2020-02-28 20:56:48

Material Design 系列

Material Design UI方案使用讲解Material TextInputLayout使用详解Material ShapeableImageView 使用详解

Material Design

<font color=#FF7E17>前言<font color=#FF7E17> 项目创建<font color=#FF7E17> 风格对比<font color=#FF7E17> 总结

博客创建时间：.05.23

博客更新时间：.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官网地址：/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.MaterialComponentsTheme.MaterialComponents.NoActionBarTheme.MaterialComponents.LightTheme.MaterialComponents.Light.NoActionBarTheme.MaterialComponents.Light.DarkActionBarTheme.MaterialComponents.DayNightTheme.MaterialComponents.DayNight.NoActionBarTheme.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中设定的颜色来显示。

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

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

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