modern ui - Android Metro-Style Design Pattern -
i'm designing metro-style android application.
tiles, groups & scrolls done!
for who're not familiar metro-style (aka modern ui), please take @ following picture.
question :
what's best (performance wise) design pattern sorting tiles dynamically in 2 rows & multiple columns ?
- horizontalscrollview - - linearlayout - - - every 2 tiles have same weight
or
- horizontalscrollview - - tablelayout - - - every 2 tiles have same row
or
- else ?
try layout:
| relative layout
|--> horizontalscrollview
|--|--> linearlayout (showdivider=middle|beginning|end, , divider drawable=50x1])
|--|--|--> tablelayout (with weight=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>
Comments
Post a Comment