在Android中的ImageButton中调整图像


147

我的活动中有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);      
    }

2
您是否检查了android提供的缩放方法?developer.android.com/reference/android/widget/…–
bofredo

Answers:


393

我希望它们覆盖按钮区域的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对不起,请晚答复,但是除了相对布局,我该如何申请?
我们都在这里疯狂

8
对于那些期待的人,ImageButton方法setScaleType(ImageView.ScaleType.CENTER) setAdjustViewBounds(true)可以通过编程来实现。
ps95 2015年

非常感谢您:)
Pankaj Nimgade

1
也可以执行android:background =“ @ null”尝试默认背景
C.Ikongo

31

我在使用以下代码 xml

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

2
我有一个相当“扁平”的矩形,这对我来说很好用……尽管有一个陷阱:请确保使用“ android:src”而不是“ android:background”。+1。
约翰尼·吴

@johnny谢谢队友的小费!
碧山

8

尝试android:scaleType="fitXY"在i-ImageButton xml中使用


尽管这可行且可以扩展,但我希望它应覆盖75%的区域,以提高可见度。
RDX

@PowerPC尝试使用framelayout将高度和宽度设置为75%,并在该帧布局中使用imagebutton并将比例类型设置为适合xy
Swap-IOS-Android

线性布局内的每个图像按钮的帧布局?您能否澄清
-RDX

@PowerPC我从未使用过,但是此链接可以为您提供帮助 stackoverflow.com/questions/9946580/...
交换- IOS-Android的

1
@StevenByle我考虑了这两种方法,但是由于我想要75%的区域覆盖率,因此您的解决方案效果很好。谢谢。
RDX


3

请参考下面的链接,并尝试找到您真正想要的:

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


1

我最近偶然发现,由于您对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
                }
            });

这不是一个坏主意。我喜欢。
鲍里斯·卡洛夫

0

就我而言,它运作良好。首先,下载图像并将其重命名为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" />

0

您可以像我一样制作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>

窗口小部件类非常简单(关键是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"
    />
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.