Home / Questions / 4628
Accepted
Codelaby
Asked: 2020-02-24 02:59:36 +0800 CST 2020-02-24 02:59:36 +0800 CST

Android Material Design 中的平面按钮

  • 772

默认情况下，在Android Studio中创建按钮时，其外观继承了Material Design布局，在Material Design风格指南中，它谈到了Flat, RaisedRaised按钮，我认为是默认的

扁平按钮

在此处输入图像描述

凸起的按钮

在此处输入图像描述

我要问的总结

  • 我看到raised添加了那个效果glow来提升它，它是如何分配的？
  • 您如何将其指定为平面按钮？
android

2 Answers

  1. Best Answer

    最终成绩

    在此处输入图像描述

    您必须首先添加支持库。

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

    回答Raised Button.

    你定义你自己的风格。

    <style name="MiRaisedBoton" parent="Theme.AppCompat.Light">  
    <item name="colorControlHighlight">#FF4081</item>
    <item name="colorButtonNormal">#00BCD4</item>
</style>

    您应用样式。

    <Button  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="RAISED BUTTON"
    android:theme="@style/MiRaisedBoton"/>

    Raised Button con elevación对(API +19)的响应

    您定义自己的动画。

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_enabled="true">
    <set>
        <objectAnimator android:propertyName="translationZ"
                        android:duration="@integer/button_pressed_animation_duration"
                        android:valueTo="@dimen/button_pressed_z_material"
                        android:valueType="floatType"/>
        <objectAnimator android:propertyName="elevation"
                        android:duration="0"
                        android:valueTo="@dimen/button_elevation_material"
                        android:valueType="floatType"/>
    </set>
</item>
<item android:state_enabled="true">
    <set>
        <objectAnimator android:propertyName="translationZ"
                        android:duration="@integer/button_pressed_animation_duration"
                        android:valueTo="0"
                        android:startDelay="@integer/button_pressed_animation_delay"
                        android:valueType="floatType"/>
        <objectAnimator android:propertyName="elevation"
                        android:duration="0"
                        android:valueTo="@dimen/button_elevation_material"
                        android:valueType="floatType" />
    </set>
</item>

    您分配动画。

    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="RAISED BUTTON ELEVADO"
    android:stateListAnimator="@anim/mi_animacion"/>

    回答Flat Button.

    您指定无边框样式。

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

    如果您想定义自己的风格。

    <style name="MiFlatBoton" parent="Theme.AppCompat.Light">  
    <!-- tus propios cambios -->
</style>

    并且在定义了自己的风格之后，当然要指明要使用它。

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

    更多信息：链接

    • 6

  2. 另一种解决方案是使用兼容性库中的样式，超过一个Button或AppCompatButton

    扁平按钮

    对于纯文本按钮、文本按钮、平面按钮：

    在此处输入图像描述

    将样式设置为：style="@style/Widget.AppCompat.Button.Borderless"

    <android.support.v7.widget.AppCompatButton
    android:id="@+id/button1"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

    多彩文本的颜色将是colorAccent主题中定义的颜色。

    将样式设置为：style="@style/Widget.AppCompat.Button.Borderless.Colored"

    <android.support.v7.widget.AppCompatButton
    android:id="@+id/button2"
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

    个性化

    对于自定义，我们可以定义自己的样式，以便更改文本的颜色，按下时波浪颜色，仅在我们想要的那些按钮中。

    我们改变文本<item name="colorAccent">的颜色和冲击波的颜色<item name="colorControlHighlight">

    PrimaryFlatButton 样式

    <style name="PrimaryFlatButton" parent="Theme.AppCompat.Light">
    <item name="android:buttonStyle">@style/Widget.AppCompat.Button.Borderless.Colored</item>
    <item name="colorControlHighlight">@color/colorAccent</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

    在使用按钮上使用它android:theme="@style/PrimaryFlatButton

    <android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome3"
    android:theme="@style/PrimaryFlatButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:text=" Button" />
    • 0