歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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

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