为啥按钮背景缩放不正确？

Posted 2023-05-06

【中文标题】为啥按钮背景缩放不正确？

【英文标题】：Why button background is scaled incorrectly?为什么按钮背景缩放不正确？

【发布时间】：2016-02-22 19:35:51

【问题描述】：

我将项目 SDK 版本从 10 升级到 23，同时将项目从 Eclipse 移植到 android Studio。

按钮可绘制的 xml 和 png 图像保持不变。但是按钮背景看起来缩放不正确。

按钮状态列表：

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

对话框布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_root"
    android:layout_
    android:layout_
    android:orientation="vertical"
    android:padding="10dp" 
    android:background="#669900"
    android:gravity="center_horizontal"
    >

    <TextView android:id="@+id/alarm_text"
              android:layout_
              android:layout_
              android:textColor="#FFF"
              android:textSize="16dp"
              />

    <RelativeLayout
        android:id="@+id/linearLayout1"
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true"
        android:gravity="center" 
        android:padding="0dp">

    <Button
        android:id="@+id/ok_alarm_button"
        android:layout_
        android:layout_
        android:background="@drawable/ok_button"
        android:layout_alignParentLeft="true"
    />

    <Button
        android:id="@+id/cancel_alarm_button"
        android:layout_
        android:layout_
        android:background="@drawable/cancel_button"
        android:layout_alignParentRight="true"

    />
   </RelativeLayout>

</LinearLayout>

按钮背景（按下版本）：

升级前：

升级后：

【问题讨论】：

使用 ImageButton 而不是 Button。按钮将缩放图像以适合内部。在 ImageButton 中，您可以指定 ScaleType。

设置按钮的源代码而不是像这样的背景：android:src="@drawable/ok_button" 用 imageView 替换你的按钮

@Anjali src 不可用于 Button，可用于 ImageView 和 ImageButton。

@DhavalPatel - ImageButton 解决了我的问题。

【参考方案1】：

在您当前的场景中，使用ImageButton 而不是Button。根据ImageButton official document，ImageButton 显示一个Button 和一个Image (instead of text)，用户可以是pressed 或clicked。

如果您将图像设置为background 或Button，则Button 将在X 和Y 方向独立缩放图像，以便图像的宽度和高度与Button 大小完全匹配。这可能会改变图像的纵横比。这发生在你的情况下。

在其他情况下，如果您将ImageButton 的Image 设置为background 并将scaleType 设置为“centerInside”，将统一缩放图像（保持图像的纵横比），以便两个尺寸（宽度和图像的高度）将等于或小于视图的相应尺寸（减去填充）。

【参考方案2】：

你能试试这个方法吗，对我的临时图像有用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_root"
    android:layout_
    android:layout_
    android:background="#669900"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:id="@+id/alarm_text"
        android:layout_
        android:layout_
        android:textColor="#FFF"
        android:textSize="16dp" />

    <RelativeLayout
        android:id="@+id/linearLayout1"
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:padding="0dp">

        <Button
            android:id="@+id/ok_alarm_button"
            android:layout_
            android:layout_
            android:layout_alignParentLeft="true"
            android:background="@drawable/ok_button"
            android:minHeight="0dp"
            android:minWidth="0dp" />

        <Button
            android:id="@+id/cancel_alarm_button"
            android:layout_
            android:layout_
            android:layout_alignParentRight="true"
            android:background="@drawable/cancel_button"
            android:minHeight="0dp"
            android:minWidth="0dp"/>
    </RelativeLayout>
</LinearLayout>

【参考方案3】：

我使用 ImageButton 而不是 Button，它解决了我的问题。