在Android中将图片适配到ImageButton中

Question

我在我的活动中有6个ImageButton，我通过代码在它们中设置图像（而不是使用xml）。

我希望它们覆盖按钮区域的75％。但是，一些图像覆盖的面积较小，有些太大无法适应imageButton。如何以编程方式调整大小并显示它们？ 以下是屏幕截图

下面是xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"     >
   <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">
        <ImageButton          

            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_topleft"
        android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"
            />
        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_topright"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_repeat"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"     
             />

              <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_next"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"     
             />

    </LinearLayout>    
   <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_bottomleft"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"                                 
             />
        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/button_bottomright"
    android:layout_marginBottom="5sp"
        android:layout_marginLeft="2sp"
        android:layout_marginRight="5sp"
        android:layout_marginTop="0sp"                  
            />        
    </LinearLayout>        

</LinearLayout>

还有一个myClass.java的代码片段：

public void addImageButtons()
    {
        iB_topleft = (ImageButton) findViewById(R.id.button_topleft);
        iB_topright = (ImageButton) findViewById(R.id.button_topright);
        iB_bottomleft = (ImageButton) findViewById(R.id.button_bottomleft);
        iB_bottomright = (ImageButton) findViewById(R.id.button_bottomright);
        iB_next = (ImageButton) findViewById(R.id.button_next);
        iB_repeat = (ImageButton) findViewById(R.id.button_repeat);
    }

    public void setImageNextAndRepeat()
    {

    iB_topleft .setImageResource(R.drawable.aa);
        iB_topright.setImageResource(R.drawable.bb);   

    iB_bottomleft.setImageResource(R.drawable.cc);
        iB_bottomright.setImageResource(R.drawable.dd);   

        iB_next.setImageResource(R.drawable.next);
        iB_repeat.setImageResource(R.drawable.repeat);      
    }

- Rohit

---

你有检查过Android提供的缩放方法吗？http://developer.android.com/reference/android/widget/ImageView.ScaleType.html - bofredo

Answer 1

我希望他们覆盖按钮区域的75％。

使用android:padding="20dp"（根据需要调整填充）来控制图像在按钮上的占用量。

但是，有些图像覆盖的面积较小，有些图像太大而无法适应imageButton。如何编程调整大小并显示它们？

使用android:scaleType="fitCenter"使Android缩放图像，android:adjustViewBounds="true"使其由于缩放而调整其边界。

所有这些属性都可以在运行时在每个ImageButton上以代码方式设置。但是，我认为在xml中设置和预览要容易得多。

此外，请不要将sp用于除文本大小之外的任何内容，因为它会根据用户设置的文本大小偏好进行缩放，因此如果用户具有“大”文本设置，则您的sp尺寸将比预期更大。请改用dp，因为它不受用户文本大小偏好的影响。

以下是每个按钮应该看起来的片段：

    <ImageButton
        android:id="@+id/button_topleft"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="0dp"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:padding="20dp"
        android:scaleType="fitCenter" />

- Steven Byle

---

@Steven Byle 抱歉回复晚了，但我如何将相对布局应用相同的方法？ - We're All Mad Here

对于那些寻找的人，ImageButton 的方法setScaleType(ImageView.ScaleType.CENTER)和setAdjustViewBounds(true)可以在程序中实现此功能。 - xyz

还要执行android:background="@null"以尝试默认背景。 - C.Ikongo

Answer 2

我正在使用以下代码在xml中

android:adjustViewBounds="true"
android:scaleType="centerInside"

- Pratibha Sarode

---

我有一个相对“平坦”的矩形，这对我来说很有效...但是有一个问题：请确保使用“android:src”而不是“android:background”。+1。 - Johnny Wu

@johnny 谢谢你的提示，伙计！ - Bishan

Answer 3

尝试在i-Imagebutton的xml中使用android:scaleType="fitXY"。

- Swap-IOS-Android

---

虽然这个方案已经成功且可扩展，但我希望它可以覆盖75%的区域以获得更好的可见性。 - Rohit

@PowerPC 尝试使用 FrameLayout，将高度和宽度设置为 75%，然后在该 FrameLayout 中使用您的 ImageButton，并将其缩放类型设置为 fitXY。 - Swap-IOS-Android

线性布局内每个图像按钮使用帧布局？您能否澄清一下？ - Rohit

@PowerPC 我从未使用过这个，但是这个链接可以帮助你 http://stackoverflow.com/questions/9946580/insert-frame-layout-inside-another-frame-layout - Swap-IOS-Android

@StevenByle 我考虑了两种方法，但由于我想要75%的区域覆盖率，你的解决方案很好用。谢谢。 - Rohit

Answer 4

我正在满意地使用 android:scaleType="fitCenter"。

- Seraphim's

Answer 5

请参考以下链接并尝试找到您真正想要的内容：

ImageView.ScaleType CENTER 将图像居中显示在视图中，但不进行缩放。

ImageView.ScaleType CENTER_CROP 统一缩放图像（保持图像纵横比），使图像的两个维度（宽度和高度）等于或大于视图的相应维度（减去填充）。

ImageView.ScaleType CENTER_INSIDE 统一缩放图像（保持图像的纵横比），使图像的两个维度（宽度和高度）等于或小于视图的相应维度（减去填充）。

ImageView.ScaleType FIT_CENTER 使用 CENTER 缩放图像。

ImageView.ScaleType FIT_END 使用 END 缩放图像。

ImageView.ScaleType FIT_START 使用 START 缩放图像。

ImageView.ScaleType FIT_XY 使用 FILL 缩放图像。

ImageView.ScaleType MATRIX 使用图像矩阵进行绘制时缩放。

https://developer.android.com/reference/android/widget/ImageView.ScaleType.html

- Nhat Dinh

Answer 6

你可以像我一样将你的ImageButton小部件制作成一个具有固定图标大小的小部件。让我们从自定义属性开始：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ImageButtonFixedIconSize">
        <attr name="imageButton_icon" format="reference" />
        <attr name="imageButton_iconWidth" format="dimension" />
        <attr name="imageButton_iconHeight" format="dimension" />
    </declare-styleable>
</resources>

Widget类很简单（关键点在于onLayout方法中的填充计算）：

最初的回答

class ImageButtonFixedIconSize
@JvmOverloads
constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = android.R.attr.imageButtonStyle
) : ImageButton(context, attrs, defStyleAttr) {

    private lateinit var icon: Drawable

    @Px
    private var iconWidth: Int = 0
    @Px
    private var iconHeight: Int = 0

    init {
        scaleType = ScaleType.FIT_XY
        attrs?.let { retrieveAttributes(it) }
    }

    /**
     *
     */
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        val width = right - left
        val height = bottom - top

        val horizontalPadding = if(width > iconWidth) (width - iconWidth) / 2 else 0
        val verticalPadding = if(height > iconHeight) (height - iconHeight) / 2 else 0

        setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)

        setImageDrawable(icon)

        super.onLayout(changed, left, top, right, bottom)
    }

    /**
     *
     */
    private fun retrieveAttributes(attrs: AttributeSet) {
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ImageButtonFixedIconSize)

        icon = typedArray.getDrawable(R.styleable.ImageButtonFixedIconSize_imageButton_icon)!!

        iconWidth = typedArray.getDimension(R.styleable.ImageButtonFixedIconSize_imageButton_iconWidth, 0f).toInt()
        iconHeight = typedArray.getDimension(R.styleable.ImageButtonFixedIconSize_imageButton_iconHeight, 0f).toInt()

        typedArray.recycle()
    }
}

最初的回答：最后，您应该像这样使用您的小部件：

最后，您应该像这样使用您的小部件：

<com.syleiman.gingermoney.ui.common.controls.ImageButtonFixedIconSize
    android:layout_width="90dp"
    android:layout_height="63dp"

    app:imageButton_icon="@drawable/ic_backspace"
    app:imageButton_iconWidth="20dp"
    app:imageButton_iconHeight="15dp"

    android:id="@+id/backspaceButton"
    tools:ignore="ContentDescription"
    />

- Alex Shevelev

Answer 7

最近我偶然发现，在 ImageView 中你有更多的控制权，可以为图片设置 onclicklistener。以下是一个动态创建的图像按钮示例：

private int id;
private bitmap bmp;
    LinearLayout.LayoutParams familyimagelayout = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT );

    final ImageView familyimage = new ImageView(this);
            familyimage.setBackground(null);
            familyimage.setImageBitmap(bmp);
            familyimage.setScaleType(ImageView.ScaleType.FIT_START);
            familyimage.setAdjustViewBounds(true);
            familyimage.setId(id);
            familyimage.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //what you want to do put here
                }
            });

- user5651741

---

这不是一个坏主意。我喜欢。 - Boris Karloff

Answer 8

在我的情况下，它运行良好。首先，您需要下载一张图片并将其重命名为iconimage，然后将其放置在drawable文件夹中。您可以通过设置android:layout_width或android:layout_height来更改大小。最后，我们完成了。

 <ImageButton
        android:id="@+id/answercall"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:src="@drawable/iconimage"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:scaleType="fitCenter" />

- Jame