歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> Android 仿Windows Metro 界面UI

Android 仿Windows Metro 界面UI

日期:2017/3/1 10:06:30   编辑:Linux編程

雖然自己對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設計的布局文件代碼片段:

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

每個Linear沒有添加具體的點擊事件,可以根據自己的需要來進行添加,先留個底存檔,或許以後做項目中可以用到類似的UI界面。

Copyright © Linux教程網 All Rights Reserved