web-dev-qa-db-fra.com

Ajuster l'image dans ImageButton dans Android

J'ai 6 ImageButton dans mon activité, je mets des images à travers mon code en eux (sans utiliser xml).

Je veux qu'ils couvrent 75% de la surface des boutons. Mais là où certaines images couvrent moins de surface, certaines sont trop grandes pour tenir dans le bouton image. Comment redimensionner et leur montrer par programme? Ci-dessous, la capture d'écran

enter image description here ci-dessous est le fichier 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>

et un extrait demyClass.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);      
    }
androidimageandroid-linearlayoutscaleimagebutton
118
RDX

Je veux qu'ils couvrent 75% de la surface des boutons. 

Utilisez Android:padding="20dp" (ajustez le remplissage à votre guise) pour contrôler la charge de l'image sur le bouton.

mais là où certaines images couvrent moins de surface, certaines sont trop grandes pour tenir dans le bouton image. Comment redimensionner et leur montrer par programme?

Utilisez un Android:scaleType="fitCenter" pour que Android redimensionne les images et Android:adjustViewBounds="true" pour qu’elles ajustent leurs limites en fonction de la mise à l’échelle. 

Tous ces attributs peuvent être définis dans le code de chaque ImageButton au moment de l'exécution. Cependant, à mon avis, il est beaucoup plus facile de définir et de prévisualiser au format XML.

En outre, do not use sp pour toute autre mesure que la taille du texte, elle est redimensionnée en fonction de la préférence de taille du texte définie par l'utilisateur. Vos dimensions sp seront donc plus grandes que prévu si l'utilisateur dispose d'un paramètre "grand". . Utilisez plutôt dp, car il n’est pas mis à l’échelle par la préférence de taille du texte de l’utilisateur.

Voici un extrait de ce à quoi chaque bouton devrait ressembler:

    <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" />

Sample Button

321
Steven Byle

J'utilise le code suivant dans xml

Android:adjustViewBounds="true"
Android:scaleType="centerInside"
22
Pratibha Sarode

Essayez d'utiliser Android:scaleType="fitXY" dans i-Imagebutton xml 

8
Swap-IOS-Android

J'utilise Android:scaleType="fitCenter" avec satisfaction.

5
Seraphim's

Référez-vous au lien ci-dessous et essayez de trouver ce que vous voulez vraiment:

ImageView.ScaleType CENTER Centrez l'image dans la vue, mais exécutez pas de mise à l'échelle. 

ImageView.ScaleType CENTER_CROP Mettez à l'échelle l'image de manière uniforme (conservez Le rapport de format de l'image) afin que les deux dimensions (largeur et hauteur) de l'image sera égal ou plus grand que le .__ correspondant. dimension de la vue (moins le rembourrage). 

ImageView.ScaleType CENTER_INSIDE Redimensionne l'image de manière uniforme (conservez Le format de l'image) afin que les deux dimensions (largeur et hauteur) de l'image sera égale ou inférieure à la dimension correspondante de la vue (moins le rembourrage). 

ImageView.ScaleType FIT_CENTER Mettez à l'échelle l'image à l'aide de CENTER. 

ImageView.ScaleType FIT_END Mettez à l'échelle l'image en utilisant END. 

ImageView.ScaleType FIT_START Mettez à l'échelle l'image en utilisant START. 

ImageView.ScaleType FIT_XY Mettez à l'échelle l'image en utilisant FILL. 

ImageView.ScaleType MATRIX Échelle en utilisant la matrice d'images lors du dessin.

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

2
Nhat Dinh

J'ai récemment découvert par accident que, puisque vous avez plus de contrôle sur un ImageView, vous pouvez définir un onclicklistener pour une imageun échantillon d'un bouton d'image créé dynamiquement

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
                }
            });
1
David

Vous pouvez créer votre widget ImageButton comme je l'ai fait. Dans mon cas, j'avais besoin d'un widget avec une taille d'icône fixe. Commençons par les attributs personnalisés:

<?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>

La classe de widget est assez simple (le point clé est le remplissage des calculs avec la méthode 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()
    }
}

Et enfin, vous devriez utiliser votre widget comme ceci:

<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"
    />
0
Alex Shevelev

Cela a bien fonctionné dans mon cas. Tout d’abord, vous téléchargez une image et vous la renommez iconimage, vous la localisez dans le dossier pouvant être dessiné. Vous pouvez modifier la taille en définissant Android:layout_width ou Android:layout_height. Enfin, nous avons

 <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
Jame