首页 > 解决方案 > Android Material Component 全局样式,用于 Material Button、Material Text Button 和 Material OutlinedButton

问题描述

目前我正在使用com.google.android.material:material:1.1.0图书馆。

我创建了基本主题并添加了 Material Button 全局样式,例如:<item name="materialButtonStyle">@style/Material.BaseAppTheme.Button</item>. 它适用于所有默认按钮。现在的问题是我想要Material Text ButtonMaterial Outlined Button的特定样式。但是即使我在属性中添加特定样式,默认样式也会覆盖特定样式。喜欢这个:

 <Button
    style="@style/Widget.MaterialComponents.Button.TextButton" 
    ...> 

它仍然显示为默认按钮。所以我必须删除基本主题中的全局按钮样式并在每个. 我不知道这是为不同类型的材质按钮应用样式的唯一方法。或者我错过了一些东西。这是我的主题和样式代码

基本主题

在此处输入图像描述

BaseTheme.Button 和 TextAppearance 样式

<style name="TextAppearance.Base.Button" parent="TextAppearance.MaterialComponents.Button">
    <item name="android:fontFamily">@string/font_family_regular</item>
    <item name="fontFamily">@string/font_family_regular</item>
    <item name="android:textColor">?buttonTextColorPrimary</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textSize">@dimen/_10sp</item>
    <item name="android:textAllCaps">false</item>
</style>


<style name="Material.BaseAppTheme.Button" parent="Widget.MaterialComponents.Button">
    <item name="android:paddingLeft">@dimen/_8dp</item>
    <item name="android:paddingRight">@dimen/_8dp</item>
    <item name="android:background">?buttonColorEnabled</item>
</style>

XML 中的按钮

              <Button
                    style="@style/Widget.MaterialComponents.Button.TextButton"
                    android:id="@+id/tv_footer_cta_left"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:textAllCaps="true"
                    android:text="@{viewModel.footerLeftTitle}"
                    app:invisibility="@{viewModel.footerLeftCTAVisibility}"
                    app:onSingleClick="@{() -> viewModel.navigateTo(viewModel.footerLeftCTAUri)}"
                    tools:text="MANAGE ACCOUNT" />

                <Button
                    android:id="@+id/tv_footer_cta_right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:text="@{viewModel.footerRightTitle}"
                    android:textAllCaps="true"
                    app:invisibility="@{viewModel.footerRightCTAVisibility}"
                    app:onSingleClick="@{() -> viewModel.navigateTo(viewModel.footerRightCTAUri)}"
                    tools:text="MANAGE ACCOUNT" />

当前结果

在此处输入图像描述

** 预期结果**

在此处输入图像描述

标签: androidandroid-layoutmaterial-designandroid-jetpackmaterial-components-android

解决方案


我认为您在理解材料主题方面需要一些帮助。首先将您的应用程序主题更改为材质主题将自动为您项目中的所有按钮设置主题(无需做任何额外的事情)。二、可以使用

 style="@style/Widget.MaterialComponents.Button.TextButton"

在您的按钮代码中,以使您的按钮文本只有按钮,就像预期的结果一样。

你可以在这里阅读这个材料设计的文档:material.io

相信我,该文档将真正帮助您。


推荐阅读