web-dev-qa-db-ja.com

Androidダッシュボードパターン

Tim Brayの最新のAndroid blog post で、彼は「ダッシュボード」のuiパターン（Twitterアプリ、Facebookアプリなどに使用されているもの）について言及しています。このレイアウトはシンプルですか？ボタン付きのGridViewとして、またはそれは何か他のものですか？

更新：

DashboardLayout は、昨夜、Roman Nurikによってリリースされました。これは、Google IO 2010アプリで使用されるレイアウトの派生物です。

androidlayoutdashboard
35
Robby Pond

使用できる最良の例は、Google I/O 2011 Androidアプリからのものです。アプリにはこれらすべてのデザインパターンが実装されています。コードは次のリンクにあります。

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

2011バージョンは、「DashboardLayout」と呼ばれるカスタムレイアウトをフラグメントで使用し、携帯電話とタブレット固有のレイアウトで共有されます。 DashboardLayoutのロジックは、すべての自動レイアウトマジックを担当します。

41
Jaime Botero

IO 2010アプリからのDashboardLayoutのコードはかなりバグがありましたが、Roman Nurikが修正し、アプリでDashboardLayoutを簡単に使用できるようになりました。

方法：

  1. this class をプロジェクトに追加します
  2. レイアウトで、ダッシュボードレイアウト内にいくつかのボタンをドロップするだけで、同様に ここのように のようになります。
25
David Vávra

多分このリンクは役に立つでしょう、ブログに添付されているサンプルのソースコードをチェックしてください。

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

4
ReachmeDroid

ダッシュボードレイアウトが機能しなかったため、レイアウトベースのソリューションをお勧めします。レイアウト内のレイアウトの集まりにすぎません。

重要なのは、間隔レイアウトとコンテンツレイアウトの間の重みの相対性です。

非常に簡単にアイコンを移動し、ダッシュボードを大きくまたは軽くするために他のレイアウトを定義できます。

これは次のようになります。

portrait

そしてここに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>

これが誰かを助けることを願っています。楽しい。

4
AlikElzin-kilaka

相対レイアウトを使用して、同様のダッシュボードを実現できました。その作業はまだ進行中であるため、走行距離は異なる場合があります。

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

ダッシュボードを作成する最良かつ最も簡単な方法。

とてもうまく説明された

Androidでダッシュボードユーザーインターフェイスを作成する方法

2
Jitu

couldは、ImageViewおよびTextViewを含むTableLayoutで実装されます。

2
molnarm

romannurikは最近、これを行うためのカスタムViewGroupを投稿しました。コードは here です。

1
Macarse