萬盛學電腦網

 萬盛學電腦網 >> 網絡編程 >> 安卓開發 >> Android 仿Windows Metro 界面UI

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>			
copyright © 萬盛學電腦網 all rights reserved