Android:. La alineación de cuatro plazas

Question

Estoy tratando de alinear los cuatro cuadrados de igual tamaño en una pantalla de Android & Ahora he intentado lo que se siente como un millón de enfoques diferentes, pero ninguno de ellos parece funcionar :(

lo que tengo en este momento es la siguiente:.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/MasterLayout" android:layout_width="wrap_content"  android:layout_height="fill_parent" android:background="#FFFFFF"> 
<TableLayout android:layout_width="fill_parent" android:id="@+id/mainlay" android:background="#444444" android:layout_weight="0.2" android:layout_height="wrap_content" android:padding="0dip"> 
    <TableRow android:layout_weight="1" android:background="#BBBBBB" android:padding="0dip"> 
     <ImageView android:id="@+id/ImageView1" android:layout_marginLeft="10px" android:layout_weight="1" android:layout_marginRight="5px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView> 
     <ImageView android:id="@+id/ImageView2" android:layout_marginLeft="5px" android:layout_weight="1" android:layout_marginRight="10px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView> 
    </TableRow> 
    <TableRow android:layout_weight="1" android:padding="0dip"> 
     <ImageView android:id="@+id/ImageView3" android:layout_marginLeft="10px" android:layout_weight="1" android:layout_marginRight="5px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView> 
     <ImageView android:id="@+id/ImageView4" android:layout_marginLeft="5px" android:layout_weight="1" android:layout_marginRight="10px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView> 
    </TableRow> 
</TableLayout> 
</LinearLayout> 

básicamente, esto hace el trabajo Sin embargo, cada uno de esos cuatro imágenes tiene un enorme relleno de arriba y debajo de ella ¿Cómo deshacerse de eso. ? O tengo que utilizar un tipo de diseño diferente alltogether?

Para ayudar a ilustrar mi problema, aquí hay una imagen. A la izquierda está lo que obtuve, a la derecha está lo que necesito. Image

¡Muchas gracias!

¡Salud, Markus!

Answer 1

Elimina layout_weight de tus TableRows y configura su layout_height en wrap_content. A continuación, agregue un TableRow vacío debajo de ellos con layout_height establecido en fill_parent.

Answer 2

Pruebe usar scaleType como centerCrop, si el tamaño de la imagen es mayor, esto le servirá. Pero esta no es la mejor manera de hacerlo, mejor sería cambiar los recursos de imagen.

HTH!

Answer 3

Intenta configurar la altura de ImageView en fill_parent, creo que eso debería ser el truco. De todos modos, sería útil si sus propiedades XML estuvieran divididas en líneas, es difícil para el resto de nosotros leer una sola línea de propiedades.

Además, ¿por qué coloca un TableLayout dentro de un LinearLayout? A menos que tengas más elementos dentro de ese Linear, puedes deshacerte de él.