Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 高級開發 >> Android Widget設計指南(1)

Android Widget設計指南(1)

編輯:高級開發

Widget是android1.5版所引進的特性之一.Widget,可讓用戶在主屏幕界面及時了解程序顯示的重要信息.標准的android系統已包含幾個Widget的示例,如模擬時鐘,音樂播放器等.

Widget是Android1.5版所引進的特性

用戶在主屏幕(HomeScreen)界面的空白區域長按,選擇菜單的”小部件”項,即可隨意選取所需的部件並顯示在主屏幕上.

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

對於開發Widget的相關信息, 可參考開發者指南的AppWidgets章節和AppWidgets博客.

標准Widget剖析

典型的androidWidget主要有三個組成部分:一個限位框,一個框架,還有Widget的圖形控件以及其它元素.設計周全的Widget會在限位框邊緣&框架之間,及框架內邊緣&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設置.

    buttons

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

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

    2.以正確的圖形文件設置保存你的Widget.

    Windows圖形文件格式介紹了如何正確設置你的Widget圖形文件.

    標准Widget尺寸

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

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

    portrait_sizes

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

    landscape_sizes

    【編完】


      標准Widget框架

      針對六種標准Widget尺寸這裡有標准的框架.你可以在以下內容點擊框架圖片來下載該框架的Photoshop 文件用在你的Widget上.

      4x1_Widget_Frame_Portrait

      4x1_Widget_Frame_Portrait.psd

      3x3_Widget_Frame_Portrait

      3x3_Widget_Frame_Portrait.psd

      2x2_Widget_Frame_Portrait

      2x2_Widget_Frame_Portrait.psd

      4x1_Widget_Frame_Landscape

      4x1_Widget_Frame_Landscape.psd

      3x3_Widget_Frame_Landscape

      3x3_Widget_Frame_Landscape.psd

      2x2_Widget_Frame_Landscape

      2x2_Widget_Frame_Landscape.psd

      標准Widget陰影

      你可為你的Widget源圖應用陰影效果,這樣會與其它標准androidWidget較為一致, 在Photoshop Layer Style對話框使用以下設置.

      標准Widget陰影

      【編完】


        Widget繪制技巧訣竅

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

        ◆使用android SDK模擬器屏幕截圖工具來對齊主屏幕上的Widget控件形狀&陰影,搜索Widget,以及其它元素.

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

        全尺寸單元格裁剪Widget的富余部分

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

        添加雜色設置

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

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

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

        Widget圖形文件格式

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

        Widget圖形文件格式

        1. 上一頁:
        2. 下一頁:
        熱門文章
        閱讀排行版
        Copyright © Android教程網 All Rights Reserved