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;一共做了两个界面点击互相切换,下面是效果截图:

Android 仿Windows Metro 界面UI

Android 仿Windows Metro 界面UI

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

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

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns: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> 
                <ImageView android:src="@drawable/menu_icon_mail" /> 
                <TextView android:text="短信息" /> 
            </LinearLayout> 
 
            <LinearLayout android:layout_marginLeft="5dp" > 
                <ImageView android:src="@drawable/menu_icon_calendar" /> 
                <TextView android:text="日历" /> 
            </LinearLayout> 
        </LinearLayout> 
 
        <LinearLayout 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="5dp" 
            android:orientation="horizontal" > 
 
            <LinearLayout> 
                <ImageView android:src="@drawable/menu_icon_phone" /> 
                <TextView android:text="电话" /> 
            </LinearLayout> 
 
            <LinearLayout android:layout_marginLeft="5dp"> 
                <ImageView android:src="@drawable/menu_icon_gmail" /> 
                <TextView android:text="Gmail" /> 
            </LinearLayout> 
        </LinearLayout>   

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ed12a9468d8796f26d7e5d5b51bb7ea8.html