web-dev-qa-db-fra.com

Comment puis-je conserver le rapport hauteur/largeur sur les boutons d'image dans Android?

J'ai 5 boutons Image carrés que je veux aligner côte à côte au bas de l'écran. J'ai chacun un ensemble (différents identifiants) comme: 

        <ImageButton
         Android:id="@+id/box1" 
         Android:layout_width="fill_parent"
         Android:layout_height="wrap_content" 
         Android:layout_gravity="center"
         Android:adjustViewBounds="true"
         Android:scaleType="fitXY"
         Android:layout_weight="1"
         Android:layout_margin="1dp"
         />

et j'ai le fond assigné dans Java principal comme ceci:

    int[] imageIds = new int[] {R.id.box1,R.id.box2,R.id.box3,R.id.box4,R.id.box5};
    for(int i = 0; i<5; i++){
        imageButtons[i] = (ImageButton) findViewById(imageIds[i]);
        imageButtons[i].setBackgroundResource(R.drawable.blank);
    }

Ce que je voudrais faire, c’est redimensionner la largeur pour s’ajuster parfaitement côte à côte au bas de l’écran (ce qui est le cas actuellement), mais la hauteur doit automatiquement être redimensionnée pour correspondre à la largeur Est-ce possible? Je ne veux pas utiliser setImageSource, car cela met une bordure autour du bouton image.

androidimagebuttonaspect-ratio
34
clayton33
   <LinearLayout
     Android:layout_width="fill_parent"
     Android:layout_height="wrap_content"
     Android:id="@+id/layoutButtons">

     <com.package.SquareButton         
        Android:layout_height="fill_parent"
        Android:layout_width="0dip"          
        Android:layout_weight="1"

        <ImageView
        Android:id="@+id/box1"
        Android:layout_gravity="center"
        Android:adjustViewBounds="true"
        Android:scaleType="centerInside"
        Android:layout_height="wrap_content"
        Android:layout_width="0dp"          
        Android:layout_weight="1" 
        Android:layout_marginLeft="5dp" 
        Android:layout_marginRight="5dp"/>

      </com.package.SquareButton>

      <com.package.SquareButton         
        Android:layout_height="fill_parent"
        Android:layout_width="0dip"          
        Android:layout_weight="1"

        <ImageView
        Android:id="@+id/box2"
        Android:layout_gravity="center"
        Android:adjustViewBounds="true"
        Android:scaleType="centerInside"
        Android:layout_height="fill_parent"
        Android:layout_width="fill_parent"          
        Android:layout_marginLeft="5dp" 
        Android:layout_marginRight="5dp"/>

</com.package.SquareButton>

   .........          
 </LinearLayout>

Et ajoutez ensuite cette classe de boutons personnalisés:

public class SquareButton extends LinearLayout {

    public SquareButton(Context context) {
        super(context);
    }

    public SquareButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    // This is used to make square buttons.
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}
32
neteinstein

J'ai eu le même mal de tête en essayant de placer mes boutons l'un à la suite de l'autre. La solution que j'ai trouvée consistait à utiliser ImageButton et la propriété Android:src (setImageSource dans le code) en combinaison avec Android:background="@null"

Si j'ai bien compris, l'arrière-plan d'un bouton d'image n'est pas affecté par la adjustViewBounds, il ne s'agit que de la imageView que vous avez définie dans Android:src.

Le comportement par défaut est alors de vous donner un bouton carré avec l'imageView au milieu. Vous pouvez le remplacer en définissant l’arrière-plan sur@null, ce qui vous laisse uniquement avec l’image.

Vous pouvez ensuite utiliser soit une LinearLayout, soit un tableau pour disposer vos boutons. J'ai tout fait en XML et j'ai utilisé la disposition suivante pour créer une rangée de deux boutons au bas de l'écran qui permettent d'agrandir ou de réduire le rapport en conservant le rapport de format avec différentes tailles d'écran de périphérique. J'espère que cela t'aides.

<TableLayout    
    Android:id="@+id/tableLayout2"
    Android:layout_width="fill_parent" 
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true"
    Android:layout_marginBottom="20dip"
    Android:stretchColumns="*">

    <TableRow>

     <ImageButton
        Android:id="@+id/button_one"
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent"
        Android:layout_gravity="center"
        Android:layout_weight="0.5"
        Android:adjustViewBounds="true"
        Android:scaleType="fitCenter"  
        Android:onClick="clickOne"
        Android:background="@null"
        Android:src="@drawable/button_one_drawable" />

    <ImageButton
        Android:id="@+id/button_two"
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent"
        Android:layout_gravity="center"
        Android:layout_weight="0.5"
        Android:adjustViewBounds="true"
        Android:scaleType="centerInside"  
        Android:onClick="clickTwo"
        Android:background="@null"
        Android:src="@drawable/button_two_drawable" />

    </TableRow>      
</TableLayout>
29
leafcutter

Au lieu de 

Android:scaleType="fitXY"

utilisation:

Android:scaleType="centerInside"

EDIT1: Essayez celui-ci:

    <LinearLayout
            Android:orientation="vertical"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:id="@+id/layoutToInflateButtons"
            >
    <ImageButton 
        Android:id="@+id/box1"
        Android:layout_gravity="center"
        Android:adjustViewBounds="true"
        Android:scaleType="centerInside"          
        Android:layout_weight="1"          
        Android:layout_margin="1dp"
        />          
    </LinearLayout>
12
barmaley

Vous pouvez utiliser la disposition de pourcentage relatif de Google qui vous aide à gérer les proportions.

Vous pouvez l'utiliser comme ça

     <Android.support.percent.PercentRelativeLayout
             xmlns:Android="http://schemas.Android.com/apk/res/Android"
             xmlns:app="http://schemas.Android.com/apk/res-auto"
             Android:layout_width="match_parent"
             Android:layout_height="match_parent">

         <ImageButton
             Android:id="@+id/box1" 
             Android:layout_width="fill_parent"
             Android:layout_height="wrap_content" 
             Android:layout_gravity="center"
             Android:adjustViewBounds="true"
             Android:scaleType="fitXY"
             app:layout_aspectRatio="100%"
             Android:layout_weight="1"
             /> 
     </Android.support.percent.PercentFrameLayout>

Le rapport hauteur/largeur 100% fera la même largeur que la hauteur.

exemple:

Android:layout_width="300dp"
app:layout_aspectRatio="178%"

une largeur de 178% de la hauteur. C'est le format attendu par layout_aspectRatio

Vous pouvez le lire en détail ici

3
Tushar

Après avoir vérifié l’exemple d’application Google I/O de cette année, nous avons constaté que Google utilise des valeurs dimens pour spécifier différentes hauteurs ou largeurs en fonction du type d’écran. Pour plus de détails, vous pouvez consulter le code source depuis http://code.google.com/p/iosched/ .

Vous pouvez spécifier la hauteur du bouton par exemple dans values-xhdpi ou values-sw720dp, comme suit:

 <resources>
    <dimen name="button_height">50dp</dimen>
</resources>

Et vous pouvez simplement utiliser cette valeur de dimen lorsque vous spécifiez la hauteur:

Android:layout_height="@dimen/button_height"
1
bogdan

Je suis sûr que vous voulez avoir 5 boutons de largeur/hauteur EQUAL. Si tel est le cas, prenez LinearLayout et mettez tous ces 5 boutons aveclayout_width="0dip"etlayout_weight="1"

Par exemple:

<LinearLayout
   Android:layout_width="fill_parent"
   Android:layout_height="wrap_content"
   Android:id="@+id/layoutButtons">

    <ImageButton 
        Android:id="@+id/box1"
        Android:layout_gravity="center"
        Android:adjustViewBounds="true"
        Android:scaleType="centerInside"
        Android:layout_height="wrap_content"
        Android:layout_width="0dip"          
        Android:layout_weight="1"/>

    <ImageButton 
        Android:id="@+id/box2"
        Android:layout_gravity="center"
        Android:adjustViewBounds="true"
        Android:scaleType="centerInside"
        Android:layout_height="wrap_content"
        Android:layout_width="0dip"          
        Android:layout_weight="1"/>    

   .........          
 </LinearLayout>
1
Paresh Mayani

Regardez dans la création d'un ImageButton personnalisé. J'aime ça parce que c'est une classe. Voici un bouton qui ajuste sa hauteur en fonction du format de l'image. J'imagine que vous pouvez adapter à vos besoins:

public class AspectImageButton extends ImageButton {


public AspectImageButton(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
    this.getDrawable();

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int width = getMeasuredWidth();

    Drawable d=this.getDrawable(); //grab the drawable

    float fAspectRatio=(float)d.getIntrinsicWidth()/(float)d.getIntrinsicHeight();

    float fHeight=(float)width/fAspectRatio;//get new height

    setMeasuredDimension(width, (int)fHeight);
}

public AspectImageButton(Context context, AttributeSet attrs) {
    super(context, attrs);

    // TODO Auto-generated constructor stub
}

public AspectImageButton(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    // TODO Auto-generated constructor stub
}

}

puis en xml utilisez-le comme ceci:

<com.package.AspectImageButton
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:src="@drawable/home_1b"
                Android:background="@null"
                Android:scaleType="fitXY"
                Android:adjustViewBounds="true" />
0
yeahdixon
ViewGroup.LayoutParams params = imageButtonName.getLayoutParams();
// Changes the height(or width) and width(or height) to the specified 
params.height = layout.getWidth();
0
Massimo Variolo

Définissez la largeur des boutons Image sur fill_parent et utilisez scaletype fitStart pour les images qui épousent la marge de gauche et fitEnd pour celles de droite. Devrait faire l'affaire, au moins aussi loin que votre exemple d'image va. Il se peut que vous rencontriez des problèmes d'espacement si la largeur proportionnelle des images dépasse la largeur de l'écran, mais cela devrait fonctionner pour vous.

0
user647826