androidui教程pdf
『壹』 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開發藝術探索》
『貳』 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控制項及使用方法)
Android控制項是Android應用中最基本的組成部分之一,它們可以幫助我們構建用戶界面並實現應用程序的各種功能。在本文中,我們將介紹一些常用的AndroidUI控制項及其使用方法。
TextView
TextView是Android中最基本的控制項之一,它用於顯示文本。要在應用程序中使用TextView,可以按照以下步驟進行操作:
1.在XML布局文件中添加TextView控制項:
```
android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HelloWorld!"/> ``` 2.在Java代碼中獲取TextView控制項的引用: ``` TextViewtextView=findViewById(R.id.textView); ``` 3.設置TextView控制項的文本內容: ``` textView.setText("HelloAndroid!"); ``` Button Button是Android中常用的控制項之一,它用於響應用戶的點擊事件。要在應用程序中使用Button,可以按照以下步驟進行操作: 1.在XML布局文件中添加Button控制項: ```