Disposición de Android con botones cuadrados

Quiero hacer un diseño similar a este:

Www.ImageBanana.net – layout.png http://www.imagebanana.com/img/9kmlhy66/thumb/layout.png

Cuatro botones cuadrados en la pantalla – cada uno de los que utilizan la mitad de la pantalla con / altura de la pantalla (lo que es smaler). Independiente del tamaño / resolución de la pantalla.

Ya he intentado lograr esto usando un LinearLayout pero los botones están terminando usando el ancho correcto, pero todavía teniendo la altura del fondo (no cuadrado más).

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <Button android:layout_height="wrap_content" style="@style/CKMainButton" android:layout_width="fill_parent" android:text="@string/sights" android:id="@+id/ApplicationMainSight" android:layout_toLeftOf="@+id/ApplicationMainEvent"></Button> <Button android:layout_height="wrap_content" style="@style/CKMainButton" android:layout_width="fill_parent" android:text="@string/sights" android:id="@+id/ApplicationMainSight" android:layout_toLeftOf="@+id/ApplicationMainEvent"></Button> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <Button android:layout_height="wrap_content" style="@style/CKMainButton" android:layout_weight="1" android:layout_width="fill_parent" android:text="@string/usergenerated" android:id="@+id/ApplicationMainUserGenerated" /> <Button android:layout_height="wrap_content" style="@style/CKMainButton" android:layout_weight="1" android:layout_width="fill_parent" android:text="@string/tours" android:id="@+id/ApplicationMainTour"/> </LinearLayout> </LinearLayout> 

Su aspecto es el siguiente: www.ImageBanana.net – layout2.png http://www.imagebanana.com/img/i2ni6g4/thumb/layout2.png

¿Cómo puedo acchieve el Layout para que parezca la imagen en la parte superior?

    5 Solutions collect form web for “Disposición de Android con botones cuadrados”

     import android.content.Context; import android.util.AttributeSet; import android.widget.LinearLayout; public class SquareLayout extends LinearLayout { // Desired width-to-height ratio - 1.0 for square private final double mScale = 1.0; public SquareLayout(Context context) { super(context); } public SquareLayout(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); if (width > (int)((mScale * height) + 0.5)) { width = (int)((mScale * height) + 0.5); } else { height = (int)((width / mScale) + 0.5); } super.onMeasure( MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY) ); } } 

    Mi solución es similar a la primera, sin embargo, hago el cambio de tamaño en el método onLayout. No sé cuál es mejor.

    Por conveniencia he envuelto mi solución en una bonita biblioteca de Android, ver https://github.com/ronaldsteen/Android-SquareLayout-Library

    Recomiendo la siguiente manera, es sencillo y funciona

     public class SquareLayout extends RelativeLayout { public SquareLayout(Context context) { super(context); } public SquareLayout(Context context, AttributeSet attrs) { super(context, attrs); } @Override public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, widthMeasureSpec); } } 

    Normalmente estoy haciendo cosas así:

     View v; // the view i want to layout squared v.measure(1,1); int size = v.getMeasuredHeight(); // or v.getMeasuredWidth()... LayoutParams params = ... // either your own, or returned from View params.width = size; params.height = size; v.setLayoutParams(params); 

    Este no es ciertamente el código más sofisticado, ya que deja la mayoría de las capacidades que pueden ser explotadas en MeasureSpec, pero se hace el trabajo, ya que 'v.measure (1,1)' sólo dice "Medir mi opinión tal cual es! .

    La ventaja absoluta en mi enfoque es que usted no tiene que subclase nada y no tiene que agregar algunos OnGlobalLayoutListener a su ViewTreeObserver . Esto funciona todo en el punto donde usted construye o infla su disposición en código.

    Ok, he aquí un ejemplo revisado:

     <?xml version="1.0" encoding="utf-8"?> <ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent"> <RelativeLayout android:id="@+id/magaLoginLayout" android:layout_height="fill_parent" android:layout_width="fill_parent"> <Button android:text="@+id/Button01" android:id="@+id/Button01" android:layout_width="160dip" android:layout_height="160dip" android:layout_marginTop="20dip"></Button> <Button android:text="@+id/Button03" android:layout_below="@+id/Button01" android:id="@+id/Button03" android:layout_alignLeft="@+id/Button01" android:layout_height="160dip" android:layout_width="160dip"></Button> <Button android:text="@+id/Button04" android:layout_below="@+id/Button01" android:id="@+id/Button04" android:layout_toRightOf="@+id/Button03" android:layout_height="160dip" android:layout_width="160dip"></Button> <Button android:text="@+id/Button02" android:id="@+id/Button02" android:layout_width="wrap_content" android:layout_toRightOf="@+id/Button01" android:layout_alignTop="@+id/Button01" android:layout_alignParentRight="true" android:layout_height="160dip"></Button> </RelativeLayout> </ViewFlipper> 

    Alt text http://img297.imageshack.us/img297/2575/tmpzg.png

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.