Android 安卓仪表盘模式

Android Dashboard Pattern

提问by Robby Pond

In Tim Bray's latest Android blog posthe mentions the "dashboard" ui pattern (what is used for the Twitter app, Facebook app, etc. Is this layout as simple as a GridView with Buttons or is it something else?

在 Tim Bray 的最新 Android博客文章中，他提到了“仪表板”ui 模式（用于 Twitter 应用程序、Facebook 应用程序等的内容。这种布局是像带按钮的 GridView 一样简单还是其他什么？

Update:

更新：

The DashboardLayoutwas released by Roman Nurik last night. It is a derivative of the layout used in the Google IO 2010 app.

该DashboardLayout昨晚发布了由罗马Nurik。它是 Google IO 2010 应用程序中使用的布局的衍生版本。

回答by Jaime Botero

The best example you can use is from the Google I/O 2011 Android App. They implement all those design patterns in their app. You can find the code at the following link:

您可以使用的最佳示例来自 Google I/O 2011 Android 应用程序。他们在他们的应用程序中实现了所有这些设计模式。您可以在以下链接中找到代码：

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

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

The 2011 version uses a custom layout called 'DashboardLayout' in a fragment which gets shared in phone and tablet specific layouts. The logic in DashboardLayout is responsible for all the auto layout magic!

2011 版本在一个片段中使用称为“DashboardLayout”的自定义布局，该片段在手机和平​​板电脑特定布局中共享。DashboardLayout 中的逻辑负责所有自动布局魔法！

回答by David Vávra

Code of DashboardLayout from IO 2010 app was rather buggy. But Roman Nurik has fixed it and now it's possible to use DashboardLayout easily in your app.

来自 IO 2010 应用程序的 DashboardLayout 代码相当有问题。但是 Roman Nurik 已经修复了它，现在可以在您的应用程序中轻松使用 DashboardLayout。

Howto:

如何：

1. Add this classinto your project
2. In your layout, just drop couple of buttons inside DashboardLayout, similar like here.

1. 将此类添加到您的项目中
2. 在您的布局中，只需在 DashboardLayout 中放置几个​​按钮，就像这里一样。

回答by thunsaker

I was able to achieve a similar dashboard using a relative layout. Its still a work in progress, so your mileage may vary.

我能够使用相对布局实现类似的仪表板。它仍在进行中，因此您的里程可能会有所不同。

<?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>

回答by AlikElzin-kilaka

The Dashboard layout did not work for me, thus I suggest a layout based solution. It's just a bunch of layouts within layouts.

仪表板布局对我不起作用，因此我建议使用基于布局的解决方案。它只是布局中的一堆布局。

The key is the relativity of weights between the spacing layouts and the content layouts.

关键是间距布局和内容布局之间权重的相关性。

You can very simply move icons and define other layouts for bigger or lighter dashboards.

您可以非常简单地移动图标并为更大或更轻的仪表板定义其他布局。

Here is how it looks like:

这是它的样子：

And here is the xml:

这是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>

Here are the 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>

Hope this helps someone. Enjoy.

希望这可以帮助某人。享受。

回答by Jitu

the best and the simplest way of creating Dashboard..

创建仪表板的最佳和最简单的方法..

very nicely explained

很好的解释

How To Build A Dashboard User Interface In Android

如何在 Android 中构建仪表板用户界面

回答by molnarm

It couldbe implemented with a TableLayout containing Image- and TextViews.

它可以通过包含 Image- 和 TextViews 的 TableLayout 来实现。

回答by Macarse

romannurik posted recently a custom ViewGroupto do this. The code is here.

romannurik 最近发布了一个习惯ViewGroup来做到这一点。代码在这里。