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设计的布局文件代码片段：

?

代码片段，双击复制

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<?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界面。