web-dev-qa-db-fra.com

Android Modèle de tableau de bord

Dans le dernier Android article de blog de Tim Bray, il mentionne le modèle d'interface utilisateur "tableau de bord" (ce qui est utilisé pour l'application Twitter, l'application Facebook, etc.). en tant que GridView avec boutons ou est-ce autre chose?

Mise à jour:

Le DashboardLayout a été publié hier soir par Roman Nurik. Il s'agit d'un dérivé de la mise en page utilisée dans l'application Google IO 2010.

androidlayoutdashboard
35
Robby Pond

Le meilleur exemple que vous pouvez utiliser est celui de l'application Google I/O 2011 Android. Ils implémentent tous ces modèles de conception dans leur application. Vous pouvez trouver le code sur le lien suivant:

http://code.google.com/p/iosched/source/browse/Android/res/layout/fragment_dashboard.xml?r=27a82ff10b436da5914a3961df245ff8f66b6252

La version 2011 utilise une disposition personnalisée appelée "DashboardLayout" dans un fragment qui est partagé dans des dispositions spécifiques au téléphone et à la tablette. La logique de DashboardLayout est responsable de toute la magie de la mise en page automatique!

41
Jaime Botero

Le code de DashboardLayout de 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:

  1. Ajoutez cette classe dans votre projet
  2. Dans votre mise en page, déposez simplement quelques boutons dans DashboardLayout, similaires comme ici .
25
David Vávra

Peut-être que ce lien est utile, veuillez vérifier l'exemple de code source joint au blog.

http://blahti.wordpress.com/2011/03/14/build-dashboard-ui-for-Android/

4
ReachmeDroid

La disposition du tableau de bord ne fonctionnait pas pour moi, donc je suggère une solution basée sur la disposition. C'est juste un tas de mises en page dans les mises en page.

La clé est la relativité des poids entre les dispositions d'espacement et les dispositions de contenu.

Vous pouvez très simplement déplacer des icônes et définir d'autres dispositions pour des tableaux de bord plus grands ou plus légers.

Voici à quoi ça ressemble:

portrait

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 aide quelqu'un. Prendre plaisir.

4
AlikElzin-kilaka

J'ai pu obtenir un tableau de bord similaire en utilisant une disposition relative. C'est toujours 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>
4
thunsaker

le meilleur et le plus simple moyen de créer Dashboard ..

très bien expliqué

Comment construire une interface utilisateur de tableau de bord sous Android

2
Jitu

Il pourrait être implémenté avec un TableLayout contenant Image- et TextViews.

2
molnarm

romannurik a récemment publié un ViewGroup personnalisé pour ce faire. Le code est ici .

1
Macarse