Cómo crear la interfaz de usuario como la foto adjunta
¿Puede alguien decirme qué es este efecto de foto llamado. Y me gustaría saber cómo crear un adaptador para este efecto de imagen adjunto.
@Editado: Esta es una foto de muestra del mercado de Android. Quiero crear un diseño como este. Supongo que esto debería hacerse sobreponiendo un adaptador GridView.
- Barras del sistema translúcido y margen de contenido en KitKat
- ¿Por qué DrawerLayout a veces falla al abrirse?
- Cerrar Gaveta de navegación sin animación
- ¿Existe alguna diferencia entre "center_horizontal | center_vertical" y "center"
- ¿Cómo cambiar la posición del indicador del grupo ExpandableListView?
Portrait Captura de pantalla
Foto http://i50.tinypic.com/donq4m.png
Imágenes de Landscape
Foto http://oi50.tinypic.com/foqipw.jpg
Otra Captura de pantalla
Foto http://i47.tinypic.com/103yek1.png
Siento mucho que mi pregunta no estuviera clara para ustedes.
Posible duplicado .
- Cambiar el color de texto de un solo ClickableSpan cuando se presiona sin afectar a otros ClickableSpans en el mismo TextView
- ¿Cuáles son los requisitos para una fuente (OTF o TTF) para que funcione bien en Android?
- Cambiar el fondo con la animación cuando el usuario hace clic en él
- Listview en android no actualizó la vista hasta que se arrastró
- Cambiar del diseño main.xml a otro diseño
- Cómo deshabilitar la disposición de cajones de un lado?
- ¿Por qué android le da advertencia sobre el uso de tamaño menor que 12sp?
- Combinar la imagen de fondo, el estilo de fondo dibujable en un botón
¿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.