【问题标题】:Android create a "flat button"Android创建一个“平面按钮”
【发布时间】:2016-02-10 19:03:54
【问题描述】:

据说,在材质主题中,有两种按钮:凸起的和扁平的:

当我创建<Button> 时,它看起来像“凸起”按钮。如何使用标记制作“平面按钮”。有什么风格或属性可以做到吗?我在主题编辑器中找到了这张图片。

【问题讨论】:

    标签: android android-layout button


    【解决方案1】:

    您可以在Button 上使用style="?android:attr/borderlessButtonStyle,如下所示:

    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextGoesHere"
    style="?android:attr/borderlessButtonStyle"
    />
    

    BorderlessButtonStyle

    无明确边框的按钮样式,通常成组使用。

    你也可以使用Flat Buttons

    【讨论】:

    【解决方案2】:

    添加对build.gradle的依赖

    dependencies {
        compile 'com.android.support:appcompat-v7:25.0.0'
    }
    

    然后在你的布局 XML 文件中,为 Button 添加一个样式属性

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        style="@style/Widget.AppCompat.Button.Borderless"/>
    

    您可以通过定义自定义样式来更改按下按钮时的颜色

    <style name="FlatButtonStyle" parent="Theme.AppCompat.Dark">
        <item name="colorControlHighlight">@color/transparent</item>
    </style>
    

    并在布局 XML 中应用此样式

    android:theme="@style/FlatButtonStyle"
    

    【讨论】:

      【解决方案3】:

      有了 Material Components Library 的可用性,现在可以很容易地在您的布局中添加一个平面按钮。 步骤如下:

      将依赖添加到您的应用模块的build.gradle

      dependencies {
          implementation 'com.google.android.material:material:1.2.0-alpha04'
      }
      

      注意:在https://mvnrepository.com/artifact/com.google.android.material/material查找最新版本号

      然后将具有以下样式的 MaterialButton 添加到您的 XML 布局中

      <com.google.android.material.button.MaterialButton
          style="@style/Widget.MaterialComponents.Button.TextButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Button" />
      

      就是这样。 style 属性及其值 style="@style/Widget.MaterialComponents.Button.TextButton" 负责启用和禁用状态及其文本颜色。

      最终结果:

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2013-12-25
        • 1970-01-01
        • 1970-01-01
        • 2013-12-18
        • 1970-01-01
        • 1970-01-01
        • 2015-10-16
        • 1970-01-01
        相关资源
        最近更新 更多