Cómo crear la interfaz de usuario como la foto adjunta

¿Has probado esto:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="0.54" > <Button android:id="@+id/Button01" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1.00" android:text="Button" /> <Button android:id="@+id/Button02" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1.00" android:text="Button" /> </LinearLayout> <Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <LinearLayout android:layout_width="match_parent" android:layout_height="99dp" > <Button android:id="@+id/button1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="Button" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="152dp" android:text="Button" /> <Button android:id="@+id/button5" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <Button android:id="@+id/button6" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button7" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> </LinearLayout> </LinearLayout> </LinearLayout> 

Compruebe este hilo: Heterogeneous GridLayout

Crea en este orden:

LinearLayout (VERTICAL) con pesoSum de 2;

LinearLayout (VERTICAL) con peso de 1 y pesoSum de 3;

Dentro de él será 3 diseños, disposición horizontal lineal con el peso de .70, disposición linear horizontal con el peso de .50 y un imageView con el peso de 1.80

LinearLayout (VERTICAL) con un peso de 1 y un peso de 3;

Dentro de él serán 3 disposiciones lineales

2 * (2 de estos) -horizontal con un peso de .50 y una suma de peso de 2 dentro de este diseño horizontal serán dos vistas de imagen con un peso de 1 cada una

En tercer lugar y finalmente una imagen con el peso de 1,50

Haz esto y tendrás el diseño correctamente ponderado a tu gusto

Puede crear un diseño de tabla y, en la fila de la tabla, puede agregar col y span de fila para crear dicho diseño.

Éste no se parece a un Gridview normal oa un adaptador listview. Puede que tenga que crear un control personalizado para ello. Por ejemplo, en el ejemplo dado algunas aplicaciones tienen más peso comparado con otros. Los que tienen más weightage deben ocupar el ancho total y otros ocuparán el 50% o el 33% del ancho (basado en el paisaje o el retrato).

Así que la lógica crear un diseño de tabla y basado en el weightage añadir más controles en el adaptador. Y basado en el weightage usted tiene que crear la fila o el palmo de la columna en consecuencia.

Si tuviera que replicar el diseño del mercado, estas son las siguientes clases que usaría:

  1. Obviously ViewPager for horizontal swiping ability. 2. A heavily customized ListView. 

Hay un método en ListView llamado addHeaderView() , en el que puede manipular los primeros elementos que aparecieron en el listview con su propio diseño personalizado. En este caso, el primer, cuarto, quinto y sexto elemento de la lista será un ImageView con el par de coincidencias para su ancho y probablemente una altura fija.

El segundo y tercer elemento será simplemente un LinearLayout horizontal con 2 ImageViews con pesos iguales, y el resto son simplemente listas con diseños personalizados.

Todo lo anterior se refiere a la vista "Retrato" en el teléfono. Para la vista "paisaje", nuevamente, tendrá que hacerlo manualmente.

El truco es cómo modificar su BaseAdapter para llenar su listview. En listas por defecto, una "posición" se refiere a una fila en el listview. En este caso, el diseño de listview personalizado consta de dos elementos en una sola fila. Trate de averiguarlo, jugar con sus datos y matrices. Estoy seguro de que se puede hacer. =)

Esto se debe hacer con un GridView .

Por el aspecto de que usted tiene 3 tamaños: uno que cubre un espacio, uno que cubre 2 y uno que cubre 4 espacios. No debería ser fácil.

Pero cómo las imágenes están en una pila y cómo el diseño está orientado Creo que la mejor opción que tienes es ir por un GridView . Es bastante flexible en la implementación de columnas y filas y da algunas implementaciones listas en los cambios de orientación.

Usted debe hacer 3 tipo de elementos uno que tiene 4 View pequeño s, otro que tiene 2 elementos y otro que tiene una gran View . En cada celda puede haber una de las anteriores.

De acuerdo con algunas propiedades debe llenar el GridView . A continuación, debe experimentar con las opciones que proporciona GridView (tiene algunas propiedades que "auto" apila los elementos de acuerdo con el ancho y la altura en el diseño). Eso es todo lo que puedo ofrecer porque no he hecho nada similar.

EDIT: Tratando de implementar la interfaz del mercado Android sin buscar un poco y sólo por copiar y pegar? Esto NO puede ser tan fácil como usted piensa que es.

De todos modos, si yo fuera tú todavía empezaría con la implementación que mencioné antes. Aunque no puedo proporcionar ningún código, porque no he hecho nada similar, en su caso el GridView con toda la implementación que ya proporciona sería de gran ayuda.

PS: Mi opinión es tratar de buscar un poco primero y luego actualizar la pregunta de nuevo.

Creo que la aplicación de mercado se realiza utilizando un ViewPager y cada página contiene un RelativeLayout o LinearLayout . Para hacer un metro como interfaz, un GridView para cada página es más adecuado.

  page 1 page 2 page 3 ________________________________________________ | | | | | | | | | GridView | GridView | GridView | | | | | | | | | | | | | | | | | | | | | ------------------------------------------------- 

Aquí encontrará algunos enlaces a los tutoriales de ViewPager

Otro aquí

Actualizar:

Incluso puede utilizar un OverScroller para darle un efecto elástico mientras se desplaza.