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