虽然自己对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设计的布局文件代码片段:
每个Linear没有添加具体的点击事件,可以根据自己的需要来进行添加,先留个底存档,或许以后做项目中可以用到类似的UI界面。
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界面。