Cómo hacer un GridLayout ajustar el tamaño de la pantalla

Nota : La información debajo de la línea horizontal ya no es exacto con la introducción de Android 'Lollipop' 5, ya que GridLayout satisface el principio de los pesos desde el nivel API 21.

Citado del Javadoc :

Distribución de espacio excedente

A partir de la API 21, la distribución de GridLayout del exceso de espacio acomoda el principio de peso. En el caso de que no se especifiquen pesos, se respetan las convenciones anteriores y las columnas y filas se consideran flexibles si sus vistas especifican alguna forma de alineación dentro de sus grupos. Por lo tanto, la flexibilidad de una vista es influenciada por su alineación que, a su vez, suele definirse estableciendo la propiedad de gravedad de los parámetros de disposición del niño. Si se define un peso o una alineación a lo largo de un eje dado, entonces el componente se toma como flexible en esa dirección. Si no se estableció peso o alineación, se supone que el componente es inflexible.

Se considera que varios componentes de la misma fila o grupo de columnas actúan en paralelo. Tal grupo es flexible sólo si todos los componentes dentro de él son flexibles. Los grupos de filas y columnas que se sientan a ambos lados de un límite común se consideran en cambio actuar en serie. El grupo compuesto formado por estos dos elementos es flexible si uno de sus elementos es flexible.

Para hacer una columna de estiramiento, asegúrese de que todos los componentes en su interior definir un peso o una gravedad. Para evitar que una columna se estire, asegúrese de que uno de los componentes de la columna no define un peso o una gravedad.

Cuando el principio de flexibilidad no proporciona una desambiguación completa, los algoritmos de GridLayout favorecen filas y columnas que están más cerca de sus bordes derecho e inferior. Para ser más preciso, GridLayout trata cada uno de sus parámetros de diseño como una restricción en el conjunto de variables que definen las líneas de cuadrícula a lo largo de un eje dado. Durante el diseño, GridLayout resuelve las restricciones para devolver la solución única a aquellas restricciones para las cuales todas las variables son inferiores o iguales al valor correspondiente en cualquier otra solución válida.

También vale la pena señalar que android.support.v7.widget.GridLayout contiene la misma información. Desafortunadamente, no menciona la versión de la biblioteca de soporte con la que se introdujo, pero el commit que agrega la funcionalidad puede ser rastreado hasta julio de 2014. En noviembre de 2014, las mejoras en el cálculo de peso y un error fueron corregidos .

Para estar seguro, asegúrese de importar la última versión de la biblioteca gridlayout-v7.

El principio de "pesos", como usted lo está describiendo, no existe con GridLayout . Esta limitación se menciona claramente en la documentación ; Extracto a continuación. Dicho esto, hay algunas posibilidades de utilizar la "gravedad" para el exceso de distribución espacial. Le sugiero que haya leído la documentación vinculada.

Limitaciones

GridLayout no proporciona soporte para el principio de peso , como se define en el peso. En general, no es posible configurar un GridLayout para distribuir el espacio en exceso en proporciones no triviales entre múltiples filas o columnas. Sin embargo, algunos casos de uso comunes pueden ser acomodados de la siguiente manera. Colocar cantidades iguales de espacio alrededor de un componente en un grupo de celdas; Utilice la alineación del CENTRO (o la gravedad). Para un control completo sobre el exceso de distribución de espacio en una fila o columna; Use una subvista LinearLayout para contener los componentes en el grupo de celdas asociado. Cuando utilice cualquiera de estas técnicas, tenga en cuenta que los grupos de células se pueden definir para solaparse.

Para obtener un ejemplo y algunos consejos prácticos, eche un vistazo a la entrada del blog del año pasado que presenta el widget GridLayout .

Edit: No creo que haya un enfoque basado en xml para escalar los azulejos como en la aplicación de Google Play a "cuadrados" o "rectángulos" dos veces la longitud de esos cuadrados. Sin embargo, es ciertamente posible si crea su diseño de forma programática. Todo lo que realmente necesita saber para lograr dos que es las dimensiones de pantalla del dispositivo.

Debajo de una aproximación (muy!) Rápida y sucia del diseño de mosaico en la aplicación de Google Play.

 Point size = new Point(); getWindowManager().getDefaultDisplay().getSize(size); int screenWidth = size.x; int screenHeight = size.y; int halfScreenWidth = (int)(screenWidth *0.5); int quarterScreenWidth = (int)(halfScreenWidth * 0.5); Spec row1 = GridLayout.spec(0, 2); Spec row2 = GridLayout.spec(2); Spec row3 = GridLayout.spec(3); Spec row4 = GridLayout.spec(4, 2); Spec col0 = GridLayout.spec(0); Spec col1 = GridLayout.spec(1); Spec colspan2 = GridLayout.spec(0, 2); GridLayout gridLayout = new GridLayout(this); gridLayout.setColumnCount(2); gridLayout.setRowCount(15); TextView twoByTwo1 = new TextView(this); GridLayout.LayoutParams first = new GridLayout.LayoutParams(row1, colspan2); first.width = screenWidth; first.height = quarterScreenWidth * 2; twoByTwo1.setLayoutParams(first); twoByTwo1.setGravity(Gravity.CENTER); twoByTwo1.setBackgroundColor(Color.RED); twoByTwo1.setText("TOP"); twoByTwo1.setTextAppearance(this, android.R.style.TextAppearance_Large); gridLayout.addView(twoByTwo1, first); TextView twoByOne1 = new TextView(this); GridLayout.LayoutParams second = new GridLayout.LayoutParams(row2, col0); second.width = halfScreenWidth; second.height = quarterScreenWidth; twoByOne1.setLayoutParams(second); twoByOne1.setBackgroundColor(Color.BLUE); twoByOne1.setText("Staff Choices"); twoByOne1.setTextAppearance(this, android.R.style.TextAppearance_Large); gridLayout.addView(twoByOne1, second); TextView twoByOne2 = new TextView(this); GridLayout.LayoutParams third = new GridLayout.LayoutParams(row2, col1); third.width = halfScreenWidth; third.height = quarterScreenWidth; twoByOne2.setLayoutParams(third); twoByOne2.setBackgroundColor(Color.GREEN); twoByOne2.setText("Games"); twoByOne2.setTextAppearance(this, android.R.style.TextAppearance_Large); gridLayout.addView(twoByOne2, third); TextView twoByOne3 = new TextView(this); GridLayout.LayoutParams fourth = new GridLayout.LayoutParams(row3, col0); fourth.width = halfScreenWidth; fourth.height = quarterScreenWidth; twoByOne3.setLayoutParams(fourth); twoByOne3.setBackgroundColor(Color.YELLOW); twoByOne3.setText("Editor's Choices"); twoByOne3.setTextAppearance(this, android.R.style.TextAppearance_Large_Inverse); gridLayout.addView(twoByOne3, fourth); TextView twoByOne4 = new TextView(this); GridLayout.LayoutParams fifth = new GridLayout.LayoutParams(row3, col1); fifth.width = halfScreenWidth; fifth.height = quarterScreenWidth; twoByOne4.setLayoutParams(fifth); twoByOne4.setBackgroundColor(Color.MAGENTA); twoByOne4.setText("Something Else"); twoByOne4.setTextAppearance(this, android.R.style.TextAppearance_Large); gridLayout.addView(twoByOne4, fifth); TextView twoByTwo2 = new TextView(this); GridLayout.LayoutParams sixth = new GridLayout.LayoutParams(row4, colspan2); sixth.width = screenWidth; sixth.height = quarterScreenWidth * 2; twoByTwo2.setLayoutParams(sixth); twoByTwo2.setGravity(Gravity.CENTER); twoByTwo2.setBackgroundColor(Color.WHITE); twoByTwo2.setText("BOTOM"); twoByTwo2.setTextAppearance(this, android.R.style.TextAppearance_Large_Inverse); gridLayout.addView(twoByTwo2, sixth); 

El resultado se verá algo así (en mi Galaxy Nexus):

Después de muchos intentos encontré lo que estaba buscando en este diseño. Incluso LinearLayouts espaciados con ImageViews instalados automáticamente, con relación de aspecto mantenida. Funciona con paisaje y retrato con cualquier pantalla y resolución de imagen.

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffcc5d00" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_weight="1" android:layout_height="wrap_content"> <LinearLayout android:orientation="vertical" android:layout_width="0dp" android:layout_weight="1" android:padding="10dip" android:layout_height="fill_parent"> <ImageView android:id="@+id/image1" android:layout_height="fill_parent" android:adjustViewBounds="true" android:scaleType="fitCenter" android:src="@drawable/stackoverflow" android:layout_width="fill_parent" android:layout_gravity="center" /> </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="0dp" android:layout_weight="1" android:padding="10dip" android:layout_height="fill_parent"> <ImageView android:id="@+id/image2" android:layout_height="fill_parent" android:adjustViewBounds="true" android:scaleType="fitCenter" android:src="@drawable/stackoverflow" android:layout_width="fill_parent" android:layout_gravity="center" /> </LinearLayout> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="wrap_content"> <LinearLayout android:orientation="vertical" android:layout_width="0dp" android:layout_weight="1" android:padding="10dip" android:layout_height="fill_parent"> <ImageView android:id="@+id/image3" android:layout_height="fill_parent" android:adjustViewBounds="true" android:scaleType="fitCenter" android:src="@drawable/stackoverflow" android:layout_width="fill_parent" android:layout_gravity="center" /> </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="0dp" android:layout_weight="1" android:padding="10dip" android:layout_height="fill_parent"> <ImageView android:id="@+id/image4" android:layout_height="fill_parent" android:adjustViewBounds="true" android:scaleType="fitCenter" android:src="@drawable/stackoverflow" android:layout_width="fill_parent" android:layout_gravity="center" /> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </FrameLayout> 

A partir de la API 21, la noción de peso se añadió a GridLayout .

Para admitir dispositivos Android más antiguos, puede utilizar GridLayout de la biblioteca de soporte de v7.

 compile 'com.android.support:gridlayout-v7:22.2.1' 

El siguiente XML proporciona un ejemplo de cómo se pueden utilizar pesos para rellenar el ancho de la pantalla.

 android:id="@+id/choice_grid" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:padding="4dp" grid:alignmentMode="alignBounds" grid:columnCount="2" grid:rowOrderPreserved="false" grid:useDefaultMargins="true"> <TextView android:layout_width="0dp" android:layout_height="100dp" grid:layout_columnWeight="1" grid:layout_gravity="fill_horizontal" android:gravity="center" android:background="#FF33B5E5" android:text="Tile1" /> <TextView android:layout_width="0dp" android:layout_height="100dp" grid:layout_columnWeight="1" grid:layout_gravity="fill_horizontal" android:gravity="center" android:background="#FF33B5E5" android:text="Tile2" /> <TextView android:layout_width="0dp" android:layout_height="100dp" grid:layout_columnWeight="1" grid:layout_gravity="fill_horizontal" android:gravity="center" android:background="#FF33B5E5" android:text="Tile3" /> <TextView android:layout_width="0dp" android:layout_height="100dp" grid:layout_columnWeight="1" grid:layout_gravity="fill_horizontal" android:gravity="center" android:background="#FF33B5E5" android:text="Tile4" /> 

Si utiliza fragmentos puede preparar el diseño XML y stratch elementos críticos mediante programación

 int thirdScreenWidth = (int)(screenWidth *0.33); View view = inflater.inflate(R.layout.fragment_second, null); View _container = view.findViewById(R.id.rim1container); _container.getLayoutParams().width = thirdScreenWidth * 2; _container = view.findViewById(R.id.rim2container); _container.getLayoutParams().width = screenWidth - thirdScreenWidth * 2; _container = view.findViewById(R.id.rim3container); _container.getLayoutParams().width = screenWidth - thirdScreenWidth * 2; 

Esta disposición para 3 columnas iguales. El primer elemento toma 2×2 Resultado en la imagen

Sólo un rápido seguimiento y tenga en cuenta que ahora es posible utilizar la biblioteca de soporte con espaciado ponderado en GridLayout para lograr lo que desea, consulte:

A partir de la API 21, la distribución de GridLayout del exceso de espacio acomoda el principio de peso. En el caso de que no se especifique ningún peso, se respetan las convenciones anteriores y las columnas y filas se consideran flexibles si sus vistas especifican alguna forma de alineación dentro de sus grupos. Por lo tanto, la flexibilidad de una vista es influenciada por su alineación que, a su vez, suele definirse estableciendo la propiedad de gravedad de los parámetros de disposición del niño. Si se define un peso o una alineación a lo largo de un eje dado, entonces el componente se toma como flexible en esa dirección. Si no se estableció peso o alineación, se supone que el componente es inflexible.

LinearLayout esto usando LinearLayout

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:height="166dp" android:text="Tile1" android:gravity="center" android:background="#6f19e5"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:text="Tile2" android:layout_width="0dp" android:layout_height="wrap_content" android:height="126dp" android:gravity="center" android:layout_weight=".50" android:background="#f1d600"/> <TextView android:text="Tile3" android:layout_width="0dp" android:layout_height="wrap_content" android:height="126dp" android:gravity="center" android:layout_weight=".50" android:background="#e75548"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:text="Tile4" android:layout_width="0dp" android:layout_height="wrap_content" android:height="126dp" android:gravity="center" android:layout_weight=".50" android:background="#29d217"/> <TextView android:text="Tile5" android:layout_width="0dp" android:layout_height="wrap_content" android:height="126dp" android:gravity="center" android:layout_weight=".50" android:background="#e519cb"/> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:height="176dp" android:text="Tile6" android:gravity="center" android:background="#09eadd"/> </LinearLayout> </LinearLayout> 

Para otros peeps: Si usted tiene que usar GridLayout debido a los requisitos del proyecto, a continuación, utilizarlo, pero yo sugeriría probar TableLayout, ya que parece mucho más fácil trabajar con y logra un resultado similar.

Docs: https://developer.android.com/reference/android/widget/TableLayout.html

Ejemplo:

 <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TableRow> <Button android:id="@+id/test1" android:layout_width="wrap_content" android:layout_height="90dp" android:text="Test 1" android:drawableTop="@mipmap/android_launcher" /> <Button android:id="@+id/test2" android:layout_width="wrap_content" android:layout_height="90dp" android:text="Test 2" android:drawableTop="@mipmap/android_launcher" /> <Button android:id="@+id/test3" android:layout_width="wrap_content" android:layout_height="90dp" android:text="Test 3" android:drawableTop="@mipmap/android_launcher" /> <Button android:id="@+id/test4" android:layout_width="wrap_content" android:layout_height="90dp" android:text="Test 4" android:drawableTop="@mipmap/android_launcher" /> </TableRow> <TableRow> <Button android:id="@+id/test5" android:layout_width="wrap_content" android:layout_height="90dp" android:text="Test 5" android:drawableTop="@mipmap/android_launcher" /> <Button android:id="@+id/test6" android:layout_width="wrap_content" android:layout_height="90dp" android:text="Test 6" android:drawableTop="@mipmap/android_launcher" /> </TableRow> </TableLayout> 

¿Sabe usted que View.getViewTreeObserver (). AddOnGlobalLayoutListener ()

Con esto usted puede calcular los tamaños.

Alcance su efecto de la interfaz de usuario por GridView:

 GridView g; g.setNumColumns(2); g.setStretchMode(GridView.STRETCH_SPACING_UNIFORM);