详解Widget组件及设计介绍

移动开发
Widget组件及设计介绍是本文要介绍的内容,主要是来了解并学习Widget的内容,具体关于Widget内容的学习来看本文详解。

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内容的学习能对你有所帮助!

责任编辑:zhaolei 来源: 网络转载
相关推荐

2011-02-28 13:04:27

RelativeLayAndroid Wid

2011-09-08 15:51:33

Android Wid组件

2011-09-07 14:20:42

Android Wid组件

2011-09-07 10:58:07

Android wid

2010-07-13 09:02:19

Widget开发

2011-09-09 20:14:58

Android Wid

2011-09-08 15:40:45

Android Wid组件

2011-03-14 09:55:25

AndroidWidget

2011-09-07 13:18:40

Android Wid

2011-09-07 10:34:48

Android Wid

2011-09-07 16:28:46

QT WidgetQWidget

2011-09-09 19:05:28

Widget

2011-09-08 13:11:07

Android Wid实例

2013-01-15 15:18:46

Linux守护进程

2009-09-04 08:55:41

VMware组件介绍准备主机服务器

2011-09-08 15:29:50

Android Wid界面GridView

2011-09-07 14:39:47

Android Wid设计

2009-06-05 10:48:01

struts2 ite功能

2011-09-07 14:25:53

Android Wid设计

2023-12-05 16:01:12

模板方法设计模式算法结构
点赞
收藏

51CTO技术栈公众号