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

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>

这是输出：

但我希望带有背景的按钮与没有图像作为背景（正确的那个）时保持相同的大小。基本上，我想 "place" 图像上的按钮，以便图像的中心位于按钮背景上，但按钮不会调整大小以适合整个背景。

我已经在按钮上尝试了 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>

此外，向 ImageView 添加 scaleType 使其居中、拉伸等等...

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 支持使用九补丁图像将 button/view 组的图像缩放到任意大小的能力。需要注意的是，图像必须符合九个补丁的要求——一般来说，图像的角是恒定的，并且 middle/edges 必须能够缩放到任何维度。例如，如果您的图片是照片，则无法使用。大多数九补丁图像具有纯色中心和 'simple' 边缘。

第一步是在您的 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"/>

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

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

Set button's background to image, scaling as needed

java

android

button

scale