Widget組件及設計介紹是本文要介紹的內容，主要是來了解并學習Widget的內容，具體關于Widget內容的學習來看本文詳解，以下僅代表個人的想法，僅供大家參考，如有不對之處請大家指出，這也是我調研的結果，加以總結。

我們可以看到Widget是一種展示在手機主屏的一種快速瀏覽的一個插件。

Widget的應用很廣，可以應用到WEB、桌面和手機端。例如操作系統上的時鐘、天氣、資訊的小插件都屬于Widget。

現在的智能手機就相當于一智能電腦，其桌面也可以填充格式各樣的Widget，這里AndroidSDK1.5以上就提供了對Widget非常好的支持。

Widget有幾大特點

1、身材微：一般的它們都比較小，在終端上嵌入十分的方便，運行快速。

2、形式多：Widget的展現形式多，可以自定義樣式，如幻燈秀、視頻、地圖、新聞、小游戲等..

3、個性化：可以在桌面上展示個性化的服務，根據自己的需求來排列、顯示。也可以設置一些widget的顯示形式和更新頻率。

4、連動性：對于一個主應用程序，其相當于是一個桌面窗口一樣和主程序在實時連動，可以顯示一些主要的信息內容，在不必要時不需要進入主程序。

Android上主流的一些APPWidget應用:

其中包括新浪微博、人人網、小米讀書、墨跡天氣、開關控件、QQ、日期等一些的應用。

Android上是怎么實現APPWidget的

實際上在Android發開包中，它把所有的一些控件包括button、txtarea、menu等等都叫做Widget，而我們實際上說的Widget是屬于APPWidget（APPLIACTION），這個只要大家了解一下就可以了。

Widget的實現對于Android上并不是什么難事，在AndroidSDK1.5版本的時候就已經推出了Widget的功能，并且Android手機也自帶了許多插件，雖然有些并不是很個性，美觀，但是我們還可以選擇很多第三方開發的Widget來個性化自己的桌面。

Android上的APPWidget設計

首先設計尺寸規則有一個公示：最小尺寸（dip）=（格子數*74）-2

所謂的格子數就是指.主屏分為4X4的格子根據自己設計占的格子數來創建的。

標準Widget剖析

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

標準Widget尺寸(縱向)

標準Widget尺寸(橫向)

設計一個Widget

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

最有效的Widget會以最小型的尺寸來顯示程序有用或及時的數據.用戶會衡量Widget的有用性或它所占的屏幕空間,因此越小越好.

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

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

選擇匹配的框架.

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

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

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

若你的Widget包含按鈕,需繪制按鈕的三種狀態(默認,按下,被選中).

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

標準Widget尺寸

這里有六種基于4x4(縱向)或4x4(橫向)單元的主屏幕網格的標準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內容的學習能對你有所幫助！