android - Android Metro スタイルのデザイン パターン

Question

Metro スタイルの Android アプリケーションを設計しています。
タイル、グループ、スクロールが完了しました!

Metro スタイル (別名モダン UI) に慣れていない方は、次の図をご覧ください。

質問:
タイルを 2 行と複数列で動的に並べ替えるための (パフォーマンスに関して) 最適な設計パターンは何ですか?

- HorizontalScrollView
- - LinearLayout  
- - - Every 2 tiles have same weight

または

- HorizontalScrollView
- - TableLayout
- - - Every 2 tiles have same row

または

- Something else ?

Answer 1

このレイアウトを試してください:

| | 相対レイアウト

|--> Horizo​​ntalScrollView

|--|--> LinearLayout (showDivider=middle|beginning|end、dedivider drawable=50x1])

|--|--|--> TableLayout (重み = 1 の場合)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="#011a41"
    android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Main" >

    <HorizontalScrollView android:id="@+id/horizontalScrollView1"
        android:layout_width="match_parent" android:layout_height="match_parent"
        android:layout_alignParentLeft="true" android:layout_alignParentTop="true" >

        <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
            android:orientation="horizontal" android:divider="@drawable/divider"
            android:showDividers="middle|beginning|end" >

            <TableLayout android:layout_width="wrap_content" android:layout_height="match_parent" >
                <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:layout_weight="1" >
                    <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" />
                </TableRow>

                <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:layout_weight="1" >
                    <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" />
                </TableRow>

                <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:layout_weight="1" >
                    <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" />
                </TableRow>

                <TableRow android:id="@+id/tableRow4" android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:layout_weight="1" >
                    <ImageView android:id="@+id/imageView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" />
                </TableRow>
            </TableLayout>

            <TableLayout android:layout_width="wrap_content" android:layout_height="match_parent" >
                <TableRow android:id="@+id/tableRow5" android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:layout_weight="1" >
                    <ProgressBar android:id="@+id/progressBar1" android:layout_width="wrap_content" android:layout_height="wrap_content" />
                </TableRow>

                <TableRow android:id="@+id/tableRow6" android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:layout_weight="1" >
                    <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" />
                </TableRow>

                <TableRow android:id="@+id/tableRow7" android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:layout_weight="1" >
                    <CheckBox android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="CheckBox" />
                </TableRow>

                <TableRow android:id="@+id/tableRow8" android:layout_width="wrap_content" android:layout_height="wrap_content"
                    android:layout_weight="1" >
                    <ToggleButton android:id="@+id/toggleButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ToggleButton" />
                </TableRow>
            </TableLayout>
        </LinearLayout>
    </HorizontalScrollView>
</RelativeLayout>