带背景颜色选择器的按钮 - 单击时，背景颜色从按钮伸出

Question

首先......通过代码动态添加按钮，因此无法在xml中应用样式。

我的活动中有几个按钮，我使用选择器来更改背景颜色。按钮还有一个“形状”，用于边框。

image_border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="@color/dark_grey" />

    <stroke
        android:width="4dp"
        android:color="@color/light_grey" />

    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />

</shape>

button_background_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/blue" android:state_pressed="true"/>
    <item android:drawable="@color/dark_grey" android:state_focused="true"/>
    <item android:drawable="@drawable/image_border"/>

</selector>

现在当我点击按钮时，背景颜色变化很好。但是，背景颜色超出了按钮的大小。我不确定它在哪里发生。

请参阅下面的图片......

点击按钮之前：

点击按钮后：

我认为颜色会延伸到填充物或其他东西，但我真的不太确定，为什么会发生这种情况。

Answer 1

使用您在选择器中使用的颜色创建另一个形状...假设为Blue颜色...创建名为btn_pressed.xml的形状......

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="@color/blue" />

    <stroke
        android:width="4dp"
        android:color="@color/blue" />

    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />

</shape>

然后将此形状放在@color/blue中selector的位置，如下所示......

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/btn_pressed" android:state_pressed="true"/>
    <item android:drawable="@color/dark_grey" android:state_focused="true"/>
    <item android:drawable="@drawable/image_border"/>

</selector>

对@color/dark_grey执行相同的处理。

Answer 2

这应该是你的选择器：

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

只需添加这些drawable：

<强> image_border_blue

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/blue" />
    <stroke
        android:width="4dp"
        android:color="@color/light_grey" />
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
</shape>

<强> image_border_dark_grey

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/dark_grey" />
    <stroke
        android:width="4dp"
        android:color="@color/light_grey" />
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
</shape>