Android 仿Windows Metro 界面UI

虽然自己对windows Phone没有太大的兴趣，但是不得不说很喜欢Metro的这种风格。Metro是由微软公司开发的内部名称为" typography-based design language"(基于排版的设计语言)，起初基于瑞士平面设计的设计原则，界面以大号文字和图片为主要元素来吸引用户的注意力，其设计理念来源于交通局巴士站牌，机场和地铁的指示牌。他的图标设计不同于Android和ios的纯桌面图标，主要有一下特点：

1. 干净、轻量、开放、快速
2. 要内容，而不是质感
3. 整合软硬件
4. 世界级的动画
5. 生动，有灵魂

 

确实当第一次看见的时候会给人视觉上耳目一新的一种冲击感觉，反正我个人是比较喜欢这个风格，闲来无事的时候做了一个简单仿Metro的UI布局，真的仅仅是仿UI布局而已，没有太多的技术性的东西，个人很喜欢研究UI 的东西，下面分享一下这个简单的Demo，或许以后会用到这种效果。

 

想法很简单，布局采用LinearLayout来实现（比较喜欢这个布局，在UI之前要有全局考虑的思想，操作起来比较简单），每一个菜单都是一个Linear块，内部是一个ImageView和一个TextView；一共做了两个界面点击互相切换，下面是效果截图：

                                                                                                      

 

由于每个Linear块的属性配置都差不多很相似，所以提取出来做成了统一的style，在XML文件中引用则更方便一些

 

下面是UI设计的布局文件代码片段：

[java] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="match_parent"  
3.     android:layout_height="match_parent"  
4.     android:orientation="horizontal" >  
5.   
6.     <LinearLayout  
7.         android:layout_width="wrap_content"  
8.         android:layout_height="fill_parent"  
9.         android:layout_weight="1"  
10.         android:orientation="vertical"  
11.         android:padding="20dp" >  
12.   
13.         <LinearLayout  
14.             android:layout_width="fill_parent"  
15.             android:layout_height="wrap_content"  
16.             android:orientation="horizontal" >  
17.   
18.             <LinearLayout style="@style/menu_item_block_orange">  
19.                 <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_mail" />  
20.                 <TextView style="@style/menu_item_txt" android:text="短信息" />  
21.             </LinearLayout>  
22.   
23.             <LinearLayout style="@style/menu_item_block_orange" android:layout_marginLeft="5dp" >  
24.                 <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_calendar" />  
25.                 <TextView style="@style/menu_item_txt" android:text="日历" />  
26.             </LinearLayout>  
27.         </LinearLayout>  
28.   
29.         <LinearLayout  
30.             android:layout_width="fill_parent"  
31.             android:layout_height="wrap_content"  
32.             android:layout_marginTop="5dp"  
33.             android:orientation="horizontal" >  
34.   
35.             <LinearLayout style="@style/menu_item_block_orange">  
36.                 <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_phone" />  
37.                 <TextView style="@style/menu_item_txt" android:text="电话" />  
38.             </LinearLayout>  
39.   
40.             <LinearLayout style="@style/menu_item_block_orange" android:layout_marginLeft="5dp">  
41.                 <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_gmail" />  
42.                 <TextView style="@style/menu_item_txt" android:text="Gmail" />  
43.             </LinearLayout>  
44.         </LinearLayout>                                               ......................                                        

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

 

每个Linear没有添加具体的点击事件，可以根据自己的需要来进行添加，先留个底存档，或许以后做项目中可以用到类似的UI界面

转自: http://blog.csdn.net/eyu8874521/article/details/8217506