Android 仿Windows Metro 介面UI

布局採用LinearLayout來實現（比較喜歡這個布局，在UI之前要有全域考慮的思想，操作起來比較簡單），每一個菜單都是一個Linear塊，內部是一個ImageView和一個TextView；一共做了兩個介面點擊互相切換，下面是效果：

 

　　　　　　　　　　　　　　　       　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 由於每個Linear塊的屬性配置都差不多很相似，所以提取出來做成了統一的style，在XML檔案中引用則更方便一些 下面是UI設計的布局檔案程式碼片段：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal" >    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="fill_parent"        android:layout_weight="1"        android:orientation="vertical"        android:padding="20dp" >        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="horizontal" >            <LinearLayout style="@style/menu_item_block_orange">                <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_mail" />                <TextView style="@style/menu_item_txt" android:text="簡訊息" />            </LinearLayout>            <LinearLayout style="@style/menu_item_block_orange" android:layout_marginLeft="5dp" >               <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_calendar"/>               <TextView style="@style/menu_item_txt" android:text="日曆" />            </LinearLayout>        </LinearLayout>        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_marginTop="5dp"            android:orientation="horizontal" >            <LinearLayout style="@style/menu_item_block_orange">                <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_phone" />                <TextView style="@style/menu_item_txt" android:text="電話" />            </LinearLayout>            <LinearLayout style="@style/menu_item_block_orange" android:layout_marginLeft="5dp">                <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_gmail" />                <TextView style="@style/menu_item_txt" android:text="Gmail" />            </LinearLayout>        </LinearLayout>