Android視窗小組件小念頭

【博主：各位博友，網友們，大家網上好！歡迎光臨本部落格。

歡迎多多交流，多提意見，互相學習，互相進步，我們的口號是：好好學習，天天向上。】

Widget是Android1.5版所引進的特性之一.Widget,可讓使用者在主畫面介面及時瞭解程式顯示的重要訊息.標準的Android系統已包含幾個Widget的樣本,如類比時鐘,音樂播放器等.

498)this.width=498;">

使用者在主畫面(HomeScreen)介面的空白地區長按,選擇菜單的”小組件”項,即可隨意選取所需的組件並顯示在主畫面上.

此文檔介紹了如何設計一個Widget,使得和其它Widget以及主畫面其它元素保持美觀一致.Android團隊也於此文檔介紹了Widget源圖的一些設計標準,還有Widget製圖的技巧訣竅.

對於開發Widget的相關資訊, 可參考開發人員指南的AppWidgets章節和AppWidgets部落格.

標準Widget剖析

典
型的AndroidWidget主要有三個組成部分:一個限位框,一個架構,還有Widget的圖形控制項以及其它元素.設計周全的Widget會在限位框
邊緣&架構之間,及架構內邊緣&Widget的控制項之間都保留一些內填充(內補白).Widget的外觀被設計得與主畫面的其它
Widget相匹配,並以主畫面的其它元素為依據對齊;它們亦使用標準的陰影製作效果.此文檔說明了所有的相關細節.

498)this.width=498;">

標準Widget尺寸(縱向)

498)this.width=498;">

標準Widget尺寸(橫向)

設計一個Widget

◆為你的Widget選擇限位框尺寸.

最有效Widget會以最小型的尺寸來顯示程式有用或及時的資料.使用者會衡量Widget的有用性或它所佔的螢幕空間,因此越小越好.

所有Widget必須符合限位框的六種尺寸之一,或者更好的是,或更好的是在一對縱向和橫向的方位尺寸裡,這樣在使用者切換畫面方向時,你的Widget看起來也會更舒適.

標準Widget尺寸以圖例說明了六種Widget尺寸的限位規格(三種縱向三種橫向).

◆選擇匹配的架構.

標準Widget架構以圖例說明了六種Widget尺寸的標準架構,你可以下載此連結的副本備用.你的Widget並非都必須使用這些架構,但若你用了,你的Widget可能與其它Widget看起來更一致.

◆對圖形應用標準陰影製作效果.

此外,你並非必須使用此效果,但標準Widget陰影說明了標準Widget使用的Photoshop設定.

◆若你的Widget包含按鈕,需繪製按鈕的三種狀態(預設,按下,被選中).

你可以下載一個音樂Widget播放按鈕的Photoshop檔案(包含三種狀態) ,用來分析三種標準按鈕效果的Photoshop設定.

1.完成源圖的繪製並調整比例和對齊.

Widget對齊技巧訣竅介紹了一些對齊標準架構內Widget圖形的技巧, 另外還有一些其它Widget圖形竅門.

2.以正確的圖形檔案設定儲存你的Widget.

Windows圖形檔案格式介紹了如何正確設定你的Widget圖形檔案.

標準Widget尺寸

這裡有六種基於4 x 4 (縱向)或 4 x 4
(橫向)單元的主畫面網格的標準Widget尺寸.這些規格為六種標準Widget尺寸的限位框.這些尺度是六種標準Widget尺寸限位框.典型
Widget的內容並不繪製這些尺度的邊緣線,但在限位框裡填充一個架構正如設計一個Widget所說到的.

縱向方位時, 每個單元寬80像素高100像素(展示了一個縱向方位的單元). 縱向方位支援的三種Widget尺寸為:

橫向方位時,每個單元寬106像素高74像素.橫向方位支援的三種Widget尺寸為:

 

 

標準Widget架構

針對六種標準Widget尺寸這裡有標準的架構.你可以在以下內容點擊架構圖片來下載該架構的Photoshop 檔案用在你的Widget上.

 

4x1_Widget_Frame_Portrait.psd

 

3x3_Widget_Frame_Portrait.psd

 

2x2_Widget_Frame_Portrait.psd

 

4x1_Widget_Frame_Landscape.psd

 

3x3_Widget_Frame_Landscape.psd

 

2x2_Widget_Frame_Landscape.psd

標準Widget陰影

你可為你的Widget源圖應用陰影製作效果,這樣會與其它標準AndroidWidget較為一致, 在Photoshop Layer Style對話方塊使用以下設定.

 

Widget繪製技巧訣竅

Android團隊展示了一些用於對齊標準Widget限位框及架構內Widget源圖的竅門,使數個Widget以及主畫面上的其它元素在視覺上對齊,除此之外還有一些建立Widget的技巧.

◆使用Android SDK模擬器螢幕工具來對齊主畫面上的Widget控制項形狀&陰影,搜尋Widget,以及其它元素.

◆從全尺寸儲存格裁剪Widget的富餘部分,包括任何填充空間. (換言之, 對於 一個4 x 1的Widget, cut the asset at 320 by 100 pixels)

 

◆為了減少Widget輸出時的條狀色塊, 在你圖片應用以下的Photoshop添加雜色設定.

 

◆應用9-patch圖片格式技術以縮小圖片並設定內容地區的內填充. (此處查看細節指南.)

◆注意: 當前AndroidWidget模板被設計成使用一個自訂的漸層角,意味著9-patch圖片格式技術無法用以最佳化資源尺寸.無論如何, 9-patch圖片格式技術都能設定內容地區的內填充.

◆某些情況下,低像素深度的裝置會引發是視覺帶抖動問題.為瞭解決此問題,應用程式開發人員需通過一個定義為XML:的”代理”可繪區傳遞assets.這個技術參考了以下源圖,如”background.9.png”,並指示裝置按需抖動.

Widget圖形檔案格式

使用合適的限位框尺寸以PNG-24格式和8-bit色儲存你的Widget源圖.  

 

 

 

 

 

 

 

 

 

 

 

來自http://hi.baidu.com/tdskee/blog/item/3459249b3a6da1a1c9eaf4bc.html