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

Question

J'ai 5 place de ImageButtons que je veux avoir alignés côte à côte sur le bas de l'écran. J'ai chaque set (id différent) 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 l'arrière-plan attribué en principal java 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 qu'elle n'est à l'échelle de la largeur pour s'adapter parfaitement côté-à-côte dans le bas de l'écran (ce qui n'est maintenant ok), mais la hauteur automatiquement à l'échelle pour correspondre à la largeur ainsi. est-ce possible? Je ne veux pas utiliser setImageSource car il met une bordure autour de la imagebutton.

Answer 1

    <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 puis ajoutez 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);
    }
}
 

Answer 2

J'ai eu ce genre de maux de tête en essayant d'obtenir mes boutons dans une rangée. La solution que j'ai trouvé est d'utiliser ImageButton et de la android:src de la propriété (setImageSource dans le code) en combinaison avec d' android:background="@null"

Si je comprends bien le fond d'un bouton image n'est pas affectée par l' adjustViewBounds, c'est seulement l' imageView qui vous ensemble en android:src.

Le comportement par défaut est alors pour vous donner un bouton carré avec l'imageView dans le milieu. Vous pouvez remplacer que par le réglage de l'arrière-plan d' @null, ce qui vous laisse avec seulement l'image.

Vous pouvez alors soit utiliser une LinearLayout ou une table à la disposition de vos boutons. J'ai tout fait en XML et utilisé la mise en page suivante pour créer une ligne de deux boutons au bas de l'écran de l'échelle vers le haut ou vers le bas en maintenant le ratio d'aspect avec les différents écrans des appareils de tailles. Espérons que cette aide.

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

Answer 3

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>
 

Answer 4

Je suis sûr que vous voulez avoir 5 boutons de largeur / hauteur ÉGAL. Si c'est le cas, prenez LinearLayout et placez tous ces 5 boutons avec layout_width="0dip" et layout_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>
 

Answer 5

Après vérification de la Google I/O exemple d'application de cette année, j'ai constaté que Google est à l'aide de dimen valeurs pour la spécification des varios hauteurs ou largeurs basé sur le type d'écran. Pour plus de détails vous pouvez consulter le code source de http://code.google.com/p/iosched/.

Vous pouvez spécifier la hauteur du bouton, par exemple dans des valeurs-xhdpi ou valeurs-sw720dp que:

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

Et puis, vous pouvez simplement utiliser cette dimen valeur lors de la spécification de la hauteur:

android:layout_height="@dimen/button_height"