En la última versión de Android de Tim Bray blog post menciona el patrón de interfaz gráfica de usuario ("tablero") (qué se usa para la aplicación de Twitter, Facebook, etc.). ¿Este diseño es tan simple como un GridView con botones o es algo más?Android Dashboard Pattern
actualización:
el DashboardLayout fue lanzado por Roman Nurik anoche es un derivado de la disposición usada en el Google IO 2010 aplicación
El mejor ejemplo que puede utilizar es de la Google I/O 2011 Android App. Implementan todos los patrones de diseño en su aplicación. Puede encontrar el código en el siguiente enlace:
La versión 2011 utiliza un diseño personalizado llamado 'DashboardLayout' en un fragmento que se comparte en el teléfono y la tableta diseños específicos. ¡La lógica en DashboardLayout es responsable de toda la magia del diseño automático!
el enlace está roto ahora – Axarydax
actualizado con el enlace a la versión 2011 –
El diseño del tablero no funcionó para mí. Puso todos los iconos uno encima del otro. Sucede cuando lo uso en otro elemento de diseño. Tal vez el cálculo tiene problemas con un diseño externo? –
se podría implementarse con una tabla.. Diseño que contiene Imágenes y TextViews.
¿Puede por favor publicar un ejemplo o un enlace a un buen ejemplo? Gracias. –
Pude lograr un tablero similar con una disposición relativa. Todavía es un trabajo en progreso, por lo que su kilometraje puede variar.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/lay_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout android:id="@+id/lay_action"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000" >
<TextView android:id="@+id/label_header"
android:layout_width="wrap_content"
android:layout_height="50px"
android:text="@string/app_title"
android:textColor="#000000"
android:textSize="25sp"
android:paddingLeft="10px"
android:gravity="center_vertical"
android:layout_gravity="center_vertical"
/>
</LinearLayout>
<RelativeLayout android:id="@+id/lay_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/lay_action"
android:paddingTop="25px"
android:layout_centerInParent="true">
<Button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button1"
android:padding="25dip"
android:drawableTop="@drawable/button1" />
<Button android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/button1"
android:text="@string/button2"
android:padding="25dip"
android:drawableTop="@drawable/button2" />
<Button android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button1"
android:text="@string/button3"
android:padding="25dip"
android:drawableTop="@drawable/button3" />
<Button android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/button3"
android:layout_below="@id/button2"
android:text="@string/button4"
android:padding="25dip"
android:drawableTop="@drawable/button4" />
</RelativeLayout>
</RelativeLayout>
romannurik publicó recientemente una costumbre ViewGroup para hacer esto. El código es here.
El código ya no se mantiene en github. Ver comentario: **/* * ATENCIÓN: * * Este diseño ahora se mantiene en el proyecto 'iosched 'code.google.com: * * http://code.google.com/p/iosched/ source/browse/android/src/com/google/android/apps/iosched/ui/widget/DashboardLayout.java * */** –
@kilaka: Tu enlace está muerto –
@AbdulRahman: cambiaron el código. El tablero si ya no se usa. Mira el historial: allí encontrarás el código. –
Código de DashboardLayout de la aplicación IO 2010 fue un poco problemático. Pero Roman Nurik lo ha solucionado y ahora es posible usar DashboardLayout fácilmente en tu aplicación.
Como:
Quizás este enlace es útil, por favor, compruebe el código fuente de muestra que se encuentra en el blog.
http://blahti.wordpress.com/2011/03/14/build-dashboard-ui-for-android/
la mejor y la forma más sencilla de crear tablero de instrumentos ..
explica muy bien
El diseño del tablero de instrumentos no funcionó para mí, por lo tanto sugiero un diseño solución basada Es solo un montón de diseños dentro de los diseños.
La clave es la relatividad de los pesos entre los diseños de espaciado y los diseños de contenido.
Puede simplemente mover iconos y definir otros diseños para tableros más grandes o más ligeros.
Así es como se ve:
Y aquí es el xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/dashboard"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout style="@style/dashboard_space_vertical" />
<LinearLayout style="@style/dashboard_content_vertical" >
<FrameLayout style="@style/dashboard_space_horizontal" >
</FrameLayout>
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 1" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 2" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_vertical" />
<LinearLayout style="@style/dashboard_content_vertical" >
<FrameLayout style="@style/dashboard_space_horizontal" />
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 3" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 4" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_vertical" />
<LinearLayout style="@style/dashboard_content_vertical" >
<FrameLayout style="@style/dashboard_space_horizontal" />
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 5" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
<LinearLayout style="@style/dashboard_content_horizontal" >
<ImageView
style="@style/dashboard_imageview"
android:src="@android:drawable/sym_call_missed" />
<TextView
style="@style/dashboard_textview"
android:text="Text 6" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_horizontal" />
</LinearLayout>
<FrameLayout style="@style/dashboard_space_vertical" />
</LinearLayout>
Éstos son los estilos:
<resources>
<style name="dashboard_space_vertical">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">0px</item>
<item name="android:layout_weight">1</item>
</style>
<style name="dashboard_content_vertical">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">0px</item>
<item name="android:layout_weight">3</item>
<item name="android:layout_gravity">center</item>
</style>
<style name="dashboard_space_horizontal">
<item name="android:layout_width">0px</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">2</item>
<!-- <item name="android:background">@color/black</item> -->
</style>
<style name="dashboard_content_horizontal">
<item name="android:layout_width">0px</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">3</item>
<item name="android:orientation">vertical</item>
<item name="android:layout_gravity">center</item>
<item name="android:gravity">center</item>
</style>
<style name="dashboard_imageview">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:scaleType">fitCenter</item>
</style>
<style name="dashboard_textview">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center</item>
<item name="android:textSize">@dimen/dashboard_thumbnail_text_size</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/blue</item>
</style>
</resources>
Espero que esto ayude a alguien. Disfrutar.
Lo uso usando un include:
La aplicación de Twitter se lanzará en algún momento como código abierto, como se señala en esa publicación del blog. Hasta entonces, va a ser difícil para nosotros contar cómo se implementa. – CommonsWare
¿Alguien tiene una solución para un Tablero con arrastrar y soltar vistas dentro del tablero con autoreorganización de niños y una miniatura de la vista que aparece en el arrastre? – Snicolas