reloj - widgets android 7

Cómo hacer que un GridLayout se ajuste al tamaño de la pantalla

Question

Los documentos API de GridLayout son muy difíciles de aprender ...
¿Hay alguien que pueda enseñarme a configurar View para niños para que tenga algo así como "weight" de LinearLayout ?

En este momento, parece que todos están ubicados en el lado izquierdo,
Lo he intentado muchas veces y todavía no puedo hacer que cada mitad del ancho de la pantalla sea igual.

Editado: no sé qué puedo hacer cuando los niños son todos wrap_content ...... incluso si quiero establecer una imagen en un tamaño específico, esta clase me ayuda a hacer ImageView wrap_content ...... ... no puede funcionar normal, ¿me perdí un poco de configuración?!?

Answer 1

¿Conoces View.getViewTreeObserver (). AddOnGlobalLayoutListener ()

Por esto puedes calcular los tamaños.

Logré tu efecto UI con GridView:

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

Answer 2

Comenzando en API 21, la noción de peso se agregó a GridLayout .

Para admitir dispositivos Android antiguos, puede usar GridLayout desde la biblioteca de soporte v7.

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

El siguiente XML proporciona un ejemplo de cómo puede usar pesos para llenar 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" />

Answer 3

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 resolución de pantalla y 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/"
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/"
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/"
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/"
android:layout_width="fill_parent"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>

Answer 4

Para otras personas: si tiene que usar GridLayout debido a los requisitos del proyecto, utilícelo, pero le sugiero probar TableLayout, ya que parece mucho más fácil trabajar con él y lograr un resultado similar.

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

Answer 5

Si usa fragmentos, puede preparar el diseño XML y estratificar los 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. Primer elemento toma 2x2 Resultado en la imagen

Answer 6

Solo haga un seguimiento rápido 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 API 21, la distribución de exceso de espacio de GridLayout cumple con 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 toman como flexibles si sus vistas especifican alguna forma de alineación dentro de sus grupos. Por lo tanto, la flexibilidad de una vista está influenciada por su alineación que, a su vez, se define típicamente estableciendo la propiedad de gravedad de los parámetros de diseño del niño. Si se definió un peso o una alineación a lo largo de un eje determinado, entonces el componente se toma como flexible en esa dirección. Si no se estableció ningún peso o alineación, se supone que el componente es inflexible.

Answer 7

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>

Answer 8

Nota : La información debajo de la línea horizontal ya no es precisa con la introducción de Android ''Lollipop'' 5, ya que GridLayout ajusta al principio de ponderaciones desde API nivel 21.

Citado del Javadoc :

Exceso de distribución de espacio

A partir de API 21, la distribución de exceso de espacio de GridLayout cumple con 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 toman como flexibles si sus vistas especifican alguna forma de alineación dentro de sus grupos. Por lo tanto, la flexibilidad de una vista está influenciada por su alineación que, a su vez, se define típicamente estableciendo la propiedad de gravedad de los parámetros de diseño del niño. Si se definió un peso o una alineación a lo largo de un eje determinado, entonces el componente se toma como flexible en esa dirección. Si no se estableció ningún peso o alineación, se supone que el componente es inflexible.

Se considera que varios componentes en la misma fila o grupo de columnas actúan en paralelo. Tal grupo es flexible solo si todos los componentes dentro de él son flexibles. Por el contrario, se considera que los grupos de filas y columnas que se encuentran a ambos lados de un límite común actúan en serie. El grupo compuesto formado por estos dos elementos es flexible si uno de sus elementos es flexible.

Para hacer que una columna se estire, asegúrese de que todos los componentes que contiene definan un peso o una gravedad. Para evitar que una columna se estire, asegúrese de que uno de los componentes de la columna no defina un peso o una gravedad.

Cuando el principio de flexibilidad no proporciona desambiguación completa, los algoritmos de GridLayout favorecen las filas y columnas que están más cerca de sus bordes derecho e inferior. Para ser más precisos, 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 la 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 menores que 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. Lamentablemente, no menciona con qué versión de la biblioteca de soporte se introdujo, pero el compromiso que agrega la funcionalidad se puede rastrear hasta julio de 2014. En noviembre de 2014, se corrigieron las mejoras en el cálculo del peso y un error .

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

El principio de ''pesos'', como lo describes, no existe con GridLayout . Esta limitación se menciona claramente en la Javadoc ; extracto a continuación. Dicho esto, hay algunas posibilidades de usar ''gravedad'' para la distribución de espacio en exceso. Sugiero que hayas leído la documentación vinculada.

Limitaciones

GridLayout no brinda soporte para el principio de peso , tal como se define en peso. En general, no es posible configurar un GridLayout para distribuir el exceso de espacio en proporciones no triviales entre múltiples filas o columnas. Sin embargo, algunos casos de uso comunes pueden acomodarse de la siguiente manera. Para colocar cantidades iguales de espacio alrededor de un componente en un grupo celular; use la alineación CENTRAL (o gravedad). Para un control completo sobre el exceso de distribución de espacio en una fila o columna; use una subvista LinearLayout para mantener los componentes en el grupo celular asociado. Al usar cualquiera de estas técnicas, tenga en cuenta que los grupos de células pueden definirse para superponerse.

Para ver un ejemplo y algunos consejos prácticos, eche un vistazo a la publicación de blog del año pasado que presenta el widget GridLayout .

Editar: no creo que haya un enfoque basado en xml para escalar los mosaicos como en la aplicación Google Play a ''cuadrados'' o ''rectángulos'' dos veces la longitud de esos cuadrados. Sin embargo, es ciertamente posible si construye su diseño programáticamente. Todo lo que necesitas saber para lograr esto son las dimensiones de la pantalla del dispositivo.

Debajo de una (¡muy!) Rápida y sucia aproximación del diseño en teselas en la aplicación 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):