Question

我正在尝试制作一个像this这样的简单圆角按钮从this开始

问题在于我不想丢失样式（按下它和阴影时的波纹和颜色变化）。使用state-drawable作为背景会发生这种情况。

我怎样才能实现它？

Answer 1

<android.support.v7.widget.AppCompatButton
            style="@style/buttonApp"
            android:text="Normal" />

res>values>styles.xml中的

就是这个。并根据需要更改填充，颜色。

<style name="buttonApp" parent="@style/Widget.AppCompat.Button.Borderless">
    <item name="android:layout_height">@dimen/appButtonHeight</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingLeft">20dp</item>
    <item name="android:paddingRight">20dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:paddingBottom">10dp</item>
    <item name="android:textColor">@color/colorWhite</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">16sp</item>
    <item name="android:background">@drawable/bg_button_orange</item>
</style>

你将获得所需的第一个21版本的抽奖效果，如下所示，但是21之前的版本不支持涟漪效果，所以你必须为印刷和非印刷效果制作一些drawables背景，我已经包括最终解决方案

bg_button_orange.xml

中的

res>drawables-v21>

（这是21版android之后）

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorGreenAlpha" />
            <corners android:radius="15dp" />
        </shape>
    </item>
    <item android:drawable="@drawable/bg_button_not_selected" />
</ripple>

bg_button_orange.xml

中的

res>drawables>

（这是针对pre 21版本的android）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_button_selected" android:state_pressed="true" />
    <item android:drawable="@drawable/bg_button_selected" android:state_focused="true" />
    <item android:drawable="@drawable/bg_button_selected" android:state_selected="true" />
    <item android:drawable="@drawable/bg_button_not_selected" />
</selector>

bg_button_not_selected.xml

中的

res>drawables

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorGreenLight" />
    <corners android:radius="@dimen/appButtonRadius" />
</shape>

bg_button_not_selected.xml

中的

res>drawables

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorGreen" />
    <corners android:radius="@dimen/appButtonRadius" />
</shape>

放入res>values>dimens.xml

<dimen name="appButtonHeight">60dp</dimen>
<dimen name="appButtonRadius">30dp</dimen>

放入res>values>colors.xml

<color name="colorGreen">#009688</color>
<color name="colorGreenAlpha">#b0009688</color>
<color name="colorGreenLight">#27d4c4</color>

按钮高度应该是按钮半径的两倍才能获得精确的圆角。

您将在21版本上获得具有涟漪效果的belo图像按钮，并在21版本之前按下效果。

Answer 2

只需将MaterialButton中的Material Components library与 app:cornerRadius 属性一起使用。

类似的东西：

    <com.google.android.material.button.MaterialButton
        android:text="NORMAL"
        app:cornerRadius="16dp"
        ../>

圆形按钮不失风格

2 个答案: