Dans le dernier article de Tim Bray sur Android article de blog il mentionne le modèle d'interface utilisateur "tableau de bord" (utilisé pour l'application Twitter, l'application Facebook, etc. Est-ce que cette disposition est aussi simple qu'un GridView avec des boutons ou est-ce que c'est autre chose ?
Mise à jour :
En DashboardLayout a été publié par Roman Nurik hier soir. Il s'agit d'un dérivé de la présentation utilisée dans l'application Google IO 2010.
Le meilleur exemple est celui de l'application Android de la conférence Google I/O 2011. Elle met en œuvre tous ces modèles de conception dans son application. Vous pouvez trouver le code sur le lien suivant :
La version 2011 utilise une mise en page personnalisée appelée "DashboardLayout" dans un fragment qui est partagé dans des mises en page spécifiques aux téléphones et aux tablettes. La logique de DashboardLayout est responsable de toute la magie de la mise en page automatique !
Le code de DashboardLayout de l'application IO 2010 était plutôt bogué. Mais Roman Nurik l'a corrigé et il est maintenant possible d'utiliser DashboardLayout facilement dans votre application.
Comment faire :
J'ai pu obtenir un tableau de bord similaire en utilisant une mise en page relative. Il s'agit encore d'un travail en cours, donc votre kilométrage peut varier.
<?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>
Si ce lien vous est utile, veuillez consulter l'exemple de code source joint au blog.
http://blahti.wordpress.com/2011/03/14/build-dashboard-ui-for-Android/
La présentation du tableau de bord n'a pas fonctionné pour moi, c'est pourquoi je propose une solution basée sur la présentation. Il s'agit simplement d'un ensemble de modèles dans des modèles.
La clé est la relativité des poids entre les dispositions d'espacement et les dispositions de contenu.
Vous pouvez très simplement déplacer les icônes et définir d'autres dispositions pour des tableaux de bord plus grands ou plus légers.
Voici à quoi cela ressemble :
Et voici le 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>Voici les styles :
<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>J'espère que cela aidera quelqu'un. Bon appétit.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
