Android小挂件(APP Widgets)设计指导

应用小挂件（也叫做窗口小挂件）在android1.5的时候被第一次引出，后来再android3.0和android3.1中得到了极大的发展，他们可以展示一些应用的常用信息或者一些相关的信息到桌面上，标准的android系统镜像中有很多自带的创口小挂件，例如：闹钟、音乐等

figure 1. example app widgets in android 4.0.

本文将描述怎么去设计小挂件，以便于能很好的与其他挂件搭配的很默契，同时也会介绍一些小技巧。

appwidget 剖析

       一个典型的android挂件将会包含三个组件部分：一个边界框、一个挂件图形控件、其他的元素。挂件包含了一部分安卓 view 控件的子集，他支持：textlabel、button、image。其他可用的组件见api guide部分的creating the app widget layout（见左侧）

       一个设计很好的挂件将会在边界框、框架之间留出一些外部边界，在内部的边界框中会留出一些内部边界。（也就是留出一些padding与margin）。如下图所示：

figure 2. widgets generally have margins between the bounding box and frame,and padding between the frame and widget control

note：
在android4.0中，挂件将自动的与边框之间将上margin。

为你的挂件决定大小

        每一个挂件都必须指定minwidth 和 minheight他表示默认最少需要多少的空间展示。当用户添加挂件到他的主屏幕时，通常占用的空间会大于你给的这两个值。android的主屏幕提供给用户一种方格子的可用空间来放置应用图标或者桌面挂件。这种矩阵方格子在不同的设备上有不同的格式。比如说：一般手持设备提供4 x 4的格子。但是平板设备可以通过8 x 7的格子。当你的挂件被添加的时候，他将会根据minwidth和minheight指定的宽高自动拉伸去占据最少的格子。使用.9.png图片作为背景和使用可伸展的布局可使你的挂件布局能很好的适配设备的主屏幕格子，以达到很好的使用体验。
        你设置的宽度、高度，或者说margin宽度都会有可能运行到不同的设备上，你可以使用下面列出的每个小格子占据的空间的数据来大致的估算你的挂件的最小尺寸。

最佳实践是将你的minwidth与minheight设置相对保守，定义最小尺寸是可以使你的挂件渲染出很好的默认状态。

        比如说：假设你有个音乐播放器的挂件，他用作显示当前正在播放的专辑以及名字，我们就只需要一个播放按钮、一个下一曲按钮。

figure 3. an example music player widget.

你最小的高度就应该为你的两个文本控件的高度+文本之间的margin高度和padding高度。你的最小宽度就应该为播放按钮最短宽度+ 下一曲按钮的最短宽度 + 文本的最短宽度(比如说最长10个字符)+水平的一些margin和padding距离

figure4. example sizes and margins for minwidth/minheight calculations.we chose 144dp as an example good minimum width for the text labels.

最后的结果如下：

minwidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
minheight = 48dp + (2 × 4dp) = 56dp

如果你使用的.9.png图片与内容有固有的padding距离，你也需要加上.

可调节大小的挂件

在android 3.1以后，挂件在水平方向与竖直方向都可以被调节大小，意味着：minwidth和minheight的值将变成挂件默认大小的值，你可以使用minresizewidth和minresizeheight来表示挂件真正的最小值，小于这个值时，控件将变得模糊和不可用。 

特别是那些基于listview或者gridview的集合类特征的挂件 

为你的挂件添加margin（外边界宽度）

       正如前面提到的，android4.0将可以为主屏幕的挂件自动添加小号、标准的外边界宽度（margin）。对于那些系统版本号在14或者以上的来说，为了平衡主屏幕的视觉，我们不推荐你再额外的添加margin到你的挂件外部。
        当然，对于那个更早一些的版本，添加自己的margin也不复杂，具体在api guide中有介绍到。 

设计挂件的布局和背景图片

       很多挂件都只有一个固定的矩形背景或者圆角矩形的形状。其实最好的方法是使用.9.png图片来定义。（具体怎么使用.9.png图片，很简单这里不翻译了，自己去找资料学习） 

        对于挂件的内容部分，你应该使用可伸缩的布局方式。例如：relativelayout、linearlayout、或者framelayout。这样可以让你的布局文件去适应很多种不同的屏幕尺寸。 

        下面是一个关于音乐播放的挂件的布局例子。他包含了一个文本域、一个暂停按钮、一个、下一曲按钮，他的margin取决于系统。

<framelayout 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:padding="@dimen/widget_margin"> 
  
 <linearlayout 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="horizontal" 
  android:background="@drawable/my_widget_background"> 
  
  <textview 
   android:id="@+id/song_info" 
   android:layout_width="0dp" 
   android:layout_height="match_parent" 
   android:layout_weight="1" /> 
  
  <button 
   android:id="@+id/play_button" 
   android:layout_width="@dimen/my_button_width" 
   android:layout_height="match_parent" /> 
  
  <button 
   android:id="@+id/skip_button" 
   android:layout_width="@dimen/my_button_width" 
   android:layout_height="match_parent" /> 
 </linearlayout> 
</framelayout> 

如果你看了上面的例子和说明，你也可以开始做一个有弹性的布局

figure 6. excerpt flexible layouts and attributes.

使用挂件模板包

当你要开始设计一个新的挂件或者更新现有的挂件，你可以先看一下下面的设计模板。下面的包是可以下载的，他包含了.9.png背景图片和xml和一些针对不同像素密度的ps文件

下面是一个实例源代码

/* 
 * copyright (c) 2009 the android open source project 
 * 
 * licensed under the apache license, version 2.0 (the "license"); 
 * you may not use this file except in compliance with the license. 
 * you may obtain a copy of the license at 
 * 
 *   http://www.apache.org/licenses/license-2.0 
 * 
 * unless required by applicable law or agreed to in writing, software 
 * distributed under the license is distributed on an "as is" basis, 
 * without warranties or conditions of any kind, either express or implied. 
 * see the license for the specific language governing permissions and 
 * limitations under the license. 
 */ 
 
package com.example.android.wiktionary; 
 
import com.example.android.wiktionary.simplewikihelper.apiexception; 
import com.example.android.wiktionary.simplewikihelper.parseexception; 
 
import android.app.pendingintent; 
import android.app.service; 
import android.appwidget.appwidgetmanager; 
import android.appwidget.appwidgetprovider; 
import android.content.componentname; 
import android.content.context; 
import android.content.intent; 
import android.content.res.resources; 
import android.net.uri; 
import android.os.ibinder; 
import android.text.format.time; 
import android.util.log; 
import android.widget.remoteviews; 
 
import java.util.regex.matcher; 
import java.util.regex.pattern; 
 
/** 
 * define a simple widget that shows the wiktionary "word of the day." to build 
 * an update we spawn a background {@link service} to perform the api queries. 
 */ 
public class wordwidget extends appwidgetprovider { 
  /** 
   * regular expression that splits "word of the day" entry into word 
   * name, word type, and the first description bullet point. 
   */ 
  public static final string wotd_pattern = 
    "(?s)\\{\\{wotd\\|(.+?)\\|(.+?)\\|([^#\\|]+).*?\\}\\}"; 
 
  @override 
  public void onupdate(context context, appwidgetmanager appwidgetmanager, int[] appwidgetids) { 
    log.d("wordwidget.updateservice", "onupdate()"); 
    // to prevent any anr timeouts, we perform the update in a service 
    context.startservice(new intent(context, updateservice.class)); 
  } 
  public static class updateservice extends service { 
    @override 
    public void onstart(intent intent, int startid) { 
      log.d("wordwidget.updateservice", "onstart()"); 
 
      // build the widget update for today 
      remoteviews updateviews = buildupdate(this); 
      log.d("wordwidget.updateservice", "update built"); 
       
      // push update for this widget to the home screen 
      componentname thiswidget = new componentname(this, wordwidget.class); 
      appwidgetmanager manager = appwidgetmanager.getinstance(this); 
      manager.updateappwidget(thiswidget, updateviews); 
      log.d("wordwidget.updateservice", "widget updated"); 
    } 
 
    @override 
    public ibinder onbind(intent intent) { 
      return null; 
    } 
    /** 
     * build a widget update to show the current wiktionary 
     * "word of the day." will block until the online api returns. 
     */ 
    public remoteviews buildupdate(context context) { 
      // pick out month names from resources 
      resources res = context.getresources(); 
      string[] monthnames = res.getstringarray(r.array.month_names); 
       
      // find current month and day 
      time today = new time(); 
      today.settonow(); 
 
      // build the page title for today, such as "march 21" 
      string pagename = res.getstring(r.string.template_wotd_title, 
          monthnames[today.month], today.monthday); 
      string pagecontent = null; 
       
      try { 
        // try querying the wiktionary api for today's word 
        simplewikihelper.prepareuseragent(context); 
        pagecontent = simplewikihelper.getpagecontent(pagename, false); 
      } catch (apiexception e) { 
        log.e("wordwidget", "couldn't contact api", e); 
      } catch (parseexception e) { 
        log.e("wordwidget", "couldn't parse api response", e); 
      } 
       
      remoteviews views = null; 
      matcher matcher = null; 
       
        prefs prefs = new prefs(this); 
      if (pagecontent == null) { 
        // could not get content, use cache 
        // could be null 
        pagecontent = prefs.getpagecontent(); 
      } 
       
      if (pagecontent != null) { 
        // we have page content 
        // is it valid? 
        matcher = pattern.compile(wotd_pattern).matcher(pagecontent); 
      } 
      if (matcher != null && matcher.find()) { 
        // valid content, cache it  
        // ensure that latest valid content is 
        // always cached in case of failures 
        prefs.setpagecontent(pagecontent); 
 
        // build an update that holds the updated widget contents 
        views = new remoteviews(context.getpackagename(), r.layout.widget_word); 
         
        string wordtitle = matcher.group(1); 
        views.settextviewtext(r.id.word_title, wordtitle); 
        views.settextviewtext(r.id.word_type, matcher.group(2)); 
        views.settextviewtext(r.id.definition, matcher.group(3).trim()); 
         
        // when user clicks on widget, launch to wiktionary definition page 
        string definepage = string.format("%s://%s/%s", extendedwikihelper.wiki_authority, 
            extendedwikihelper.wiki_lookup_host, wordtitle); 
        intent defineintent = new intent(intent.action_view, uri.parse(definepage)); 
        pendingintent pendingintent = pendingintent.getactivity(context, 
            0 /* no requestcode */, defineintent, 0 /* no flags */); 
        views.setonclickpendingintent(r.id.widget, pendingintent); 
         
      } else { 
        // didn't find word of day, so show error message 
        views = new remoteviews(context.getpackagename(), r.layout.widget_message); 
        views.settextviewtext(r.id.message, context.getstring(r.string.widget_error)); 
      } 
      return views; 
    } 
  } 
} 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。