Diseño de Android con botones cuadrados

Quiero hacer un diseño similar a este:

www.ImageBanana.net – layout.png http://sofes.miximages.com/android/layout.png

Cuatro botones cuadrados en la pantalla: cada uno de ellos usa la mitad de la pantalla con / altura de pantalla (lo que sea más pequeño). Independiente del tamaño / resolución de la pantalla.

Ya traté de lograr esto usando un LinearLayout pero los botones terminan usando el ancho correcto, pero aún tienen el alto del fondo (no más cuadrados).

       

Se ve así: www.ImageBanana.net – layout2.png http://sofes.miximages.com/android/layout2.png

¿Cómo puedo lograr que el diseño se parezca a la imagen de arriba?

 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.

Para mayor comodidad, he incluido mi solución en una buena biblioteca de Android, consulte https://github.com/ronaldsteen/Android-SquareLayout-Library

Lo recomiendo de 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); } } 

Por lo general, hago cosas como esas:

 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 ciertamente no es el código más sofisticado, ya que deja la mayoría de las capacidades que se pueden explotar en MeasureSpec, pero hace el trabajo, ya que ‘v.measure (1,1)’ solo dice “¡Mida mi vista tal como está!” .

La ventaja absoluta en mi enfoque es que no tiene que subclasificar nada y no tiene que agregar OnGlobalLayoutListener a su ViewTreeObserver . Esto funciona en el lugar donde construyes o inflas tu diseño en código.

Puede lograr esto usando RestricciónLechada . Simplemente debe agregar una línea vertical con la posición de 50% de ancho de pantalla, alinee sus botones a la izquierda y derecha de la línea guía y mida el tamaño en relación de aspecto 1: 1. Todo se puede hacer en el archivo XML de diseño, no se requiere código fuente adicional.

Una vez que haya completado todos estos pasos, terminará con algo como esto:

        

Así es como se ve este diseño en las pantallas más grandes contra las más grandes:

Vista de resultados

ok, aquí hay un ejemplo revisado:

 < ?xml version="1.0" encoding="utf-8"?>         

texto alternativo http://img297.imageshack.us/img297/2575/tmpzg.png