从AppCompat切换到MaterialComponents一些主题属性介绍

article/2025/10/18 19:00:57

文章目录

    • 前言
      • 主题属性
      • 颜色
      • 排版
      • 字体
      • 形状
      • 小部件
        • Buttons
        • Text Fields
        • Cards
        • Bottom Navigation
    • 后话

前言

絮叨两句，感觉Component这个库有点傲娇，我碰到一个情景，使用Button，设置了background属性，当使用样式是AppCompat时，正常显示背景。但是当我换成MaterialComponents之后，我发现有一些Button背景正常，有一些背景不正常了。我又没用MaterialButton。。。普通写的selector都能给我失效哦。肯定是这个库搞得鬼，然后我看到了backgroundTint这个属性，总之很无语。然后找了篇文章，写了这篇笔记。

主题属性

总而言之在这些里面选就好了，类比Appcompat的，如果您又想迁移，又不想一次获得所有新属性，请使用Theme.MaterialComponents.*.Bridge变体

  • Theme.MaterialComponents
  • Theme.MaterialComponents.NoActionBar
  • Theme.MaterialComponents.Light
  • Theme.MaterialComponents.Light.DarkActionBar
  • Theme.MaterialComponents.Light.NoActionBar

statusBarColor和navigationBarColor属性用了设置状态栏和导航栏颜色。
colorBackground属性用来设置背景色。

备注：属性大家都知道的，format指定为reference的时候，需要输入索引，比如@color/white，但是format指定为color时，可以直接设置16进制的int作为颜色，不要搞错了。

颜色

颜色属性主要包括primary、secondary、error、surface和background颜色，以及它们各自的次要变体和“on”颜色。其中一些已从 AppCompat 主题中重用（例如colorPrimary，colorError和android:colorBackground）：

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

排版

类型属性在文本字体、粗细、大小、大小写和字母间距方面遵循材料类型系统。属性引用实现（并以其命名）各种类型比例的样式：TextAppearance.MaterialComponents.*

  • textAppearanceHeadline1：轻，96sp
  • textAppearanceHeadline2：轻，60sp
  • textAppearanceHeadline3：常规，48sp
  • textAppearanceHeadline4：常规，34sp
  • textAppearanceHeadline5：常规，24sp
  • textAppearanceHeadline6：中，20sp
  • textAppearanceSubtitle1：常规，16sp
  • textAppearanceSubtitle2：中，14sp
  • textAppearanceBody1：常规，16sp
  • textAppearanceBody2：常规，14sp
  • textAppearanceCaption：常规，12sp
  • textAppearanceButton：常规，14sp，全部大写
  • textAppearanceOverline：常规，12sp，全部大写

字体

Android 8.0（API 级别 26）引入了“XML 中的字体”这项新功能，可让您将字体用作资源。您可以在 res/font/ 文件夹中添加 font 文件，将字体捆绑为资源。使用资源也很容易，通过@font/myfont 或 R.font.myfont。

您可以在style属性中，通过fontFamily属性来设置字体。

 <item name="android:fontFamily" >@font/myfont</item>

在程序中设置字体

val typeface = resources.getFont(R.font.myfont)
textView.typeface = typeface

形状

材料组件角可以是圆角（默认）的一部分，也可以是剪切的，可以继承形状主题属性然后修改cornerFamily和cornerSize。

形状属性是指应用程序中每个表面和小部件的一般形式。
形状主题属性参考ShapeAppearance.MaterialComponents.*样式：

  • shapeAppearanceSmallComponent: 用于小元件，如按钮和芯片
  • shapeAppearanceMediumComponent: 用于卡片等中型组件
  • shapeAppearanceLargeComponent：对于大型组件，例如底部板

示例

< style name="AppShapeAppearance.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent" > < item name="cornerFamily" >cut</ item > < item name="cornerSize" >8dp</ item > 
</ style >

然后这个cardView圆角变方了
在这里插入图片描述

小部件

虽然全局主题涵盖了我们的大部分需求，但是有时候是需要单独定义小部件的。

Buttons

  • Widget.MaterialComponents.Button ：默认情况，凸起
  • Widget.MaterialComponents.Button.UnelevatedButton ：非凸起
  • Widget.MaterialComponents.Button.OutlinedButton ：有轮廓（外边框）
  • Widget.MaterialComponents.Button.TextButton ：文本

部分属性：

  • backgroundTint：应用于按钮背景的色调颜色。文本按钮和colorPrimary所有其他变体的默认启用颜色是透明的。
  • iconTint：应用于可选按钮图标的色调。默认启用颜色colorPrimary用于文本按钮和colorOnPrimary所有其他变体。
  • rippleColor：按钮触摸波纹的颜色。默认颜色colorOnPrimary用于凸起/未凸起按钮和colorPrimary轮廓/文本按钮。
  • strokeColor：按钮背景周围的描边颜色。默认颜色colorOnSurface用于带轮廓的按钮，并为所有其他变体透明。
  • strokeWidth：按钮背景周围的描边宽度。轮廓按钮的默认值为 1dp，所有其他变体的默认值为 0dp。
  • shapeAppearance：按钮背景的形状外观。默认值为shapeAppearanceSmallComponent

来个示例

< style name="AppTheme" parent="Theme.MaterialComponents.Light" > ... < item name="materialButtonStyle" >@style/AppButton</ item > 
</ style >
< style name="AppButton" parent="Widget.MaterialComponents.Button" > < item name="backgroundTint" >?attr/colorSecondary</ item > 
</ style >

效果如图
在这里插入图片描述

Text Fields

这里讲的是TextInputLayout和TextInputEditText，样式有2种变体，可选样式目前有8种

  • Widget.MaterialComponents.TextInputLayout.*
  • Widget.MaterialComponents.TextInputEditText.*.

变体具有样式后缀，包括填充框（默认，.FilledBox）和轮廓框（.OutlinedBox）。所有文本字段变体都使用标准文本外观作为输入和textAppearanceCaption“帮助”文本（标签、错误、计数器等）的主题属性。

部分属性：

  • boxBackgroundMode：框背景的模式，可以是filled,outline或none。
  • boxBackgroundColor：文本字段背景的颜色。默认启用的颜色colorOnSurface用于填充的框文本字段和透明的框文本字段。
  • boxStrokeColor：文本字段背景周围的笔触颜色。轮廓框文本字段的默认颜色是（在默认状态下）colorOnSurface，填充的框文本字段将被忽略。
  • hintTextColor/ errorTextColor/ counterTextColor：各种不同的“帮手”文本子组件颜色。
  • shapeAppearance：文本字段背景的形状外观。默认值为shapeAppearanceSmallComponent。

来个示例

< style name="AppTheme" parent="Theme.MaterialComponents.Light" > ... < item name="textInputStyle" >@style/AppTextField</ item > 
</ style >
< style name="AppTextField" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">< item name="boxBackgroundColor" >@color/text_field_background</ item > 
< /style >

效果如图
在这里插入图片描述

Cards

主体样式为 Widget.MaterialComponents.CardView
主要属性：

  • cardBackgroundColor：卡片背景的颜色。默认颜色是colorSurface。
  • cardElevation: 卡的高度。默认值为 1dp。
  • shapeAppearance：卡片背景的形状外观。默认值为shapeAppearanceMediumComponent。

来个示例

< style name="AppTheme" parent="Theme.MaterialComponents.Light" > ... < item name="materialCardViewStyle" >@style/AppCard</ item > 
</ style >
< style name="AppCard" parent="Widget.MaterialComponents.CardView" > < item name="cardElevation" >8dp</ item > 
</ style >

效果如图
在这里插入图片描述

Bottom Navigation

  • Widget.MaterialComponents.BottomNavigationView ：默认样式
  • **Widget.MaterialComponents.BottomNavigationView.PrimarySurface ** ：深色主题支持样式
  • Widget.MaterialComponents.BottomNavigationView.Colored :彩色款式

部分属性

  • backgroundTint：底部导航背景的颜色。默认颜色colorSurface用于表面底部导航和colorPrimary彩色底部导航。
  • itemTextColor/ itemIconTint：底部导航项图标和标签的颜色。表面底部导航和彩色底部导航的默认颜色为colorOnSurface/ colorPrimary（已选择）colorOnPrimary。
  • itemHorizontalTranslationEnabled: 设置在选择底部导航项时是否应出现翻译动画的标志。默认值为假。

来个示例

< style name="AppTheme" parent="Theme.MaterialComponents.Light" > ... < item name="bottomNavigationStyle" >@style/AppBottomNavigation</ item > 
</ style >
< style name="AppBottomNavigation" parent="Widget.MaterialComponents.BottomNavigation.Colored" />

效果如图
在这里插入图片描述

后话

原文：Setting up a Material Components theme for Android
关于更多属性查看项目：material-components-android
关于模板示例项目：material-components-android-examples


http://chatgpt.dhexx.cn/article/QtJolsrS.shtml

相关文章

Gradle编译问题（appcompat和material相关）

Gradle编译问题（appcompat和material相关）

在使用Android Studio编译项目时&#xff0c;发现的编译问题。已解决&#xff0c;在此记录一下 问题1 Cant determine type for tag <macro name"m3_comp_bottom_app_bar_container_color">?attr/colorSurface</macro> 原因是androidx.appcompat:app…
阅读更多...
Android报错之You need to use a Theme.AppCompat theme (or descendant) with this activity.

Android报错之You need to use a Theme.AppCompat theme (or descendant) with this activity.

[TOC](Android报错之You need to use a Theme.AppCompat theme (or descendant) with this activity.) 一、报错如下 原因为&#xff1a;Activty继承自android.support.v7.app.AppCompatActivty,而不是android.app.Activty。 二、解决方法 看一下提示&#xff0c;就是要用Th…
阅读更多...
appcompat_v7项目说明

appcompat_v7项目说明

一、appcompat_v7项目说明 今天来说一下appcompat_v7项目的问题&#xff0c;使用eclipse创建Android项目时&#xff0c;发现project列表中会多创建出一个appcompat_v7项目&#xff0c;这是我搭建最新的Android开发环境创建第一个Android测试项目后发现的&#xff0c;我在创建An…
阅读更多...
Android Studio报错Could not find any version that matches com.android.support:appcompat-v7:33.+.

Android Studio报错Could not find any version that matches com.android.support:appcompat-v7:33.+.

今天用AndroidStudio新建了一个项目&#xff0c;没想到新建项目就爆红了 而且Java代码有标红&#xff0c;cannot reslove symbol"v7" 解决方案&#xff1a; 1.打开build.gradle文件&#xff0c;找到dependencies下 implementation com.android.support:appcompat-…
阅读更多...
Android关于Theme.AppCompat相关问题的深入分析

Android关于Theme.AppCompat相关问题的深入分析

先来看这样一个错误&#xff1a; No resource found that matches the given name style/Theme.AppCompat.Light 对于这个错误&#xff0c;相信大部分Android开发者都遇到过&#xff0c;可能很多朋友通过百度或者Google已经解决了这个问题&#xff0c;但是网上大部分都只给出…
阅读更多...
细说 AppCompat 主题引发的坑：You need to use a Theme.AppCompat theme with this activity！

细说 AppCompat 主题引发的坑：You need to use a Theme.AppCompat theme with this activity！

一般来说按照文档的建议去做&#xff0c;出现问题的概率很低。但很多人的情况不同&#xff0c;每每会发生意外状况&#xff0c;就比如这次没有使用 AppCompat 主题引发的坑&#xff01; AppCompat 框架作为 Jetpack 集合的基石&#xff0c;非常重要。Android Studio 上创建的默…
阅读更多...
Android Jetpack基础组件之AppCompat

Android Jetpack基础组件之AppCompat

1.简介 相比苹果封闭的IOS系统&#xff0c;Android系统的开放性带来了很多的优势。与此同时&#xff0c;也带来了严重的碎片化问题&#xff0c;包括硬件的碎片化和软件碎片化。这里&#xff0c;我们主要说的是软件方面。各Android设备厂商&#xff0c;受限于成本和技术原因&am…
阅读更多...
AppCompat发布两年了，还没了解？

AppCompat发布两年了，还没了解？

近日随笔 近期疫情日渐严峻&#xff0c;大家多多保重&#xff0c;出门记得戴口罩。希望河北&#xff0c;黑龙江能尽早控制住好局面迎来拐点&#xff0c;全国人民过个好年。 为了能够让低版本的Android系统能够运行新特性&#xff0c;AppCompat框架自Support时代就已推出。但随着…
阅读更多...
AppCompat (AppCompatActivity) Jetpack

AppCompat (AppCompatActivity) Jetpack

进入AppCompat章节后&#xff0c;我们发现它又被分为了4个部分&#xff0c;这4个部分被称为“key class”&#xff0c;也就是重点类&#xff0c;它们分别是&#xff1a; ActionBar&#xff1a;提供Actionbar用户界面模式的实现&#xff1b;AppCompatActivity&#xff1a;添加可…
阅读更多...
【5】SpringBoot日志存储路径和设置日志格式

【5】SpringBoot日志存储路径和设置日志格式

SpringBoot日志存储路径和设置日志格式 文章目录 SpringBoot日志存储路径和设置日志格式01、分析02、解决方案03、Springboot的日志的解决方案&#xff08;掌握&#xff09;04、查看springboot的日志的整个体系05、slf4j、logback和log4j三者的关系06、springboot的日志搭配07、…
阅读更多...
nginx日志格式分析及修改

nginx日志格式分析及修改

修改nginx日志打印格式 一. 打开终端&#xff0c;登录服务器并输入服务器密码 //ssh 用户名服务器ip ssh root192.168.0.132二. 切换到nginx目录 cd /var/log/nginx/三. 查看nginx日志 tail -f access.log日志说明&#xff1a; //默认的nginx标准日志格式 192.168.10.251 …
阅读更多...
Nginx配置-日志格式配置

Nginx配置-日志格式配置

Nginx配置-日志格式配置 一、默认的日志格式二、我使用的日志格式三、参数四、测试效果 五一上线了一个小的预约程序&#xff0c;配置通过Nginx进行访问入口&#xff0c;默认的日志是没有请求时间的&#xff0c;因此需要配置一下&#xff0c;将每一次的请求的访问响应时间记录出…
阅读更多...
Apache日志记录格式-LogFormat配置详解

Apache日志记录格式-LogFormat配置详解

Apache日志记录格式-LogFormat配置详解 前言 定制日志文件的格式涉及到三个指令&#xff0c;即LogFormat指令和CustomLog指令和ErrorLog指令&#xff0c;默认httpd.conf文件提供了关于这两个指令的几个示例。 格式设置 LogFormat LogFormat指令定义格式并为格式指定一个名…
阅读更多...
springboot项目中日志使用----自定义日志格式（可直接使用）

springboot项目中日志使用----自定义日志格式（可直接使用）

springboot项目中日志使用 1、为什么加日志 1.1 日志是什么&#xff1f; 日志文件提供精确的系统记录&#xff0c;根据日志最终定位到错误详情和根源。日志的特点是&#xff0c;它描述一些离散的&#xff08;不连续的&#xff09;事件。例如&#xff1a;应用通过一个滚动的文…
阅读更多...
python设置日志格式

python设置日志格式

# %(asctime)s 字符串形式的当前时间。 # %(levelname)s 文本形式的日志级别 # %(name)s Logger的名字 # %(filename)s 调用日志输出函数的模块的文件名 # %(funcName)s 调用日志输出函数的函数名 # %(lineno)d 调用日志输出函数的语句所在的代码行 # %(message)…
阅读更多...
Log4j日志输出格式

Log4j日志输出格式

Log4j日志输出格式 对于我才开始工作来说&#xff0c;输出日志唯一的目的就是打印代码的调试信息&#xff0c;当有项目运行什么问题或者错误可以通过查看日志快速的找到问题根源&#xff08;这也是我来公司最开始就遇到的问题&#xff09;。 先分享一个公司框架自带的通用日志…
阅读更多...
logback 日志输出格式

logback 日志输出格式

强烈推荐一个大神的人工智能的教程&#xff1a;http://www.captainai.net/zhanghan​ 【前言】 日志对一个系统的重要性不言而喻&#xff1b;日志通常是在排查问题时给人看&#xff0c;一个友好的输出样式让人看到后赏心悦目&#xff0c;排查效率通常也会随之提高&#xff1b;…
阅读更多...
Nginx的日志格式

Nginx的日志格式

vim /etc/logstash/conf.d/ filter模块的作用&#xff1a;过滤&#xff0c;{在一个大的真空管里面&#xff0c;中间有一个过滤网&#xff0c;只有比这个小的东西能过去&#xff0c;大的会拦住} 在grok中使用match进行选择&#xff0c;所传送过来的是下面这样。希望把他们变成i…
阅读更多...
什么是日志文件

什么是日志文件

文章目录 什么是日志文件Centos 7 日志文件简易说明日志文件的重要性Linux常见的日志文件文件名/var/log/boot.log/var/log/cron/var/log/dmesg/var/log/lastlog/var/log/maillog或 /var/log/mail/*/var/log/messages/var/log/secure/var/log/wtmp、/var/log/faillog/var/log/h…
阅读更多...
AE2018插件AfterCodecs v1.9.0安装教程,(AE mp4)

AE2018插件AfterCodecs v1.9.0安装教程,(AE mp4)

1.自己百度下载好 2.这2个文件夹要复制&#xff0c;其他可以不管 复制Autokroma AfterCodecs 文件夹到 C:\Program Files\Adobe\Common\Plug-ins\7.0\MediaCore 复制com.autokroma.afcpanel 文件夹到 Adobe After Effects CC 2018\Support Files\Plug-ins\Extensions&#x…
阅读更多...
推荐文章

Copyright @ 2022~2023