android - 圆形按钮不失风格

Question

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

问题是我不想失去风格（当你按下它和阴影时，波纹和颜色会发生变化）。这将使用 state-drawable 作为背景发生。

我怎样才能实现它？

Answer 1

只需使用带有属性MaterialButton的材料组件库中的 。app:cornerRadius

就像是：

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

Answer 2

<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>

您将通过 1 个可绘制的 21 后版本获得所需的新闻效果，如下所示，但 21 之前的版本不支持波纹效果，因此您必须为新闻和非新闻效果制作一些可绘制背景，我在这里包含了最终解决方案

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>

（这是针对 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 后版本上获得类似贝洛图像的按钮，并在 21 版本之前获得具有波纹效果的按钮效果。