android設置ui
『壹』 AndroidUI控制項switch使用方法
首先添加控制項:
<Switch
android:id="@+id/sw_sfktmmzf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:showText="false"
android:switchMinWidth="50dp"
android:thumb="@drawable/thumb"
android:track="@drawable/track" />
以下是該控制項的常用屬性:
textOn:控制項打開時顯示的文字
textOff:控制項關閉時顯示的文字
thumb:控制項開關的圖片(設置小圓圈顏色)
track:控制項開關的軌跡圖片(設置小圓圈背景顏色)
typeface:設置字體類型
switchMinWidth:開關最小寬度
switchPadding:設置開關 與文字的空白距離
switchTextAppearance:設置文本的風格
checked:設置初始選中狀態
splitTrack:是否設置一個間隙,讓滑塊與底部圖片分隔(API 21及以上)
showText:設置是否顯示開關上的文字(API 21及以上)
創建北京控制文件在drawable文件下
1、thumb.xml
<?xml version="1.0" encoding="utf-8"?><!-- 按鈕的選擇器,可以設置按鈕在不同狀態下的時候,按鈕不同的顏色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/green_thumb" android:state_checked="true" />
<item android:drawable="@drawable/gray_thumb" />
顏色文件:
green_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 高度40 -->
<size android:height="@dimen/switch_height" android:width="@dimen/switch_height"/>
<!-- 圓角弧度 20 -->
<corners android:radius="20dp"/>
<!-- 變化率 -->
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke android:width="1dp"
android:color="@color/home_text1"/>
</shape>
gray_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 高度40 -->
<size android:height="@dimen/switch_height" android:width="@dimen/switch_height"/>
<!-- 圓角弧度 20 -->
<corners android:radius="20dp"/>
<!-- 變化率 -->
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke android:width="1dp"
android:color="@color/text_color03"/>
</shape>
2、track.xml
<?xml version="1.0" encoding="utf-8"?><!-- 底層下滑條的樣式選擇器,可控制Switch在不同狀態下,底下下滑條的顏色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/green_track" android:state_checked="true" />
<item android:drawable="@drawable/gray_track" />
</selector>
顏色文件:
green_track.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 高度40 -->
<size android:height="@dimen/switch_height"/>
<!-- 圓角弧度 20 -->
<corners android:radius="15dp"/>
<!-- 變化率 -->
<gradient
android:endColor="@color/home_text1"
android:startColor="@color/home_text1" />
</shape>
gray_track.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 高度30 此處設置寬度無效-->
<size android:height="@dimen/switch_height" />
<!-- 圓角弧度 15 -->
<corners android:radius="15dp" />
<!-- 變化率 定義從左到右的顏色不變 -->
<gradient
android:endColor="@color/text_color03"
android:startColor="@color/text_color03" />
</shape>
switch 控制項監聽事件:
aSwitch.setOnCheckedChangeListener(newCompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
//控制開關字體顏色
if(isChecked) {
//打開
}else{
//關閉
}
}
});
『貳』 android ui設計中的標題怎麼設置
Android 應用程序窗體顯示狀態操作(requestWindowFeature()的應用)
我們在開發程序是經常會需要軟體全屏顯示、自定義標題(使用按鈕等控制項)和其他的需求,requestWindowFeature(featrueId),它的功能是啟用窗體的擴展特性。參數是Window類中定義的常量。
枚舉常量:
1.DEFAULT_FEATURES:系統默認狀態,一般不需要指定
2.FEATURE_CONTEXT_MENU:啟用ContextMenu,默認該項已啟用,一般無需指定
3.FEATURE_CUSTOM_TITLE:自定義標題。當需要自定義標題時必須指定。如:標題是一個按鈕時
4.FEATURE_INDETERMINATE_PROGRESS:不確定的進度
5.FEATURE_LEFT_ICON:標題欄左側的圖標
6.FEATURE_NO_TITLE:吳標題
7.FEATURE_OPTIONS_PANEL:啟用「選項面板」功能,默認已啟用。
8.FEATURE_PROGRESS:進度指示器功能
9.FEATURE_RIGHT_ICON:標題欄右側的圖標
一。FEATURE_CUSTOM_TITLE詳解
this.requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.main);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.title);
自定義標題完成,它是一個xml文件布局
title.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon"/>
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="文本" />
</LinearLayout>
二。FEATURE_NO_TITLE
可用於全屏顯示
實現代碼
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
『叄』 android的ui布局有哪些
布局(Layout)的概念是針對Activity的,Activity就是布滿整 個Android設備的窗口或者懸浮於其他窗口上的交互界面。在一個應用程序中通常由多個Activity構成,每個需要顯示的Activity都需要在AndroidManifest.xml文件之中聲明。
通常情況下,開發人員可以使用兩種方式來創建UI組件,一種方式是使用XML方式來配置UI組件的相關屬性,然後裝載這些UI組件,這也是最常用的方式。但是有些特殊情況下,需要動態生成UI組件,則需要使用第二種方式,完全使用java代碼來創建UI組件。
XML布局文件是Android系統中定義的Layout的常用方式,所有布局文件必須包含在res/layout目錄中,且必須符合Java的命名 規范。當在res/layout目錄下新增了布局文件之後,R.java文件會自動收錄該布局資源,Java代碼可通過setContentView方法 在Activity中顯示該Layout。
setContentView(R.layout.<資源名稱>);
在布局文件中可以指定UI組件的android:id屬性,該屬性的屬性值代表該組件的唯一標識。通過Activity.findViewById()訪問,並且findViewById()必須在setContentView載入xml文件之後使用,否則會拋出異常。
findViewById(R.id.)
Android應用的絕大部分UI組件都放在android.widget包及其子包、android.view包及其子包中,Android應用的 所有UI組件都繼承了View類。View類還有一個重要的子類:ViewGroup,ViewGroup類是所有布局管理器的父類。
ViewGroup容器控制其子組件的分布依賴於ViewGroup.LayoutParams、ViewGroup.MarginLayoutParams兩個內部類。
ViewGroup.LayoutParams提供兩個XML屬性設定組件的大小。
android:layout_height:指定該子組件的基本高度;
android:layout_width:指定該子組件的基本寬度。
這兩個屬性有三個基本值,這兩個屬性有三個特定的值:
fill_parent:指定組件的高度、寬度與父容器組件的一樣。
match_parent:與fill_parent一樣,Android2.2開始推薦使用。
warp_content:內容包裹。
ViewGroup.MarginLayoutParams用於控制子組件周圍的頁邊距。
android:layout_marginBottom(下邊距);
android:layout_marginLeft(左邊距);
android:layout_marginRight(右邊距):
layout_marginTop(上邊距)
對於View的尺寸,android提供了三種單位供選擇使用:
px:像素。
dp:dpi,表示屏幕實際的像素。
sp:與scale無關的像素,與dp類似。
尺寸單位選擇的技巧:如果設置長度、高度等屬性時可以使用dp或sp,但是如果設置字體,需要使用px。如果使用dp或sp,系統會根據屏幕密度的變化進行轉換。
為了適應各種界面風格,Android提供了五種布局規范,利用這五種布局,基本上可以在設備上隨心所欲的擺放任何UI組件,這五種布局分別是:
FrameLayout(幀布局)。
LinearLayout(線性布局)
RelativeLayout(相對布局)。
TableLayout(表格布局)。
AbsoluteLayout(絕對布局)。
線性布局(LinearLayout)
LinearLayout是最常用的布局方式,在XML文件中使用標記。它會將容器里的UI組件一個一個挨著排列起來。但是LinearLayout不會換行,當UI組件超出屏幕之後,則不會被顯示出來。LinearLayout有兩個重要的XML屬性:androidgravity(對齊方 式);android:orientation(排列方式)。
android:orientation(排列方式),設定了LinearLayout中包含的UI組件的排列方式,有兩個選項vertical(豎向)、horizontal(橫向,默認值)
android:gravity(對齊方式),設定LinearLayout中包含UI組件的對齊方式,其選項很多,常用上(top)、下(bottom)、左(left)、右(right)。
『肆』 Android常用UI尺寸規范
在信息流的設計中,左右的間距會保持一致,通常設定為32px,從而保證有足夠的留白,如圖所示。信息流中的文本、圖片和頭像都會依據間距進行左右對齊,以此來保證頁面的規則性。
在1080px×1920px的設計圖中,文字要有主次。把字型大小大小分為3個級別,例如主文案的昵稱會設置為46px,描述文字會設置為36px,而最小字型大小的時間等信息文字的大小會設置為30px,如圖所示。
『伍』 Android UI規范是什麼
從事UI設計行業的朋友都知道,每一張設計稿都是有規范尺寸的,並且IOS的和Android還不同,IOS UI設計規范為375*667 1x的尺寸,那麼Android UI規范是什麼呢,下面讓我們一起來了解一下。
在做Android UI設計的時候,畫布的尺寸我們一般都是選擇360*640 1x,也就是說是選擇720*1280這個尺寸。
我們從上到下來進行了解,最上邊的是狀態欄,狀態欄的高度是25。
在狀態欄中肯定就是信號、電源以及時間這些了,每個Android定製系統的擺放樣式都不同,這一點不用糾結。
狀態欄下邊就是導航欄了,導航欄起到的是導航作用,高度是45px。
導航欄中間一般都是有文字來起到提醒作用的,導航文字的大小一般都是18px。
在最下方就是我們的標簽欄了,標簽欄的作用就是給用戶提供切換界面的作用,標簽欄的高度為50px。
在標簽欄中擺放的肯定就是我們的ICON圖標了,要注意,圖標的切圖點擊區域不能夠小於24px。
一些ICON圖標的下方還會有文本,這里文本的大小一般就是10或者是11px了,因為范圍有限。
特別提示
本文尺寸均為1x。
『陸』 IOS與Android的UI設配方案
IOS與Android共用一套設計效果圖 1242*2208
IOS與 Android常用的尺寸中,最大尺寸為6p的尺寸,即1242*2208px
IOS常用尺寸: 1242*2208 750*1334 640*1136 640*960,其中750*1334 640*1136 640*960 同為@2x 1242*2208為@3x,所以750*1334 640*1136 640*960隻做一套640*1136就好。
Android 常用尺寸:1080*1920 720*1080 480*800,他們之間相鄰是可以整除1.5的,也就是1080除以1.5等於720,720除以1.5等於480,即這三個尺寸可以等比縮放大小,只做一套1080*1920就可以。
那麼問題來了。
IOS要做兩套尺寸,1242*2208與640*1136
Android要做一套尺寸,1080*1920
這樣不就是三套設計圖了嗎?設計師們會被氣死的?
其實,6p的尺寸1242*2208整除1.15就剛好就等於1080*1920,也就是說,1242*2208與1080*1920是可以等比縮放的。
現在就剩下IOS的640*1136。
那麼就有人問,那IOS的1242*2208可以直接等比縮放成640*1136。答案是不可以的,因為他們之間不能整除的,但是我們把1242*2208的設計圖直接在Photoshop裡面直接等不縮放到寬度為640的尺寸,我們會發現原本的2208變成了1138,也就是說比1136多了2個像素,2個像素的誤差對於沒有有強迫證的也就無所謂了,2個像素的誤差我們會將1138硬改成1136,現在你會發現,裡面的圖標,1136跟1138大小其實是一樣。
為什麼提到圖標呢?因為我們交付的物只需要一套效果圖與五套切圖就好了。即
一套效果圖 1242*2208
五套切圖 1242*2208 640*1136 1080*1920 720*1080 480*800
最後注意縮放的圖標要細調一下,由於轉換有誤差,共用一套效果圖是有一定風險的,例如UI細節上的風險。開發前,設計師與開發人員要先共同確認此適配方案,要全程溝通,及時改正UI方面的問題。
IOS與Android共用一套設計效果圖 750*1334
上面提到過,750*1334 640*1136 640*960 同為@2x,所以750跟640用同一套圖標,同一套字體,至於其他尺寸大小,只要跟著尺寸延伸就沒問題啦。尺寸750*1334應用1242*2208,則需要把@2x導出成@3x,也就是把字體放大1.5倍,其餘的直接放到1242就可以啦。
至於Android版本,我個人的做法是把750*1334直接換算成1080*1920,因為只有1PX像素只差,直接忽略。換算出1080*1920,Android的其他尺寸就按他們之間的規律處理就可以啦。
因為我們交付的物只需要一套效果圖與五套切圖就好了。即
一套效果圖 750*1334
五套切圖 1242*2208 640*1136 1080*1920 720*1080 480*800
IOS與Android各做兩套設計效果圖
原理跟方案一、二差不多,但為了追求細節上的完美,可以多做一套設計圖,即兩套設計圖:1242*2208和640*1136.
1242*2208適配6P、Android三種尺寸。
1242*2208整除1.5等於1080*1920:
1080*1920整除1.5等於720*1280:
720*1280整除1.5等於480*800:
640*1136適配6 5 5S等尺寸。
如果追求完美,那就需要三套圖。即:
1242*2208 640*1136 1080*1920
還可以加上一套640*960,總之分開做越多套,出來的效果圖就會越精細,反之,你懂得,不過這也取決設計師本人和公司領導的決策,會不會給那麼多時間。不說廢話了,希望能幫到各位!
『柒』 Android UI 的設計規則
軟體界面設計相關的各項介紹
界面設計是為了滿足軟體專業化標准化的需求而產生的對軟體的使用界面進行美化優化規范化的設計分支。具體包括軟體啟動封面設計,軟
件框架設計,按鈕設計,面板設計,菜單設計,標簽設計,圖標設計,滾動條及狀態欄設計,安裝過程設計,包裝及商品化。
在設計的過程中有較多注意的關鍵問題,以下列出幾點:
(1)軟體啟動封面設計
應使軟體啟動封面最終為高清晰度的圖像,如軟體啟動封面需在不同的平台、操作系統上使用將考慮轉換不同的格式,並且對選用的色彩不
宜超過256 色,最好為216色安全色。軟體啟動封面大小多為主流顯示器解析度的1/6大。如果是系列軟體將考慮整體設計的統一和延續性。在上面應該醒目的標注製作或支持的公司標志、產品商標,軟體名稱,版本號,網址,版權聲明,序列號等信息,以樹立軟體形象,方便使用者或購買者在軟體啟動的時候得到提示。插圖宜使用具有獨立版權的,象徵性強的,識別性高的,視覺傳達效果好的圖形,若使用攝影也應該進行數位處理,以形成該軟體的個性化特徵。
(2)軟體框架設計
軟體的框架設計就復雜得多,因為涉及軟體的使用功能,應該對該軟體產品的程序和使用比較了解,這就需要設計師有一定的軟體跟進經驗,能夠快速的學習軟體產品,並且在和軟體產品的程序開發員及程序使用對象進行共同溝通,以設計出友好的,獨特的,符合程序開發原則的軟體框架。軟體框架設計應該簡潔明快,盡量少用無謂的裝飾,應該考慮節省屏幕空間,各種解析度的大小,縮放時的狀態和原則,並且為將來設計的按鈕,菜單,標簽,滾動條及狀態欄預留位置。設計中將整體色彩組合進行合理搭配,將軟體商標放在顯著位置,主菜單應放在左邊或上邊,滾動條放在右邊,狀態欄放在下邊,以符合視覺流程和用戶使用心理。
(3)軟體按鈕設計
軟體按鈕設計應該具有交互性,即應該有3到6種狀態效果:點擊時狀態;滑鼠放在上面但未點擊的狀態;點擊前滑鼠未放在上面時的狀態;點擊後滑鼠未放在上面時的狀態;不能點擊時狀態;獨立自動變化的狀態。按鈕應具備簡潔的圖示效果,應能夠讓使用者產生功能關聯反應,群組內按鈕應該風格統一,功能差異大的按鈕應該有所區別。
(4)軟體面板設計
軟體面板設計應該具有縮放功能,面板應該對功能區間劃分清晰,應該和對話框,彈出框等風格匹配,盡量節省空間,切換方便。
(5)菜單設計
菜單設計一般有選中狀態和未選中狀態,左邊應為名稱,右邊應為快捷鍵,如果有下級菜單應該有下級箭頭符號,不同功能區間應該用線條分割。
(6)標簽設計
標簽設計應該注意轉角部分的變化,狀態可參考按鈕。
(7)圖標設計
圖標設計色彩不宜超過64色,大小為16x16、32x32兩種,圖標設計是方寸藝術,應該加以著重考慮視覺沖擊力,它需要在很小的范圍表現出軟體的內涵,所以很多圖標設計師在設計圖標時使用簡單的顏色,利用眼睛對色彩和網點的空間混合效果,做出了許多精彩圖標。
(8)滾動條及狀態欄設計
滾動條主要是為了對區域性空間的固定大小中內容量的變換進行設計,應該有上下箭頭,滾動標等,有些還有翻頁標。狀態欄是為了對軟體當前狀態的顯示和提示。
(9)安裝過程設計
安裝過程設計主要是將軟體安裝的過程進行美化,包括對軟體功能進行圖示化。
(10)包裝及商品化
最後軟體產品的包裝應該考慮保護好軟體產品,功能的宣傳融合於美觀中,可以印刷部分產品介紹,產品界面設計。
圖標設計規范
數位設計引入了一種新的圖標設計樣式。以下是設計和創建樣式圖標的具體規范。
圖標樣式應該有趣、色彩豐富且充滿活力,因為現在的系統支持圖標是32點陣圖標,並且邊緣非常平滑。在矢量程序中繪制完每個圖標後,再用Adobe Photoshop進行處理可使圖像更加完美。本規范是專為設計者編寫的。在創建圖像時,建議您與高水平的圖形設計者一起工作,尤其是具有豐富的矢量和 3D軟體經驗的圖形設計者。
圖標設計概述的目的是讓您熟悉WindowsXP的新樣式,為創建圖標做好准備。
圖標樣式特性
(1) 色彩豐富,是對WindowsXP外觀的補充。
(2) 不同的角度和透視特性為圖像增添了動態活力。
(3) 元素的邊角十分柔和,並略微有些圓滑。
(4) 光源位於圖標的左上角,同時有環繞光照亮圖標的其它部分。
(5) 漸變效果使圖標具有立體感,進而使圖標的外觀更加豐滿。
(6) 投影使圖標更具對比度和立體感。
(7) 添加輪廓可使圖像更清晰。
(8) 日常對象(如計算機和設備)具有更現代化的個人外觀。
圖標尺寸
Windows XP圖標有四種尺寸,建議使用以下四種尺寸:
(1) 48x48像素
(2) 32x32像素
(3) 24x24像素
(4) 16x16像素
圖標色彩深度支持
WindowsXP支持32點陣圖標。32點陣圖標為24點陣圖像加上8位alpha通道。使圖標邊緣非常平滑,且與背景相融合。
每個WindowsXP圖標應包含以下三種色彩深度,以支持不同的顯示器顯示設置:
24點陣圖像加上8位alpha通道(32位)
8點陣圖像(256色),加上1位透明色
4點陣圖像(16色),加上1位透明色
調色板
圖標中使用的主要顏色。
對象的角度和分組
WindowsXP樣式圖標使用的透視網格:並非所有對象使用16?6的復雜圖像都能獲得較好效果。某些對象通常以直觀圖像顯示:文檔圖標、符號圖標(如警告或信息圖標)、單一對象圖標(如放大鏡)
除非創建重疊輔助對象可以更清楚地表達圖標的含義,否則就可讀性和完整性而言,還是應使用直觀圖像。還應考慮如何按組查看圖標,以便確定如何將對象分組。
投影
使用投影後,WindowsXP圖標將更清晰且更具立體感。可在Photoshop中實現這種效果,本指南的後面部分將對此進行描述。若要為圖像添加投影,請在 Photoshop中雙擊圖像的圖層,並選擇Drop Shadow。然後將Angle更改為135,Distance更改為 2,Size更改為2。此時投影為75%不透明黑色。
輪廓
繪制XP樣式圖標時,為圖像添加輪廓可使之更清晰,並可保證圖像在不同背景色上都具有較好效果。
概念
設計圖標時,請考慮以下因素:
使用已有概念以確保真實表達了用戶的想法。考慮圖標在用戶界面環境中以何種形式出現,以及如何作為圖標集的一部分使用。考慮圖形的
文化背景。避免在圖標中使用字母、單詞、手或臉。必須用圖標表示人或用戶時,請盡可能使其大眾化。如果圖標中的圖像由多個對象組成,應考慮如何使圖像尺寸更小。建議在圖標中使用的對象不超過三個。對於 16?6的尺寸大小,還可考慮刪除某些對象或簡化圖像使之更容易辨認。
透明工具
將Gif Movie Gear(GMG)打開一個對話框,其中顯示您的圖標。使用吸管工具單擊圖標的背景色。此顏色將更改為暗黃綠色(或在 GMG中選作
透明背景色的顏色)。重復所有4位和8位幀。若要保存圖標,請選擇 File->Save Icon As...。
創建工具欄
Windows工具欄圖標除不使用投影之外,使用的樣式與其它圖標相同。由於工具欄圖標非常小,建議您使用簡單的圖像。如果以直觀方式顯示
圖像即可清晰地表達圖標的含義,則不必使用其它復雜方式。
創建AVI
WindowsXP使用8位AVI。創建.avi文件的過程與創建圖標的過程相同-在Photoshop中准備圖像,然後將其拖動到GMG 中。請按以下指導創建8點陣圖標。若要使用GMG保存AVI,請轉至File->Export As->AVI file。創建.avi文件時,請考慮以下因素:使用品紅(R255 G0 B255)作為背景透明色。在Photoshop中,重要的一點是不要出現雜散像素。請將填充能力設置為0,並確認未選中取消鋸齒。
軟體人機界面
UI即User Interface(用戶界面)的簡稱。UI設計則是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟體變得
有個性有品味,還要讓軟體的操作變得舒適、簡單、自由,充分體現軟體的定位和特點。
美麗的事物常常會讓人無法抗拒。這就是為什麼產品出色的外觀設計對於電腦、汽車、日用品、傢具、食品、服裝等等幾乎所有商品的銷售與推廣,都有著舉足輕重的作用的原因。
同樣的道理,對於軟體公司來說,軟體產品就是他們的商品,而軟體界面就是他們產品的外觀,界面的美觀與否,直接關繫到了軟體產品的營銷成敗。
我們可以清楚地看到,微軟公司對軟體界面設計的重視。請回想一下您在第一次見到win2000時的情景,與nt4.0相比是否驚嘆他界面的美觀性與易用性?而您如果使用過xp系統,則會被其令人神奇的感官概念而震驚折服!金山公司的金山詞霸就是國內軟體成功的例子了,從金山詞霸3.0到金山詞霸2001 的變化堪稱經典。著名的網頁動畫製作軟體flash從3.0到4.0,僅僅修改了圖標和窗體,立即大為增色…
現今世界上成功的軟體公司都非常重視軟體界面的美化設計工作,因為他們深刻地知道,在激烈的市場競爭中,僅僅有強大的功能是遠遠不夠的,不足以戰勝強勁的對手。我們可以相象一下,您在挑選手機的時候,如果有兩款手機,性能相同,而第一款比第二款要美觀很多,那麼您將選擇哪一款呢?當然是美觀的那一款了。試想,您的客戶,也會拿您和您競爭對手的軟體做這樣的比較的。
現在的軟體企業都知道,廣告和市場推銷活動對市場營銷的作用是多麼的重要,並不遺餘力地打廣告、做活動、做推廣。但我們知道,這些活動的最終目的,是為了讓用戶購買並使用軟體產品,而用戶最終使用的也是您的產品,那麼為什麼不在軟體界面的美觀性上多下些工夫呢?在諸如家用電器、汽車、電腦等成熟的市場中,用非常精美的廣告去推廣一種功能強大卻醜陋無比的產品,是一種笑話。然而,這樣的笑話在軟體行業里卻屢見不鮮。這也是像中國足球一樣,中國軟體業與國外相比較存在的一個很大的差距。
實踐證明,各商家只要在產品美觀設計方面很小投入,將會有很大產出。其投入產出比,要比在功能領先性開發上的投入大得多。
在用戶把軟體買回去後,他們和您企業的聯系,或者說您企業形象在客戶眼中的表現,很大一部分是通過您軟體的界面來傳達的,那麼美觀友好的用戶界面對於宣傳您的企業文化,對於給客戶灌輸您的企業理念,對於您企業的宣傳運做都將是非常有益的。尤其如果您的公司做的是項目承包形式的業務,那麼無論是在競標的時候,還是在項目交付使用以後,美觀的界面都會給您的客戶以信心和良好的印象。
要成為一款有競爭力的軟體,不光要有強大的功能,也需要有一個友好的界面設計。縱觀當今的it行業,其軟體界面設計的發展趨勢大體上有如下幾種技術:
1. 命令語言用戶界面的發展。
根據其語言的特點,及人機交互的形式的分為
a. 形式語言
b. 自然語言。
c. 類自然語言。
2. 圖形用戶界面的廣泛應用
圖形用戶界面和人機交互過程極大地依賴視覺和手動控制的參與,因此具有強烈的直接操作特點
3. 直接操縱用戶界面技術的成熟。
用戶最終關心的是他欲控制和操作的對象,他只關心任務語義,而不用過多為計算機語義和句法而分心。對於大量物理的、幾何空間的以及形象的任務,直接操縱已表現出巨大的優越性。
4. 多媒體用戶界面及多通道用戶界面的發展大大豐富了計算機信息的表現形式。
5. 虛擬現實技術的應用
虛擬現實系統向用戶提供身臨其境(immerse)和多感覺通道(multi-sensory)體驗,作為一種新型人機交互形式,虛擬現實技術比以前任何人機交互形式都有希望徹底實現和諧的、以「人為中心」的人機界面。
『捌』 Android UI繪制之View繪制的工作原理
這是AndroidUI繪制流程分析的第二篇文章,主要分析界面中View是如何繪制到界面上的具體過程。
ViewRoot 對應於 ViewRootImpl 類,它是連接 WindowManager 和 DecorView 的紐帶,View的三大流程均是通過 ViewRoot 來完成的。在 ActivityThread 中,當 Activity 對象被創建完畢後,會將 DecorView 添加到 Window 中,同時會創建 ViewRootImpl 對象,並將 ViewRootImpl 對象和 DecorView 建立關聯。
measure 過程決定了 View 的寬/高, Measure 完成以後,可以通過 getMeasuredWidth 和 getMeasuredHeight 方法來獲取 View 測量後的寬/高,在幾乎所有的情況下,它等同於View的最終的寬/高,但是特殊情況除外。 Layout 過程決定了 View 的四個頂點的坐標和實際的寬/高,完成以後,可以通過 getTop、getBottom、getLeft 和 getRight 來拿到View的四個頂點的位置,可以通過 getWidth 和 getHeight 方法拿到View的最終寬/高。 Draw 過程決定了 View 的顯示,只有 draw 方法完成後 View 的內容才能呈現在屏幕上。
DecorView 作為頂級 View ,一般情況下,它內部會包含一個豎直方向的 LinearLayout ,在這個 LinearLayout 裡面有上下兩個部分,上面是標題欄,下面是內容欄。在Activity中,我們通過 setContentView 所設置的布局文件其實就是被加到內容欄中的,而內容欄id為 content 。可以通過下面方法得到 content:ViewGroup content = findViewById(R.android.id.content) 。通過 content.getChildAt(0) 可以得到設置的 view 。 DecorView 其實是一個 FrameLayout , View 層的事件都先經過 DecorView ,然後才傳遞給我們的 View 。
MeasureSpec 代表一個32位的int值,高2位代表 SpecMode ,低30位代表 SpecSize , SpecMode 是指測量模式,而 SpecSize 是指在某種測量模式下的規格大小。
SpecMode 有三類,如下所示:
UNSPECIFIED
EXACTLY
AT_MOST
LayoutParams需要和父容器一起才能決定View的MeasureSpec,從而進一步決定View的寬/高。
對於頂級View,即DecorView和普通View來說,MeasureSpec的轉換過程略有不同。對於DecorView,其MeasureSpec由窗口的尺寸和其自身的LayoutParams共同確定;
對於普通View,其MeasureSpec由父容器的MeasureSpec和自身的Layoutparams共同決定;
MeasureSpec一旦確定,onMeasure就可以確定View的測量寬/高。
小結一下
當子 View 的寬高採用 wrap_content 時,不管父容器的模式是精確模式還是最大模式,子 View 的模式總是最大模式+父容器的剩餘空間。
View 的工作流程主要是指 measure 、 layout 、 draw 三大流程,即測量、布局、繪制。其中 measure 確定 View 的測量寬/高, layout 確定 view 的最終寬/高和四個頂點的位置,而 draw 則將 View 繪制在屏幕上。
measure 過程要分情況,如果只是一個原始的 view ,則通過 measure 方法就完成了其測量過程,如果是一個 ViewGroup ,除了完成自己的測量過程外,還會遍歷調用所有子元素的 measure 方法,各個子元素再遞歸去執行這個流程。
如果是一個原始的 View,那麼通過 measure 方法就完成了測量過程,在 measure 方法中會去調用 View 的 onMeasure 方法,View 類裡面定義了 onMeasure 方法的默認實現:
先看一下 getSuggestedMinimumWidth 和 getSuggestedMinimumHeight 方法的源碼:
可以看到, getMinimumWidth 方法獲取的是 Drawable 的原始寬度。如果存在原始寬度(即滿足 intrinsicWidth > 0),那麼直接返回原始寬度即可;如果不存在原始寬度(即不滿足 intrinsicWidth > 0),那麼就返回 0。
接著看最重要的 getDefaultSize 方法:
如果 specMode 為 MeasureSpec.UNSPECIFIED 即未指定模式,那麼返回由方法參數傳遞過來的尺寸作為 View 的測量寬度和高度;
如果 specMode 不是 MeasureSpec.UNSPECIFIED 即是最大模式或者精確模式,那麼返回從 measureSpec 中取出的 specSize 作為 View 測量後的寬度和高度。
看一下剛才的表格:
當 specMode 為 EXACTLY 或者 AT_MOST 時,View 的布局參數為 wrap_content 或者 match_parent 時,給 View 的 specSize 都是 parentSize 。這會比建議的最小寬高要大。這是不符合我們的預期的。因為我們給 View 設置 wrap_content 是希望View的大小剛好可以包裹它的內容。
因此:
如果是一個 ViewGroup,除了完成自己的 measure 過程以外,還會遍歷去調用所有子元素的 measure 方法,各個子元素再遞歸去執行 measure 過程。
ViewGroup 並沒有重寫 View 的 onMeasure 方法,但是它提供了 measureChildren、measureChild、measureChildWithMargins 這幾個方法專門用於測量子元素。
如果是 View 的話,那麼在它的 layout 方法中就確定了自身的位置(具體來說是通過 setFrame 方法來設定 View 的四個頂點的位置,即初始化 mLeft , mRight , mTop , mBottom 這四個值), layout 過程就結束了。
如果是 ViewGroup 的話,那麼在它的 layout 方法中只是確定了 ViewGroup 自身的位置,要確定子元素的位置,就需要重寫 onLayout 方法;在 onLayout 方法中,會調用子元素的 layout 方法,子元素在它的 layout 方法中確定自己的位置,這樣一層一層地傳遞下去完成整個 View 樹的 layout 過程。
layout 方法的作用是確定 View 本身的位置,即設定 View 的四個頂點的位置,這樣就確定了 View 在父容器中的位置;
onLayout 方法的作用是父容器確定子元素的位置,這個方法在 View 中是空實現,因為 View 沒有子元素了,在 ViewGroup 中則進行抽象化,它的子類必須實現這個方法。
1.繪制背景( background.draw(canvas); );
2.繪制自己( onDraw );
3.繪制 children( dispatchDraw(canvas) );
4.繪制裝飾( onDrawScrollBars )。
dispatchDraw 方法的調用是在 onDraw 方法之後,也就是說,總是先繪制自己再繪制子 View 。
對於 View 類來說, dispatchDraw 方法是空實現的,對於 ViewGroup 類來說, dispatchDraw 方法是有具體實現的。
通過 dispatchDraw 來傳遞的。 dispatchDraw 會遍歷調用子元素的 draw 方法,如此 draw 事件就一層一層傳遞了下去。dispatchDraw 在 View 類中是空實現的,在 ViewGroup 類中是真正實現的。
如果一個 View 不需要繪制任何內容,那麼就設置這個標記為 true,系統會進行進一步的優化。
當創建的自定義控制項繼承於 ViewGroup 並且不具備繪制功能時,就可以開啟這個標記,便於系統進行後續的優化;當明確知道一個 ViewGroup 需要通過 onDraw 繪制內容時,需要關閉這個標記。
參考:《Android開發藝術探索》