将按钮的背景设置为图像，根据需要缩放

Question

我有一个简单的布局：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:text="Button"
            android:gravity="center"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

这是输出：

但我希望带有背景的按钮与没有图像作为背景的按钮（右侧）保持相同的大小。基本上，我想将按钮“放置”在图像上，使图像的中心位于按钮背景上，但按钮不会调整大小以适应整个背景。

我在 Button 上尝试了 android:scaleType="centerCrop" 但它没有改变任何东西。任何帮助表示赞赏，谢谢

编辑按钮的大小需要wrap_content，因为文本是动态的

Answer 1

按钮的宽度和高度设置为wrap_content。在这种情况下，背景图像也是内容。 只需将宽度和高度更改为您想要的值：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button5"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:text="Button"
            android:gravity="center"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

如果您希望所有按钮具有相同的大小，请考虑创建一个 dimen 值：

维度

    <resources>
        <dimen name="button_width">100dp</dimen>
        <dimen name="button_height">50dp</dimen>
    </resources>

布局

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button5"
            android:layout_width="@dimen/button_with"
            android:layout_height="@dimen/button_height"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:text="Button"
            android:gravity="center"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="@dimen/button_with"
            android:layout_height="@dimen/button_height"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

另外，考虑使用 ImageButton 来达到您的目的。

ImageButton

编辑

试试这个：

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/your_background"
            android:layout_alignStart="@+id/buttonId"
            android:layout_alignEnd="@+id/buttonId"
            android:layout_alignTop="@+id/buttonId"
            android:layout_alignBottom="@+id/buttonId"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buttonId"/>

 </RelativeLayout>

另外，添加一个 scaleType 到 ImageView 以使其居中，拉伸，等等...

android:scaleType="center"

编辑 2

为按钮添加填充对我有用：

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_settings"
        android:layout_alignStart="@+id/buttonId"
        android:layout_alignEnd="@+id/buttonId"
        android:layout_alignTop="@+id/buttonId"
        android:layout_alignBottom="@+id/buttonId"
        android:scaleType="center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:text="This is a button with a very long text that may take up multiple lines and stuff"
        android:id="@+id/buttonId"/>

</RelativeLayout>
<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_settings"
            android:layout_alignStart="@+id/buttonId2"
            android:layout_alignEnd="@+id/buttonId2"
            android:layout_alignTop="@+id/buttonId2"
            android:layout_alignBottom="@+id/buttonId2"
            android:scaleType="center"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is a button with a very long text that may take up multiple lines and stuff"
            android:id="@+id/buttonId2"/>

</RelativeLayout>

注意：你在截图中看不到 paddingStart 和 paddingEnd，但它工作得很好。

Answer 2

为了扩展九补丁建议，Android 支持使用九补丁图像将按钮/视图组的图像缩放到任意大小的能力。需要注意的是，图像必须符合九个补丁的要求——一般来说，图像的角是恒定的，并且中间/边缘必须能够缩放到任何尺寸。例如，如果您的图像是照片，它将不起作用。大多数九色块图像具有纯色中心和“简单”边缘。

第一步是在您的drawable 文件夹中创建一个九补丁可绘制对象，该文件夹引用您的九补丁图像。九个补丁图像的文件名应类似于 *.9.png。

<?xml version="1.0" encoding="utf-8"?>
<nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/button_image" />

完成此操作后，您可以将background 属性添加到Button，它应该与内容无缝缩放（下面的background 属性应该引用您在上面创建的<nine-patch> XML 资源。

<Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/button_background" 
        android:text="My button"/>

我会注意到，尤其是带有水平线的图像，看起来不太适合九补丁解决方案，但如果您对使用的图像灵活处理，可能值得一看。