Android仪表板模式

在Tim Bray的最新Android 博客文章中，他提到了“仪表板”UI模式（用于Twitter应用程序，Facebook应用程序等等）。这种布局是否像使用Buttons的GridView一样简单，还是其他的东西？

更新：

DashboardLayout由Roman Nurik昨晚发布。 它是Google IO 2010应用程序中使用的布局的衍生物。

Answer 1

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

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

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

Answer 2

来自IO 2010应用程序的DashboardLayout代码相当麻烦。 但罗马Nurik已经修复它，现在可以在您的应用程序中轻松使用DashboardLayout。

如何：

1. 将这个类添加到您的项目中
2. 在你的布局中，只需放下DashboardLayout中的几个button，类似于这里 。

Answer 3

我能够使用相对布局来实现类似的仪表板。 它仍然是一个工作进展，所以你的里程可能会有所不同。

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

Answer 4

仪表板布局不适合我，因此我build议基于布局的解决scheme。 这只是布局中的一些布局。

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

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

以下是它的样子：

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

这里是样式：

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

希望这有助于某人。 请享用。

Answer 5

也许这个链接是有用的，请检查博客中附带的示例源代码。

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

Answer 6

它可以用包含Image和TextViews的TableLayout实现。

Answer 7

创build仪表板的最好也是最简单的方法

非常好的解释

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

Answer 8

romannurik最近发布了一个自定义ViewGroup来做到这一点。 代码在这里 。