实时信息 » 设计 http://www.shtion.com 互联网应用 Wed, 08 Feb 2012 12:38:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 iOS App体验设计 http://www.shtion.com/9299.html http://www.shtion.com/9299.html#comments Sun, 19 Jun 2011 18:29:11 +0000 shtion http://www.shtion.com/?p=9299 iOS APP体验设计不像互联网的体验设计那样，有一堆的方法论和可以“借鉴”的案例。 目前除了苹果的<Human Interface Guidelines>和前Palm的<Zen of Palm>外，没有找到更好的设计哲学和方法论。事实上，即便认真地研读了HIG和Zen of Palm，甚至是Oolon Colluphid的哲学巨作你也无法严格按照Guideline设计出一款出色的APP。其原因，我得从程序员和设计师说起。

程序员 vs 设计师

最被思想处于上世纪初的人理解的软件设计开发是由 1. 美工 2. 程序员 3. 项目经理 构成。我这里讲的设计师不是美工！这是前提。因为美工只关心好不好看，他们几乎不关心（或者不懂）产品的易用性。

如何鉴别程序员和设计师呢？ 你无法用会不会写代码来区分他们（毕竟很多设计师是会写编程的，例如彩程设计的设计师们，反之亦然），但是你却可以用通过他们平时思考方式来区分他们。

程序员： “哇！这个功能好！我们能不能在我们的APP中加上呀？” 这种场景常发生在他们看到了一个很 “COOL” 很 “绚丽”的APP后常发出的感叹（或者心里的感叹）。

设计师答：“我们凭什么要加这个功能呢？”

程序员更倾向于关注功能本身，希望把所有好的东西都加到自己的作品中。例如，好的设计模式，高效的算法，看似绚丽的特效。一般程序员的作品有两类， 第一类是功能比北京的车子还要多，你需要一本牛津字典一样厚的说明书才能搞懂如何使用。另一类有十分绚丽的特效，界面飞来飞去，一走神就以为自己在耍杂技 了。

设计师更倾向于关注产品整体，他们通常都有产品的功能洁癖。他们通常会从摄影中找到共鸣： 一张好的照片有三个要素 1.有一个鲜明的主题。 2. 画面中的元素可以快速地把观众的注意力转向这个主题。3. 只有一个主题，所有有主题不相关的重点通通砍掉。

不幸的是，很多iOS的开发者是从程序猿跳出来做的。 泪流满面地用咆哮体高喊 “我们程序猿也终于可以赚钱了！！！有木有！！！有木有！！！” ， 于是他们做出来的东西可以用下图简要地说明：

没错！问题不在于功能是不是足够的多，而是体验是否足够的好，是否能解决问题。而尤其在做iOS的APP设计的时候，由于设备的本身特点直接决定了设计完全不同于网站的体验设计。

我们认为，主要区别有以下三点：

1. 视觉焦点&操作焦点

所谓视觉焦点和操作焦点的问题，我们可以从传统的电脑使用说起。 我们控制电脑通常是通过鼠标， 手用鼠标控制屏幕的指针， 移动到某个位置， 点击、双击、拖动等完成操作。 我们看到的是屏幕，操作的是鼠标。我们的视觉焦点是屏幕，操作焦点是鼠标。属于视觉焦点和操作焦点不同的类型。

而有触摸屏的设备和电脑最大的一个区别就是它们的视觉焦点和操作焦点是同一个点。 因此，我们想打开一张图，只需要用手点一下图。

视觉焦点和操作焦点同一的最大好处就是十分容易学习使用这类设备。但是正是因为两点同一，当我们在操作的时候同时也会挡住焦点。

这一特性会影响到很多UI设计，例如：拿出你的iPhone，把手放在iPhone上，你会发现你的iPhone最大宽度也就4个手指的宽度。

我们用圆圈代表被挡住的区域，其中绿色区域是安全区域，代表我们心理上认为一定可以准确地点到的区域；而黄色区域代表我们心理上会有点忐忑，不能确定是否能点中的区域。例如某拍照软件的设计：

没错，问题不言而喻。 从UI的设计上来看，如果是个网页的话，视觉的确没什么问题（当然，删除按钮放在修改的旁边本来就是愚蠢的做法，这一点就先不说了）。但是由于视觉焦点和操作焦点同一的原因，点击修改就变得十分困难与紧张，何况旁边还是一个删除按钮。

2. 空间感知

传统的互联网网页间的跳转，我们都熟知的是利用链接。链接可以在整个网站甚至是网站间任意跳转，点了链接后就进入了一个全新的空间。空间感知为网状的，没有头没有尾，在任意一个点通过网址都可以进入。

在移动设备的应用程序设计中，进入APP通常都是一个固定的点，每个操作就带入另一个空间，如果失去了空间感知，就像失去了地图，用户会很容易有迷失的感觉。

而由于屏幕的大小等因素，APP不能直接告诉用户空间是什么样的，但是可以通过各种手段来给用户以暗示。例如：

Camera+中，两个主要的场景，一个是拍照，一个是照片管理。两者之间空间是上下的关系，当用户在拍照场景下点击相册时，界面会向上推动显示照片管理的场景。反之亦然。此时向用户暗示的场景如图所示：

更复杂一些的空间暗示，如Reeder iPhone版。空间中的每个位置十分清晰，并且用动画的方式流畅地向用户暗示这种空间感。不仅如此，Reeder iPhone版的加星去星的空间感知不是上下左右，而是前后的关系。请自行购买后体验。

除此之外，Reeder iPad版本和Our Choice的空间感知也做得十分的棒。以Our Choice和Reeder iPad为例（视频）。Our Choice在选章节的场景进入章节内文时，选章节的场景会缩小，通过“近大远小”的常识在一个平面内暗示两个场景间的空间关系。 Reeder 也采用了类似的方式。

3. 体位化设计

以iPad为例子，通常我们使用iPad的时候有两种体位，第一种是把iPad放在桌面上进行操作，这种体位使用APP，无论按钮在哪里，点击都需要用一只手完成，两个步骤间的按钮距离远近也不会成为负担。 而当手握着iPad的时，这种特殊体位，问题就出现了。

（如果你有手机，请现在拿在你的手上）倘若你只希望用一只手完成操作，你会发现，你用大拇指点击屏幕中所有点，却只有绿色区域是很易点击的。如下图所示，iPad的易操作区域也是分布在弧形区域内。

接下来用一个视频还说明坏的体位化设计和好的体位化设计的区别。

前半部分坏的体位化设计，是因为设计没有考虑到操作姿势，以至于左边一排不常用的功能占据了最重要的黄金区域，而常操作的区域却远离易操作的区域。 操作起来就比吃掉一只死苍蝇还难受。 而后者，好的体位化设计，所有的常用功能，一只手，不需要太多移动就可以全部完成： 上篇文章，下篇文章，标记未读，标记加星。

当然，如果你是我们《牛壹周》的忠实读者，那你一定记得我们的风火轮（详见牛壹周1.2之无敌风火轮）和一阳指(牛壹周1.1更新手记)？ 没错，我们坚决地去掉了一阳指，因为这是一个漂亮却难用的设计（至少不是一个好的体位化设计）。 我们在架构上保留了风火轮（当然，只是在程序中保留，但并未启用），因为这是一个很好的体位化设计案例。 例如，在阅读杂志的时候，我们常要翻下一篇文章，传统的操作是先进目录，然后再找到要看的文章，再跳转。 而使用风火轮，如视频所示，你的手完全不用离开屏幕，无论你的手有多大多少，无论你是左撇子还是右撇子。

在即将发布的iOS5中，iPad的键盘设计也很好地体现了所谓体位化设计的精髓：

结束语

iOS设备，甚至是包括Android在内的所有移动设备，他们都因为独特的使用场景，似的设计不同于网页设计。 很多“美工”，甚至程序员从网页设计转变角色来设计移动设备APP时常忽视这些隐形的因素，最终导致产品设计水平难以提高。如果说近年来交互设计师在网站 设计中的地位越来越高，那在移动设备的设计中，他们的地位会更为重要。视觉焦点/操作焦点、空间感知和体位化设计这三个iOS设备的特点事实可以类比到 Android甚至更多的设备中，当然也不局限这三个特点。

当然，也正是因为这些原因，当我们听到别人兴奋地告诉我们：“哇！HTML5可以做到所有设备自适应ye~”的时候，我们通常是不屑，心里默想“程 序员！”。 当然，这里并非贬低之意。只是，有一点不得不承认，不同尺寸的设备，不同的分辨率，若想获得最好的体验，“自适应”让机器适应了却让人难以适应。例如一个 按钮本来有1厘米高宽的，一个自适应，在iPhone上就只有原来的1/3时，你叫人怎么点击？ 当然这样的例子很多。 大多数这种不花功夫还大赚的宣传，就犹如电线杆贴满的小广告，通常都是缺少优质应用的病入膏肓的硬件厂商为了快速解决痛楚而买肾的做法。当然，对技术敏感 的工程师就不自觉地帮着一起吆喝罢了～

文章来自：36氪 。彩程设计 作者：肖轶翔「@yxshawn」

]]> http://www.shtion.com/9299.html/feed 2 隐藏在iOS 5背后的设计思想 http://www.shtion.com/8911.html http://www.shtion.com/8911.html#comments Mon, 13 Jun 2011 01:00:59 +0000 shtion http://www.shtion.com/?p=8911 今年的WWDC发布了200项针对iOS5的更新，现场展示的20项更新包括：

  1. “新的Notification Center”
  2. “统一的杂志管理中心：Newsstand”
  3. “深度整合的Twitter”
  4. “强化的Safari”
  5. “内置的Reminders”
  6. “强化的Camera”
  7. “优化的Mail”
  8. “免电脑同步”
  9. “社交化的Game Center”
  10. “内置的iMessage”

在这些Apple引以为傲的新特性里，依稀能看到很多竞争对手的身影：Android的新通知系统、Kikmessager的即时消息、Google的云同步、Windows8的分离式键盘。。。

是苹果在退步么？已经不能做出创新的玩意儿了么？国外大公司不是一直很注重专利诉讼的么？老乔脑袋坏了么？其实，老乔在下一盘很大的棋。

专利诉讼本身就只是一种打击商业对手的武器。对于苹果来说，手里捏着一大把敌人的小辫子，对手即便发现苹果抄了自己，也不敢来告。专利已经成了核武库，一定要有，但基本不会真用，更多的是吓唬别人。我就抄了，怎么着吧！

专利仅仅是一种赢得商业利益的手段。对于苹果来说，此时重要的不是用憋屈的步伐通过对手的专利地雷阵，而是完善iOS的生态系统。在这一点上，苹果 有自己核心的设计思想。为了达成该目的，自然是怎么好用怎么来。通过分析WWDC上着重展示的10项更新，我个人举得苹果应该有这样的设计思想：

1、为源于生活的需求革新效率，而非重新发明需求

用户生活在客观的现实生活中，他们的一举一动都由“需求”在驱动。当Nokia还在以换壳为本时，苹果就为了帮助用户满足“随时随地获取信息、处理 事务”的需求而发布了iPhone。需求是一直存在的。所以，产品应做的，是分析这些需求在以往被满足时存在的缺陷，用新的设计方案和技术手段更快更好更 省心地满足它。而非臆断出一些功能，再去招揽用户来用。教科书上曾经有一个马先生讲过，这就叫“提高生产力水平”。

在iOS的更新中，苹果以用户使用手机的实际情景为出发点，选择了“通知中心”、“杂志中心”、“Safari”、“记事本”、“相机”和“无线同步”作为优化点。这是因为这些都是用户在使用手机时能够明显感知到的痛点。

消息中心是第一个登场，但也是抄袭感最强的更新。iOS早期，只支持单任务，并且所有的消息推送都需要官方审批，所以简单的警告框提醒还说得过去。 但进入多任务时代后，警告框就很吃力了。因为提醒是有强弱之分的。在运行某程序时，来自其他程序的提醒以警告框的方式出现就会非常干扰当前任务。为了摆脱 这个诟病，iOS需要轻柔的提醒方式，以及一个暂存弱提醒的地方。而且，这个地方需要在任何位置都轻松唤出。从上往下被Android用了，从下往上被 Palm Pre用了，依据iOS的界面逻辑，左右是平级的，不能用。所以…  抄吧，谁怕谁啊。但苹果不会抄的那么没品。它将消息按照归属程序做了聚类，查看更方便。同时，将轻量的widget放在这里，以便用户经常查看信息。

浏览信息是手机的强项，但管理却不是。所以，苹果说：“我来帮你”，于是，就有了Newsstand。用户不必再一期期地去下载杂志，归类，分组。有了Newstand，只需要订阅就可以了。这就是Apple提升的生产力：用更高效的方式解决已有的问题。

“Safari”、“记事本”、“相机”和“无线同步”的优化也基本遵循同样的思路。

手机更多的用于碎片时间，的阅读环境很不稳定。于是Safari就增加了readlist的功能，帮助用户暂存没读完的页面。

糟糕的记忆力需要人们随时记下可能遗忘的东西，但每多带一件东西就多一份重量。手机是最随身携带的私人物品，所以老乔决定把它列为手机的基本应用，以减轻用户的负担。同时，它还支持云同步，省去了用户在多台设备间倒腾待办事项的麻烦。

抓拍生活中的趣事是相机应尽的责任。但按照现在的流程，掏出手机找出“相机”再打开它，镜头早就错过了。于是苹果就简化了打开相机的流程，直接一步到位。

其实“创新”并不遥远。它需要对生活的热爱，用心体会其中喜怒哀乐。只要思考如何才能让生活更美好，就是在创新。永远不要为了创新而创新，那只会刻意增加无用的“差异”，让产品支离破碎。

2、One Person，One Life

每个人的人生都应是唯一且统一的。人们在这个唯一的人生里，去和其他人的唯一的人生交流。但是，当代人的人生都被隔离在一个又一个产品中。一个人在甲产品中做的事儿，交谈的人似乎都与乙产品的世界无关。

生活想回归简单，就需要重新整合这些产品中的信息，打通围墙。用户，只不过是要过用这个产品去过他的这个生活，和他在现实世界里认识的交流。我们不 要把用户搞得人格分裂啊。人只有一个，办公室里的阿Q就是家里的阿Q，就是飞机场候机的阿Q；电话那头的阿Q就是对话框那头的阿Q，就是Google Latitude里地图上标的阿Q，就是twitter上刚刚更新的阿Q。

为了帮用户整合支离破碎的世界，苹果强化了云同步：用户不必再去想如何把一个个世界的碎片粘起来。为了更无缝的沟通，苹果对twitter做了深度 整合：用户不必再“到twitter的世界里”更新生活，twitter融为生活的一部分，它是嘴巴的自然延伸，是和视听嗅味触一样感受世界的超能力。

3、Be the Trend，or Push Forward the Trend

这应该是下很大的棋所应该有的思想。拥有海量的用户有两种方式，一种方式把服务做到极致，让用户非常需要你的产品，让自己成为潮流。但这受限于时 机、受限于能力、受限于战略眼光，所以并非总是成功。另一种是，就是为别人的潮流“推波助澜”，成为用户追随潮流的最佳工具，最佳拍档。给沙漠里淘金热的 人送水也是能发大财的。要对用户的需求敏感。

让苹果去重建一个twitter、facebook或是flickr，都显然是不可能的。所以，苹果要让iOS设备成为twitter、 facebook和flickr用户的最佳拍档。于是，发推更方便啦，手机上也能简单编辑照片上传啦，掏出手机抓拍照片也能在3秒内搞定啦。那么，不用 iPhone还用谁呢？

只要是能让用户觉得iOS设备很方便，并且苹果也能够方便复制的，乔布斯就绝对的毫不留情。他要把iOS打造成完美的生态系统，用户可以用它吃喝拉 撒不出门。还有什么比这依赖度更高的么？所以kikmessager类的短信工具，wifi同步的工具等等，都在劫难逃。苹果搞出App Store弄开放平台，绝不是良心发现。它只是为了让自己的生意更红火罢了。想抢食，找死啊。

设计不是简单的画个线框图，流程图，加个阴影，上个高光。它的核心在于如何利用有限的资源让生活更美好。所以适时把自己从鼠标、手绘板上提起来，从生活的角度反思下设计的本质，也会有助于寻清设计的方向。

来自：http://xuexiao.me

]]> http://www.shtion.com/8911.html/feed 0 [探讨] Mobile Web Design手机网页设计 http://www.shtion.com/8332.html http://www.shtion.com/8332.html#comments Thu, 02 Jun 2011 01:00:41 +0000 shtion http://www.shtion.com/?p=8332 各式或华丽，或炫目，或让人迷惑，或让人叹服的Web Design已经愉悦我们很长很长的日子了。 可是，当有一天我们发现了一个新事物——用手机上网，在手机上看网页，我们看到了一种不一样Web，这种网页大家通常叫他们Wap页面，这种页面形式用简 洁的视觉效果，清晰的页面架构和小分量的页面体积第一次满足了我们手机上网的需求。
但到了人类历史的某一天，铺天盖地的Iphone 某某 和Android谁谁都出现了，硕大的屏幕尺寸，华丽的界面展现，用手指头去完成各式的操作，手机的的历史使命再也不是打电话发短信，人们大呼“我们要上 网！”我们需要给予用户手机上网合理的体验，丰富的内容和交互。又由于Html5的“说是快，那是及”的出现，时势造英雄Mobile Web 华丽登场了。

（一） 我是一种延续——Mobile Web承接Web的视觉体验

以www.deviantart.com为例，她已经是无数设计师生活的一部分，在个人电脑上我们拥有她，在手机上我们也需要她。

Mobile Web的任务很重要的就是要满足用户们从个人电脑到手机的延续，用户在个人电脑上看，在手机上也看，对于像”www.deviantart.com”这样 的有很久时间积累的产品，她的视觉风格在用户的脑子里早已形成了一个具象的画面，在移动设备上我们的”m. deviantart.com”同样需要延续这样的品牌视觉风格。
从例子里我们看到好的品牌视觉延续，帮助用户在使用移动设备访问该网站时立刻建立起亲切的视觉初体验和品牌认知。更重要的是，好的视觉设计的延 续可以很好的帮助用户在使用Mobile Web时快速的定位自己在个人电脑上使用Web产品时已经熟悉的各种功能，使得用户在Mobile Web上快速上手完成自己的交互需求。

（二）我是一种重生——Mobile Web视觉设计的创新

作为Mobile Web的舞台，Iphone 某某 和Android谁谁都有着各自，各式各样的“规章制度”，而且各自特立独行，我行我素。Mobile Web的舞蹈要与他们浑然天成，就需求穿上他们提供的舞衣才能与君共舞。
www.yahoo.com 的页面效果 与m.yahoo.com的页面效果
www.baidu.com的页面效果与m.baidu.com的页面效果
在上图中我们分别看到门户产品yahoo和搜索引擎产品baidu分别在个人电脑端和移动设备端的Web与Mobile Web的视觉呈现有很大的差异。
一个优秀的Mobile Web设计在延续了自身品牌的一致性后，与移动设备本身的品牌视觉特性相结合是成功的重要因素之一。一致性能帮助用户得到与设备本身和谐的流畅体验。
在上图中我们分别看到门户产品yahoo和搜索引擎产品baidu分别在个人电脑端和移动设备端的Web与Mobile Web的视觉呈现有很大的差异。一个优秀的Mobile Web设计在延续了自身品牌的一致性后，与移动设备本身的品牌视觉特性相结合是成功的重要因素之一。一致性能帮助用户得到与设备本身和谐的流畅体验。
www.naver.com的页面效果与m.naver.com的页面效果
m.naver.com的众多带有移动终端特点的视觉设计
在naver的Mobile Web视觉设计中使用了大量移动终端本身的视觉特点，如产品的链接采用app icon的方式，各级页面中导航的设计等等。
我们可以发现好的品牌再设计，也会给品牌本身带来更多的视觉展现的可能，也迎来了味道更纯正的Mobile Web，真的为Mobile 而设计——“为了用户感受的一致而不一致的去做设计”。

（三）我是Mobile Web——新的物种

曾经我是 Web的一个化身，但我在Mobile 的星球生活，我开始变化，我有了自己更多的特性，有一天我终于意识到我成为一种新的物种。
www.baidu.com 的首页与m.baidu.com的首页
用户在使用个人电脑上网与使用移动设备上网时的需求，因为使用场景，使用时间 ，使用群体等等的不同，以及移动设备本身的反推可能有着越来越大的差异。所以我们看到在个人电脑端的baidu首页没有“小说”链接，但在移动终端的baidu首页上拥有独立的“小说”频道。
Baidu小说频道

 

这样的差异衍生出一批批Mobile Web自有产品，这样的产品为满足用户在移动设备上的强需求而设计，这样的设计不再有过去为人们所熟悉的个人电脑Web设计的影子，成为真正的Mobile Web。
www.google.com.hk的首页与m.google.com.hk首页
Google移动端周边搜索

（四）我是云端的App—— Mobile Web App视觉设计

随着网络的不断发展，Mobile Web又迎来了Mobile Web App，不需要下载，将我添加到桌面，就成了一个App应用。
Mobile Web 的视觉设计进入到全面的客户端化视觉设计， Mobile Web 与Mobile Web App的视觉设计真是老虎老鼠傻傻分不清楚。
Mobile Web 的序幕刚刚拉开，我们都抢座等着慢慢看下去。

来源：http://mux.baidu.com/2011/06/898/

]]> http://www.shtion.com/8332.html/feed 0 如何申请Gravatar全球通用图像？ http://www.shtion.com/7348.html http://www.shtion.com/7348.html#comments Sat, 21 May 2011 04:05:07 +0000 shtion http://www.shtion.com/?p=7348 Gravatar(个人全球统一标识)是globally recognized avatar(直译为”全球标识的头像”)的缩写。它可以在一切支持Gravatar的场合显示你的专属头像,就是能让你在发布评论的时候可以使用专属头 像，它将和你填写的email地址一一对应,wordpress2.5以上版本,已经集成了Gravatar头像功能。具体申请步骤如下：

1，登陆http://en.gravatar.com/site/signup，填写注册邮箱之后，点击”Signup”按钮；

2，到注册的邮箱中查收邮件并点击其中的链接确认；

3，在弹出页面中填写相关内容；

4，点击页面中部框框下的链接”Add one by clicking here!”；

5，如果要从自己的本地硬盘上传一张头像，那就点击第一个链接”My computer’s hard drive”上传头像；

6，进入Crop页面，滑动滑块选择你需要的照片区域后点击页面下部的”CROP”按钮；

7，给自己的头像评定级别。G 普通级、PG 辅导级、R 和 X 为限制级，一般不黄不暴力的选G就行了；

8，点击页面中的头像照片，在弹出的小页面里点击”Confirm”钮确认；

9，到支持Gravatar头像功能的网站，输入申请头像时的邮箱发表评论试试吧

,10，想更改头像的话只需要到http://en.gravatar.com/网站，登陆后修改即可。

提示：如上述操作无误，请稍等片刻，头像可能不会马上显示。另外，可能还需清空浏览器缓存文件

]]> http://www.shtion.com/7348.html/feed 0 如何配置iOS开发平台？ http://www.shtion.com/7262.html http://www.shtion.com/7262.html#comments Fri, 20 May 2011 15:23:02 +0000 shtion http://www.shtion.com/?p=7262 如何配置iOS开发平台呢？其实很简单。为了保证开发者的苹果风格以及更好的开发环境，XCode只是一个在Mac OS X下运行的IDE。换句话说，要开发iOS应用，首先你需要一台Mac，而本文就解决了此类问题。

1. 获得XCode和iOS SDK

打开浏览器，输入developer.apple.com，然后进去。找到开发者登录的地方，是英文的（貌似没有中文），注册Apple ID或者直接用现在的Apple ID登录。然后在Downloads下面下载iOS SDK。至于XCode，XCode都会随Mac电脑的随机的光盘免费提供，如果赠送给你的不是XCode 4，那么去Mac App Store花USD 5.00下载一个。当然，各种方法来获取到XCode。

2. 安装

点击你下载回来的XCode 4，从App Store下载的请无视，点击DMG镜像，然后点击里面的mpkg或者pkg安装文件，同意EULA，然后就一路 Continue… 之后XCode 4就安装好了。XCode在Macintosh HD的/Developers里。

再安装iOS SDK，如果已经是集成了的版本就请无视。还是点击，然后同意，然后就Continue吧。

3. 运行伟大的XCode 4

此时，iOS开发环境就配置好了！其实XCode的Interface Builder是最好的GUI设计工具，很美。

]]> http://www.shtion.com/7262.html/feed 0 Android用户界面设计：创建列表视图程序 http://www.shtion.com/6389.html http://www.shtion.com/6389.html#comments Mon, 09 May 2011 00:37:33 +0000 shtion http://www.shtion.com/?p=6389 列表视图（ListView）是Android平台下用于显示不定数量的数据最有用的视图控件之一。在这个教程中，我们将向你展示如何使用ListView来浏览文章列表。

在之前的文章中，你看到了许多关于不同布局控件的教程。在今天这个教程中，你将结合使用它们。应用程序本身非常简单：它将显示文章标题列表，当点击 标题时，显示文章内容。这篇文章的节奏将比我们的入门教程更快一些。如果你对基本的Android控件或概念不熟悉你可能需要复习这个网站上我们其它的一 些教程，甚至是Android API参考。最终的开源代码可以在Google code上下载到。

步骤0: 创建项目

在Eclipse中创建一个新的Android项目。我们将项目命名为MT-List，起始活动命名为TutListActivity。这个 Activity必须继承ListActivity类，它是一个特殊的Activity类，用于帮助管理ListView控件。我们使用的是 Android2.3.3的API。

步骤1: 设计列表界面

实际上，这一步要做的很少。一个由重复项组成的ListView控件，每一项都有相同的布局（一项一个模板）。我们想要显示一个文章标题列表。每个 标题都是ListView中的一项。因此，每个列表项的模板只需要一个TextView控件。在你的项目中添加一个叫做list_item.xml布局资 源文件，它描述了列表中的每一项的模板布局。在这个例子中，它看起来可能像这样：

<?xml version="1.0" encoding="utf-8"?>
 <TextView
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:textSize="24dp"
 android:padding="6dp" />

字号加上填充属性值要确保在平均大小的屏幕下列表每一项对于平均手指的大小来说是足够大的触摸目标。

步骤2: 为ListView填充数据

ListView控件设计用于从数据源加载数据。可以使用适配器从数据库，数组或其它数据源读取数据。在这个程序中我们使用数组作为数据源。今后， 你可以将数组替换为某些实时数据源。在你的项目中创建两个字符串数组（你可以将他们添加到strings.xml或者一个分离的arrays.xml文 件，随你愿意）。将一个数组取名为“tut_titles”，另一个名为“tut_links”。用网站上的有效的标题和URL填充这两个数组。下面是我 们的数组：

<string-array name="tut_titles">
 <item>Design &amp; Build a 1980s iOS Phone App: Design Comp Slicing</item>
 <item>Best of Tuts+ in February 2011</item>
 <item>Create a Brick Breaker Game with the Corona SDK: Game Controls</item>
 <item>Exporting Graphics for Mobile Apps: PNG or JPEG?</item>
 <item>Android Tablet Design</item>
 <item>Build a Titanium Mobile Pizza Ordering App: Order Form Setup</item>
 <item>Create a Brick Breaker Game with the Corona SDK: Application Setup</item>
 <item>Android Tablet Virtual Device Configurations</item>
 <item>Build a Titanium Mobile Pizza Ordering App: Topping Selection</item>
 <item>Design &amp; Build a 1980s iOS Phone App: Interface Builder Setup</item>
 </string-array>
 <string-array name="tut_links">
 <item>http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/80s-phone-app-slicing/</item>
 <item>http://mobile.tutsplus.com/articles/news/best-of-tuts-in-february-2011/</item>
 <item>http://mobile.tutsplus.com/tutorials/corona/create-a-brick-breaker-game-with-the-corona-sdk-game-controls/</item>
 <item>http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/mobile-design_png-or-jpg/</item>
 <item>http://mobile.tutsplus.com/tutorials/android/android-tablet-design/</item>
 <item>http://mobile.tutsplus.com/tutorials/appcelerator/build-a-titanium-mobile-pizza-ordering-app-order-form-setup/</item>
 <item>http://mobile.tutsplus.com/tutorials/corona/corona-sdk_brick-breaker/</item>
 <item>http://mobile.tutsplus.com/tutorials/android/android-sdk_tablet_virtual-device-configuration/</item>
 <item>http://mobile.tutsplus.com/tutorials/appcelerator/pizza-ordering-app-part-2/</item>
 <item>http://mobile.tutsplus.com/tutorials/iphone/1980s-phone-app_interface-builder-setup/</item>
 </string-array>

当然这个数据是静态的。在一些情况下，使用静态数据对于一个ListView来说也是有意义的。对于这些情况，使用一个字符串数组资源非常简单和方便。需要确保标题和链接的排序是一致的，这样两个数组才能匹配。

步骤3: 将数组适配到ListView

现在程序已经有数据了，现在来显示它们。回到TutListActivity.java，修改onCreate()方法，使用 setListAdapter()方法来加载数据。和常规的活动不一样，对于整个活动就仅仅只是一个ListView的情况，ListActivity不 需要使用setContentView()。完成后，你的整个ListActivity将看起来像这样：

public class TutListActivity extends ListActivity {
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setListAdapter(ArrayAdapter.createFromResource(getApplicationContext(),
 R.array.tut_titles, R.layout.list_item));
 }
 }

这时候，你已经可以运行这个程序了。你将看到一个具有所有本教程中所有标题的ListView。上划和下划都正常。但是，点击标题还没有任何反应。

步骤4：处理ListView条目点击

处理ListView中条目的点击与其它视图对象的处理方式相似：使用侦听器（listener）。在这里，我们关注 OnTimeClickListener。你可能注意到我们还没有直接处理过ListView对象。现在是时候了。在ListActivity中，简单地 调用getListView()方法来遍历ListView，然后调用setOnItemClickListener()方法并且一次性实现它们：

getListView().setOnItemClickListener(new OnItemClickListener() {
 @Override
 public void onItemClick(AdapterView<?> parent, View view,
 int position, long id) {
 // TBD
 }
 });

onItemClick()方法会在用户每次点击列表视图中的每一项时被调用。为了方便，它可以传入几个有用的参数，其中一个我们需要它来启动查看器活动（viewer activity）。等等，什么是查看器活动？

步骤5：创建查看器活动

非常好的问题。让我们现在就来创建一个查看器活动！这个活动将用于向用户显示教程内容。通过继承Activity创建一个新的类，并把它命名为 TutViewerActivity.java。为它创建一个布局资源文件，文件只包括一项：一个WebView控件。布局文件应该看起来如下：

<?xml version="1.0" encoding="utf-8"?>
 <WebView
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:id="@+id/tutView">
 </WebView>

在TutViewerActivity类的onCreate()方法中，调用setContentView()方法并将这个布局传入。最后，不要忘了将这个活动添加到你的AndroidManifest.xml 文件。

步骤6：启动Details Activity

注意力回到TutListActivity一会。让我们看看我们需要做什么来启动这个查看器Activity显示合适文章链接。在onItemClick()方法中，被点击项的位置被作为一个int型的值传入。这就是我们需要用来访问文章链接数组的值。
链接数组里的字符串值是URL。传递URL到另一个活动的简便方法是通过setData()方法向Intent添加一个Uri。下面是onItemClick()的最终实现，它启动查看器活动，传入合适的URL：

@Override
 public void onItemClick(AdapterView<?> parent, View view,
 int position, long id) {
 String content = links[position];
 Intent showContent = new Intent(getApplicationContext(),
 TutViewerActivity.class);
 showContent.setData(Uri.parse(content));
 startActivity(showContent);
 }

如果你只是将这些代码直接粘贴到onCreate()方法的最后面，你会注意到links变量还没有定义。因为它将用于OnItemClickListener类，变量必须是一个final值，如下：

final String[] links = getResources().getStringArray(R.array.tut_links);

这一行必须放在OnItemClickListener的定义之前。是的，你可以将它定义成非final的成员变量。对于更复杂的情况，那样做甚至是必须的。但是在这里，我们可以在方法中放置所有代码。
现在如果你运行这个程序，你将得到一个空白的查看器界面。活动正确地启动了，但是我们需要去连接查看器活动来在WebView控件中加载URL。

步骤7：加载URL

注意力回到TutViewerActivity.java文件。在调用setContentView()方法之后，添加代码，在传入的Intent 中检索Uri并将它转换成String变量。然后将一个调用添加到WebView类的loadUrl()方法。整个TutViewerActivity类 的代码将看起来像这样：

public class TutViewerActivity extends Activity {
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.tut_view);
 Intent launchingIntent = getIntent();
 String content = launchingIntent.getData().toString();
 WebView viewer = (WebView) findViewById(R.id.tutView);
 viewer.loadUrl(content);
 }
 }

现在再运行程序。正常了么？还没有！最后一个细节：你必须把网终权限添加到AndroidManifest.xml文件。现在运行这个程序，你将看到程序正常运行了：

步骤8：改善体验（可选）

目前来看，用户体验只是做到了仅仅是可以用。ListView展示所有文章标题，用户可以点击列表某一项并且可以转到一个带有WebView控件的活动来展示合适的URL的内容。为了将这个最基本的实现变得更优雅一些你可能考虑以下几个方面：

  • 设置浏览视图的初始缩放以应对接来的缩放
  • 配置WebView使其包含更多增强浏览体验的控件
  • 动态加载文章列表，而不是使用静态数组
  • 为ListView添加特效视觉效果
  • 充分利用大屏幕
  • 向ListView增加附加的信息：副标题，难度级别，图标，已读指示，收藏按钮等。

总结

ListView小工具是在界面上以列表形式组织数据的快速方式。在这个教程中我们只是接触到ListView控件的最表层。然而，你学到了最基础的：创建列表项，使用数据适配器，以及处理列表项点击。

转载自：RockUX–WEB前端

]]> http://www.shtion.com/6389.html/feed 0 [网站分析案例] 从淘宝首页焦点图来说用户体验 http://www.shtion.com/6357.html http://www.shtion.com/6357.html#comments Sun, 08 May 2011 15:10:57 +0000 shtion http://www.shtion.com/?p=6357 淘宝首页每天都有那么多的焦点图，在同等展现量的情况下，究竟哪些焦点图可以获取更多的点击量呢。

于是我就找了几张曾现出现过的焦点图做了一个小调研，调研人群仅涉及到我QQ上的一些朋友。并且调研人数基数也很小。可能调研结果不是很全面，但也许还是能说明一些问题吧。

以下是我这次调研选择的八张图片：

这八张图片风格都有一定的差异性。我自己总结了一下，对八张焦点图大致解析了一下。

图一：色彩炫丽浓重，偏可爱方向，突出品牌，店主的概念，无促销字眼，无数字

图二：比较有品质感，浅色系，突出卖点，永久包邮，附属关键词，VIP

图三：颜色偏粉嫩，重点突出包邮活动，附属信息：产品品牌和活动时间，活动配合时间节点，有限时条件

图四：深色系，视觉对比强烈，重点突出秒杀，传达信息：品牌，活动及活动时间。文字诱惑，有限时条件

图五：具有知名品牌吸引力，图片风格颇具小资情调，突出折扣信息，限时资讯。展示一个单品。

图六：图片比较有张度，运用裸女图加上1元抢购活动，视觉冲击力大。美女+1元+送IPAD的卖点刺激。

图七：暖色调深色系，纯色背景。文字、产品图片过多，重点不够突出，使用热销数字来打造马太效应。

图八：暖色调，少女情怀，突出满减活动，有品牌影响力。传达信息：产品品牌、品类和风格

我将这八张图发给我一些朋友(找了三十个人，其中9个男生，21个女生，年龄层都跟我相差不多，20岁到30岁)，让他们按照直觉来选择八张焦点图的点击次序。然后排列给我。并告诉，首选某张图片的理由。统计结果如下：

我整理了一下数据，将第一点击的权数设为8，第二点击的权数设为7，以此类推，最后点击的权数设为1。于是整理出来了八张图各自的得分权重如下：

总得分排名：图6>图8>图5>图3>图7>图1=图2>图4

其中男生选择的得分权重图如下：

男选得分排名：图6>图5=图4>图8>图2=图3>图7>图1

女生选择的得分权重图如下：

女选得分排名：图8>图6>图5>图3>图7>图1>图2>图4

上面三个矩阵图还是不能直接说明问题。那我再加工一下，整理成如下一个表格。

我有必要对上图做一些名词解释(我拍脑袋想出来的名词，不说，没人会懂的，哈哈)

得分：图片得分为加权得分，人数乘以相应分值再相加所得

得分比：男生得分占总得分比例，女生得分占总得分比例

首选率：单个个体在8张图片上首选点击此图片的概率

得分率：单张图片得分点总得分的比例

首选次数：在调研总体30个人中共有多少人次首选点击此图片

末选次数：在调研总体30个人中共有多少人次最后选择点击此图片

如此解释过之后，应该能差不多看懂上面那些数据了，例如图1在男生人群中的首选率为0.35，也就是说焦点图1在正常情况下，男生会去点击的概率是0.35

除此之外，我还从调研者的反馈理由中抽出了一些关键词。比如说，秒杀，满减，包邮之类的，也列成了表格，如下所示：

上面这张图的名词就比较简单，就不解释了，大家应该看得懂。比如说关键词美女的涉及人次为5，说明有5个人因为美女这个刺激属性而去点击一张图片，关注度为0.11，说明，有百分之十一的人在点击习惯中会考虑到美女的因素。

最后我做一下整体的分析吧：

一、从每张焦点图的总得分来看，差距并不是很大，八张图得分率最高的图6是16%，得分为174分，最低的图4得分率为10%，得分为109 分。8张图的平均得分是135分，可见，任何一张风格的焦点图都有他所对应的 一组兴趣人群。其中，图3，图5，图6，图8四张图高于平均分。

二、从首选率来看，男生的前三选择分别是：图6、图5、图4。女生的前三选择是：图8、图6、图5。有一定的相似性，可见，品牌，美女，秒杀之 类的关键属性在男生女生中是通用的。男女生选择原因区别比较大的是产品功能性。比如图7化妆品，图8女士内衣对女生的吸引力显然比对男生的吸引力大。

三、从选图理由中分析可以看到，女生的心思比较细腻，图片的色彩，格调，内容对她们的影响更大，而男生选图理由刚相对简单，他们更容易接受最简 单明了的视觉刺激。例如夸张的图片效果，醒目的促销字眼对男生的刺激就比较大。(从选图理由中还可看出，美女对女生的吸引力是不逊于男生的)

四、从选图理由中提炼出来的关键词可以得知：包邮信息，图片色彩分别有七人次提及，为最受关注属性。其次为一元信息，图片格调分别有6人次提 及，算重要属性。像秒杀、限时、VIP，免费送四个关键词的提及率就非常低。由此可见：限时秒杀，免费送这样的信息已经在淘宝泛滥，消费者对此甚至触发反 面情感

五、图1无促销信息，色彩浓重，偏可爱方向。有6人首选，同时有10人未选。是争议最大的一张焦点图。其中首选6人中有5个是女生(年龄层偏 小)，未选10人中有5人是男生(占男生比率的56%)。由此可见：图1是一张指向性很强的焦点图。这类焦点图可能点击数不会最多，但精准用户一定是不少 的。

六、图2显著特征是走品质路线，关键卖点：永久包邮。从点击分布来看，图2的点击次序比较平均。与同类型的图5对比，品牌信息不足，所以尾端的点击略多于头部。从消费者理解来看。图2呈现出来的营销概念比较模糊。

七、图3为白底人物图，重点突出全场包邮活动。首选次数和未选次数都比较少。点击分布趋于中部位置。且不论是男生还是女生，都差不多将第三次点击机会留给了图3。原因也很简单。图3的卖点比较单一，只给消费者呈现了一个关键词：包邮。

八、图4设计简单，粗大字体突出秒杀概念。虽然品牌信息，满减信息，限时信息也都有，但全被秒杀概念弱化了。这些信息基本无人提及。同时，图4的综合得分也是最低的。共有7个人将图4放在了未选的位置。焦点图4算比较失败。

九、图5主要突出品牌信息以及折扣概念。图片格调比较小资。综合得分排在第三，虽被首选次数不多。但被次选，三选，四选的概率却远大于其它图片。由此也可得知：用户在进行第一轮刺激选择后，第二轮选择会开始考虑到品牌概念。

十、图6表现形式夸张，配合裸女图以及一元抢爆的促销字样。得分是最高的。首选次数10次，次选次数6次。首选和次选的人数占了总人数的53%，因此不管这张焦点图点进去是什么内容，但成功地同时吸引了男生和女生的眼球。成功的焦点图。

十一、图7纯红色背景，文字产品信息都比较多。内容比较杂乱。重点不够突出，用户体验不是太好。图7被首选才1次，是最低的之一。但图七化妆品的功能属性是比较契合当下的季节气候的。因此，总体下来，得分也能排在第5。

十二、图8色彩鲜明，格调柔和，突出信息：品牌，满减活动。图8总得分排第二，从男女生点击分布来看。男生点击分布平均，女生点击分布聚集于头部。且从选择理由来看，点击图8的女生都有强烈的购物需求。因此：图8不仅是一张成功的焦点图，同时也定位到了精准人群。

分析到此结束。

本文转载自：Admin 5

]]> http://www.shtion.com/6357.html/feed 3 windows 7仿ubuntu/windows 7仿mac/windows 7仿windows 8主题 http://www.shtion.com/5770.html http://www.shtion.com/5770.html#comments Sat, 23 Apr 2011 10:59:53 +0000 shtion http://www.shtion.com/?p=5770 本文提供的是windows 7仿ubuntu主题的下载，windows 7仿mac主题的下载，windows 7仿windows 8主题的下载。XP时代，主题被模仿的五花八门。那么windows 7时代呢？windows 7现在的市场占有率很高，被折腾的次数也在不断攀升，本文来自deviantart.com由cnbeta整理与大家分享，三款主题分别是windows 7仿ubuntu主题的下载，windows 7仿mac主题的下载，windows 7仿windows 8主题的下载。

  • 仿Windows 8主题

相关工具：

Transform 7 To 8
Support:
- Windows 7 SP1
- X86(32Bit) and X64(64Bit)
- Best Work in X86(32Bit)
- All Language Versions
Programs:
Reshacker 3.5.2.84 by Angus Johnson
[link]
Universal Theme Patcher 1.5.0.22 by deepxw
[link]
Moveex 1.0.1 by Frank P.Westlake
[link]
JPGtoBMP 1.0 by efg’s Computer Labs
[link]
Taskbar UserTile alpha 7.1 By angelwzr
[link]
Aura Beta 2 By Stealth2010
[link]
Aero Lite Theme By thepanda-x
[link]
Windows 8 Aero Theme By velix94
[link]
Note : This just Begin And Will Be Continue.

下载地址：http://www.deviantart.com/download/204297010/8_skin_pack_1_0_for_7_by_hameddanger-d3dmsky.zip

  • win7 仿ubuntu主题

Transform 7 to ubuntu
Support:
- Windows 7 All versions
- X86(32Bit) and X64(64Bit) Windows Support
- Best Work in X86(32Bit)
- All Language Versions
Programs:
Reshacker 3.5.2.84 by Angus Johnson
[link]
Universal Theme Patcher 1.5.0.22 by deepxw
[link]
Moveex 1.0.1 by Frank P.Westlake
[link]
JPGtoBMP 1.0 by efg’s Computer Labs
[link]
Yodm3D 1.3 by Christian Salmon
[link]
SmartFlip 0.7 by Lup Gratian
Theme By dpcdpc11
[link]

下载链接：http://www.deviantart.com/download/200634192/ubuntu_skin_pack_3_0_for_seven_by_hameddanger-d3bgac0.zip

  • win7仿MAC 主题

Transform 7 to ubuntu
Support:
- Windows 7 All versions
- X86(32Bit) and X64(64Bit) Windows Support
- Best Work in X86(32Bit)
- All Language Versions
Programs:
Reshacker 3.5.2.84 by Angus Johnson
[link]
Universal Theme Patcher 1.5.0.22 by deepxw
[link]
Moveex 1.0.1 by Frank P.Westlake
[link]
JPGtoBMP 1.0 by efg’s Computer Labs
[link]
Yodm3D 1.3 by Christian Salmon
[link]
SmartFlip 0.7 by Lup Gratian
Theme By dpcdpc11
[link]

下载链接：http://www.deviantart.com/download/200634192/ubuntu_skin_pack_3_0_for_seven_by_hameddanger-d3bgac0.zip

]]> http://www.shtion.com/5770.html/feed 0 对Web开发人员有用的8个网站 http://www.shtion.com/5762.html http://www.shtion.com/5762.html#comments Fri, 22 Apr 2011 17:27:10 +0000 shtion http://www.shtion.com/?p=5762 本文是由比利时的Web开发人员Jean-Baptiste Jung分享的，Jung还在《Web开发/设计人员应当知道的15个网站》这篇文章中推荐了15个相关网站。

1. Min.us: 上传图片的最简单方式

任何开发人员、设计师、网络管理员都必须跟客户和同事在线分享图片。Min.us的全部服务就是让你极度简单地上传图片：只需把图片拖拽到Min.us的网页里，图片就会保存在服务器上。并且自动生成短网址，这样你就可以通过这个网站分享图片了。

访问 Min.us

2. Wirify: 把任何网页转换成线框图

设计网站时线框图非常有用。Wirify是一个可以把任何网页立刻转换成线框图的书签工具，这样你就可以学习或应用到自己的工作中。

访问 Wirify

3. CSS Resetr: 查看和比较CSS resets

CSS resets是所有样式表的必需品，以在不同的浏览器之间渲染。2004年以来，已经发布了许多不同的CSS resets。那么，哪个才是最适合你的项目的呢？CSS Resetr可以让你比较最流行的resets对同一个网页的渲染效果。

访问 CSS Resetr

4. Head JS: 用2.30 kb的Javascript代码来提速你的网站

Head JS是一段简单、轻量的脚本代码，通过像加载图片一样加载其他脚本，让你的网站更快。Head JS能做许多工作使你的网站变得现代化：支持CSS3、动态CSS等等。

访问 Head js

5. Copy Paste Character: 轻松使用特殊字符

特殊字符处理起来很麻烦，因为键盘上没有，而且你不知道对应的ASCII码。当然，你可以找一份ASCII码表放在桌面上，或者使用一个叫做Copy Paste Character的服务：只需点击所选字符，就可以复制到你的剪贴板。

访问 Copy Paste Character

6. DB Designr: 在线生成数据库模式

这是一个非常棒的简单在线生成数据库模式的工具。无需创建账户，你可以用你的Google账户登入。（我觉得我们伯乐在线网站的读者都有Google账户！说不定你就是通过Google阅读器在阅读此文。）

访问 DB Designr （墙）

7. Web 2 pdf convert: 把转换任意网页为PDF

Web2PDF Converter是一个很有用的工具，能把转换任意网页为PDF文件。非常好用：我已经转换了5个页面，所有地方都跟html上的版本完全一样。

访问 web 2 pdf convert

8. ScriptSrc：轻轻松松地把html页面连接到JS库中

你是否已经厌倦了在网上寻觅最新的Javascript库标签？ScriptSrc.net收录了jQuery、 Mootools、 Prototype等所有最新的标签，只需单击就可以把它复制到你的浏览器剪贴板。

访问 ScriptSrc

后话

如果你还知道其他设计相关的优秀网站，请在评论或微博中和大家一起分享。

译文出处：伯乐在线

]]> http://www.shtion.com/5762.html/feed 0 Android设计趋势分析 http://www.shtion.com/5698.html http://www.shtion.com/5698.html#comments Tue, 19 Apr 2011 13:09:40 +0000 shtion http://www.shtion.com/?p=5698 Android作为Google最重要的资本之一，尽管在智能终端上的起步较Apple晚不少，然而面对强有力的竞争对手，从不停追赶到部分超越，已为其未来战略目标做好了充分铺垫。

迄今，全球已有超过100款Android产品。聚焦未来，本文将给出个人总结梳理的 10 则设计趋势分析，欢迎交流与探讨。

1. 强化与规范Android品牌形象

因竞争对手强大，行业变化迅猛，Google一直将时间看作其终端战略中关键的要素。相对而言，现阶段才逐步开始进行部分完善性工作，包括各类统一与规范性。

因此，不难理解Google在新系统界面设计上所进行的设计变动了，总体原则会与机器人品牌形象建立紧密关联性（Android 英文原意为机器人）。选用标准色作为系统形象识别色，包括系统默认应用程序的图标，趋向纯粹与棱角化。

细节案例：Google 在Android上亦会逐步建立与完善其品牌指南（BrandGuidelines），供第三方遵循，以在全球范围内强化品牌形象的统一性。

官方目前给出的两个形象色参数: pms 376c （ 标准印刷色卡），Online hex ＃A4C639 （ 屏显16进制色值）

2. 个性化用户体验、细分操控场景

在Google理念中，个性化是极为重要的。用户有权对终端进行更多的个性化管理与控制，同时Google会满足用户的各种技术欲与操控欲。这一理念和Google特立独行的创始人也有着紧密的关系，Google 会继续在Android平台强化该思路。

细节案例：新系统桌面，无需打开第三方APP，通过Menu键可快速进入程序管理界面，方便管理［已下载应用］、［SD卡存储应用］、等4个细分场景。新增的下载管理器适用于依据用户个性化需求，对下载项目进行集中浏览与管理的场景。

另包括3D镜头与前置镜头控制的快速切换、主屏小页卡预览等细节……

3. 更为灵敏与细腻的信息反馈

细节案例：Google新系统对虚拟键盘进行了重新设计。新键盘会进行灵敏的自动纠错，新系统的文字选取与编辑采用了两个一组的小控件设计，分别控制选中内容的起止。

另一个小细节，新系统在文字输入场景下，强化了插入符（Caret / I beam）的交互体验，将［当前输入焦点］的暗示变得更为清晰，适用于小屏上的设计微创新，让用户一目了然，减少视觉压力。 插入符在停留4秒后会自动弱化成普通的样式，此时用户已明确当前输入焦点的所在位置。

4. 更为专注与沉浸式的用户体验

排除其它因素的干扰，让用户能够更专注地完成主要任务和进行关键体验，也是Google正致力完善的一条。

细节案例： Andorid 两个新系统暗调式设计更为彻底。包括所有底部浮出菜单，顶部（3.0为底部）任务栏，使用户体验更为专注（更深层原因请参看第7条）。各类提示小图标也更 为纯粹清晰，一目了然。在部分全屏体验应用程序中，（如观看视频），菜单栏不再是永久性存在的，用户可选择“熄灯”模式来隐藏它。

5. 承载更多任务的语音交互系统

Google的语音交互系统，将会承载更多的任务及执行（Voice Actions），诸如关机、锁屏、拨号、打开应用程序、输入文字、卫星定位导航、语音搜索等。在信息反馈方面亦会增加语音交互模式，随着终端的智能化及 语音识别技术的日趋完善，语音交互系统将会是重要趋势之一。

2.3系统中，长按搜索键则激活语音输入模式，在3.0系统中，语音输入被设计在非常醒目的左上角，与搜索按钮并重。Google在自己的“嫡系”智能终端里均预埋了强大的语音输入输出装置，采用Pico TTS引擎，并给出相关官方范例。

6. 更关注用户安全与隐私保护

用户安全与隐私的保护始终是互联网企业的重要司职，有Facebook的前车之鉴，Google在未来产品的研发与设计中，给予了很大的重视。

Google企业移动业务的Mayur Kamat在官方blog中表示，Google将退出面向企业和教育版，使Android系统更适合企业、政府及教育机构使用。而这类用户对安全性会更为 注重。通过Google Apps Device Policy应用，Android用户将可以远程登录设备并进行定位。而在新的3.0系统，主人将可对数据进行加密。

细节案例：图案解锁开机是Google的一项特色，然而旧系统存在一些小安全问题，主人解锁时的轨迹线非常显眼，周边人群很容易识破图案密码。在新系统的图案解锁设计中，隐藏了解锁轨迹，而只有输入错误时，才出现错误轨迹，以便识别。

7. 更纯粹的 Google 式体验

即快速，简洁，生动。这三条对Google来说至关重要，一直被奉为其用户体验圣经，会在Android上不断贯彻施行。

CEO Page追求速度和性能，对装饰性的过渡与动画极为反感。Google 手机浏览器、地图等直系APP会快得飞起来。上文第4条提到的整体暗色调的设计也部分因为在OLED屏上，深色更节能省电，性能更优。

新系统界面总体上趋向简洁与精致，采用线条与块面的融合交错来搭建系统，在3.0蜂巢的系统中表现尤为明显。
关于生动，因Google设计理念中带有部分后现代主义（Postmodernism）成分，强调异质性、特殊性和唯一性，反对千篇一律的乏味设计。

细节案例：细节点上的情趣化设计，利用光元素模拟表现操作触碰遇阻及反弹。关机锁屏动画的消隐方式也更为生动有趣。

8. 精简与整合，NFC引领生活革命

Google在NFC（Near Field Communication缩写，即近距离无线通讯技术）上的持续发力意味着什么？

抛弃你的钥匙、钱包、各类卡、证件、遥控器……让NFC精简这一切。只需带上一台轻薄的终端，它可摇身变为交通卡、银行卡、门禁卡、以及进行身份识别等等。未来几年，内置NFC芯片将成为终端标配，电视、打印机等设备只需轻松下载一个APP即可操控。

9. 本地化设计，注重不同地域的文化差异

Google会不断突破语言障碍，更好的支持中文，及其它世界语言。

Marissa Mayer公布的数据显示：通过移动设备访问Google Maps服务的用户已达1.5亿。而在将来，依据全球卫星定位系统，不仅只是匹配地理位置和天气，并可判断用户所在区域的文化属性，指向对应服务库，并自动匹配和推送该区域的文化服务。

10. 各产品体验中整合社会化网络

让产品更加以人为本被认作是Google的职责，因而Google正不断为用户提供新的方式，以进行分享互动，及相互影响。

部分案例：Latitude（纵横），Yelp类型点评类服务，新发布的搜索结果＋1，Check-in和商家点评等。来自Google 员工的消息称，Page 已知会员工，2011年员工红利的25％起伏取决于社交服务产品的整合成果。

参考文献：
Google Android 3.0 Platform Highlights
Google Android User Interface Guidelines
Google Android 2.3 User’s Guide
Google User Experience Design Principles
www.google.com/nexus/

本文来源于：http://cdc.tencent.com/?p=3771

]]> http://www.shtion.com/5698.html/feed 0 如何在Mac OS X下配置Android开发环境[入门] http://www.shtion.com/5681.html http://www.shtion.com/5681.html#comments Tue, 19 Apr 2011 05:47:51 +0000 shtion http://www.shtion.com/?p=5681 如何在Mac OS X下配置Android开发环境呢？其实你可以在各个操作系统下开发Android应用程序，开发Android程序是件很容易的事情，不管在什么操作系统之上。不过如果你跟笔者一样，身处一个只有Mac OS X可以用的地方，也许会需要一些迅速上手的指引。笔者在安装的时候截的图， 高手请略过，任何使用过Android SDK的和Eclipse的都请轻松无视本篇。

详细的教程如下：

  • 下载安装Android SDK

    • 1.1 下载： Android SDK Starter Package, 下Mac OS X版的就行，

    1.2 安装：

    1.2.1 解压，找到 ../android-sdk-mac-x86/tools/android 然后点击！

    1.2.2 在Available Packages里选几个你需要的android版本，当然samples也可以选一些，

    下载如果需要配置代理的话，可以在settings里设置。

    后面一路点install就行啦，会自动从服务器下载的。我大概用了5分钟不到。

    其实，我个人建议把google的那些addon也一起装了算了。(当然，挑需要的装，没必要全选了。)

    1.2.3 安装Android Virtual Device (AVD): 点左边一列标签的最上面一个，然后如图

    这货就是一个Android模拟器，相当于一个虚拟的手机。不过有些功能还没有做得很全。

    至此，Android SDK就算安装完了。下面只需要装个Eclipse。

  • 安装配置Eclipse

    • 虽然IBM这个名字起得是众所周知的损，就连SUN是不是被这招阴掉的也未可知啊，（你还能再迷信点么？），这个IDE还真不是一般的强大，刚出来 的时候架构就让人“眼前一暗”（Eclipse么…当然是暗了）！ 不过，不用IDE也可以开发，这里我们先按下不表。（被你按下去的就再也翻不了身了吧根据以前的纪录？

    2.1 下载Eclipse, 不确定想装啥的话，选那个classic就行了。之后就正常打开使用即可。

    2.2 给Eclipse安装ADT Plugin for Eclipse插件，方法有很多种，前面那个链接里有详述。推荐用最简单的，在Eclipse里安装：

    工具栏上得Help –> Install New Software … 在下图里随便取个名字，比如android吧，输入

    https://dl-ssl.google.com/android/eclipse/

    后面都选上就行了，我觉得都会用得上。

    2.3 配置Eclipse中Android SDK的位置。

    有些童鞋说这一步是自动配好的，不用管，但我这里还是要手动加一下的。

    具体方法是打开Eclipse，在工具栏上找 Eclipse –> Preferences，参考下面的图，把android sdk的目录加进去。

    于是这样，Eclipse就配置好了！

  • 创建第一个Android Project

    • 3.1 File –> New –> Android project

    好吧，不知道为什么这里还蛋疼地截了个屏：

    3.2 给project和package随便取些名字，并在Build Target里选个SDK版本什么的：

    3.3  配置一下编译运行环境。点Eclipse里的Run –> Run as … 双击Android application，然后new application，

    在target里选上刚才创建的那个模拟android手机： Android Virtual Device

    3.4 Run!

    来看两张效果图，空白的app就是这样啦，一个hello, world!

    本文来自：没错吧

    ]]>     http://www.shtion.com/5681.html/feed 0     Andriod UI设计：相对布局 http://www.shtion.com/5664.html http://www.shtion.com/5664.html#comments Mon, 18 Apr 2011 15:02:31 +0000 shtion http://www.shtion.com/?p=5664 理解布局对于良好的Android程序设计非常重要。在这个教程里，你将学到相对布局的所有知识，相对布局用于将用户界面控件或小工具相对于其它控 件或它们的父级布局组织在屏幕上。当使用正确的时候，相对布局可以是很强大和灵活布局，很多有趣的Android程序用户界面都可以基于它来设计。

    什么是相对布局

    除了将控件显示在一行或一列的线性布局，相对布局也是Android用户界面设计使用得很普遍的布局类型。和其它布局很相似，相对布局可以通过XML布局资源来定义也可以用Java程序来定义。相对布局的功能就像它的名字表达的一样：它相对其它控件或父控件本身来组织控件。
    这是什么意思呢？意思是子控件，比如ImageView，TextView，和Button控件，可以放在另外一个控件的上面，下面，或是左边或者右边。子控件可以相对于父控件（相对布局容器）放置，包括放置在布局的顶部，底部，左部或右部边缘。
    相对布局子控件位置使用规则来定义。这些规则定义了相对布局内的控件如何显示。相对布局的完整规则列表请参见RelativeLayout类的Android SDK文档。相关的用于XML资源的XML属性也可以在文档中找到。
    注意：规则要求每个子控件恰当地设置了它的id属性。

    一个简单的相对布局

    相对布局最好使用例子来解释。假设我们要设计一个屏幕，包含一个EditText控件和一个Button控件。我们希望Button显示在 EditText控件的右边。因此，我们可以定义一个包含两个子控件的相对布局：子控件分别是EditText和Button。EditText控件可能 有一个规则说：将这个控件放置在父控件（布局）的左手边并且在第二个控件（Button）的左边。同时，Button控件可能有一个规则：将这个控件放置 在父控件（布局）的右手边。
    下面的图片就展示了这样一个相对布局，分别是竖屏和横屏模式。这个相对布局有两个子控件：一个EditText控件和一个Button控件。


    定义带有相对布局的XML资源文件

    设计程序用户界面最方便和可维护的方法是创建XML布局资源。这个方法极大地简化了UI设计过程，将很多静态创建和用户界面控件的布局以及控件属性的定义移到XML中去，取代了写代码。
    XML布局资源必须存储在/res/layout项目目录下。让我们看看前一节介绍的相对布局。这个布局资源文件，恰当地命名为/res/layout/relative.xml，在XML中如下定义：

    <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="fill_parent"
 android:layout_width="fill_parent">
 <EditText
 android:id="@+id/EditText01"
 android:hint="Enter some text..."
 android:layout_alignParentLeft="true"
 android:layout_width="fill_parent"
 android:layout_toLeftOf="@+id/Button01"
 android:layout_height="wrap_content"></EditText>
 <Button
 android:id="@+id/Button01"
 android:text="Press Here!"
 android:layout_width="wrap_content"
 android:layout_alignParentRight="true"
 android:layout_height="wrap_content"></Button>
 </RelativeLayout>

    回忆一下，在Activity中，只需要在onCreate()方法中添加一行代码来在屏幕上加载和显示布局资源。如果布局资源存放在/res/layout/relative.xml文件中，这行代码应该是：

    setContentView(R.layout.relative);

    这个相对布局设置了宽和高填充整个屏幕，并且它的子控件配置了三个规则：

    • EditText01：对齐到布局的左手边
    • EditText01：显示在Button01的左边
    • Button01：对齐到布局的右手边

    用程序定义相对布局

    你也可以用程序创建和配置相对布局。这通过使用RelativeLayout类（android.widget.Relative）来实现。你会在 RelativeLayout.LayoutParams类中找到具体的参数。同样地，典型的布局参数 （android.view.ViewGroup.LayoutParams），比如layout_height和layout_width，以及边距参 数（ViewGroup.MarginLayoutParams），也能用在RelativeLayout对象上。
    你必须用Java创建屏幕内容，然后向setContentView()方法提供一个包含所有要作为子视图显示的控件内容的父布局对象，而不是像前面所示 直接使用setContentView()方法来加载布局资源。在这里，你的父布局就是相对布局。例如，下面的代码示例了如何用程序在活动中实例化一个 RelativeLayout并且在它的onCreate()方法中向它添加一个TextView和一个Button控件，就像前面一节展示的布局一样：

    public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 // setContentView(R.layout.relative);

EditText ed = new EditText(this);
 RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,
 LayoutParams.WRAP_CONTENT);
 params.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
 // use same id as defined when adding the button
 params.addRule(RelativeLayout.LEFT_OF, 1001);
 ed.setLayoutParams(params);
 ed.setHint("Enter some text....");

Button but1 = new Button(this);
 RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
 LayoutParams.WRAP_CONTENT);
 params2.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
 but1.setLayoutParams(params2);
 but1.setText("Press Here!");
 // give the button an id that we know
 but1.setId(1001);
 RelativeLayout layout1 = new RelativeLayout(this);
 layout1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
 layout1.addView(ed);
 layout1.addView(but1);
 setContentView(layout1);
 }

    让我们仔细看一下上面的Java代码。首先我们像平常一样创建一个EditText控件。我们给它一些RelativeLayout参数，然后设置它的规则。在这里，我们为EditText控件创建2个规则。
    接下来，我们创建一个Button控件并且设置它的规则（对齐到父布局右边缘）。最后，我们创建一个RelativeLayout对象，设置它的参数，使用addView()方法添加两个控件并且使用setContentView()方法加载显示相对布局。
    如你所见，当越来越多的控件要添加到屏幕时，代码量会很快地增长。为了易组织和可维护性，用程序定义并使用布局最好是用在特殊情况而不是一般情况。

    探讨相对布局的重要特性和属性

    现在让我们来讨论一些帮助配置相对布局和它的子控件的属性。一些特定的属性用于相对布局，也就是子规则，包括：

    • 用于子控件在父布局中居中的规则，包括：水平居中，垂直居中，或者两者皆居中。
    • 用于子控件在父布局中排布的规则，包括：在顶部，底部，左，右边缘放置。
    • 用于子控件相对于其它子控件排布的规则，包括：在另一个控件顶，底，左，右边缘放置。
    • 用于子控件相对于其它子控件放置的规则，包括：在另一个控件上面，底下，左边或右边放置。

    同样的，通用的 ViewGroup-style属性也可以应用于相对布局。这些属性包括：

    • 通用布局参数比如layout_height（必须）和layout_width（必须）（类：ViewGroup.LayoutParams）
    • 边距布局参数比如margin_top, margin_left, margin_right和margin_bottom (类：ViewGroup. MarginLayoutParams)
    • 布局参数比如layout_height和layout_width (类：ViewGroup.LayoutParams)

    现在让我们来实践这些规则吧！

    使用布局规则

    让我们看一个更复杂的屏幕设计。为了这个练习，我们从查看最终屏幕效果开始，然后再倒回来工作，并讨论这个相对布局的特性和为了达到最终结果所使用的规则。

    我们希望设计一个如下所示的屏幕：

    为了使用相对布局来设计这个屏幕，参考以下步骤。

    步骤1：在你的XML资源文件中定义一个相对布局

    首先，在你的XML资源文件中定义一个相对布局。因为你想这个布局控制整个屏幕的内容，所以设置它的高和宽属性为fill_parent。你的XML资源文件应该看起来像这样：

    <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="fill_parent"
 android:layout_width="fill_parent">

</RelativeLayout>

    步骤2：确定子控件

    接下来，我们确定需要什么样的子控件。在这里，我们需要7个TextView控件（第个一种颜色）。像平常一样配置它们，设置文本属性为字符串，背景色，字号等等。将这些控件都放到相对布局中。

    步骤3：定义相对布局规则

    接下来，我们为每个子控件定义规则，以使它们被绘制到合适的位置：

    • RED TextView控件没有特别的设置。默认地，这个控件将会被绘制到父布局的左上角。
    • ORANGE TextView控件在父布局中水平居中。因为所有控件默认都会靠向屏幕的左上角，这有效地将控件定位到父布局的边缘顶部中间。
    • YELLOW TextView控件定位到父布局的右边缘。因为所有控件默认都会靠向屏幕的左上角，这有效的定位控件到父布局的右上角。
    • GREEN TextView控件在父布局中垂直居中，并且设置为显示在BLUE TextView控件的左边。
    • BLUE TextView控件被定位在父控件的中心（水平和垂直）。这将它显示在屏幕的中心位置。
    • INDIGO TextView控件在父局中垂直居中，并且设置为显示在BLUE TextView控件的右边。
    • VIOLET TextView控件被定位到父布局的底部边缘。它的宽度也被设置为填满父容器，允许它延伸到屏幕的底部边缘。

    如果你在你的XML资源文件中定义这些规则，XML文件代码将看起如下：

    <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="fill_parent"
 android:layout_width="fill_parent">

<TextView
 android:text="RED"
 android:id="@+id/TextView01"
 android:layout_height="wrap_content"
 android:background="#f00"
 android:gravity="center"
 android:textColor="#000"
 android:layout_width="wrap_content"
 android:padding="25dp"></TextView>

<TextView
 android:text="ORANGE"
 android:layout_height="wrap_content"
 android:background="#ffa500"
 android:gravity="center"
 android:textColor="#000"
 android:id="@+id/TextView02"
 android:layout_width="wrap_content"
 android:layout_centerHorizontal="true"
 android:padding="25dp"></TextView>

<TextView
 android:text="YELLOW"
 android:layout_height="wrap_content"
 android:background="#ffff00"
 android:gravity="center"
 android:textColor="#000"
 android:id="@+id/TextView03"
 android:layout_width="wrap_content"
 android:layout_alignParentRight="true"
 android:padding="25dp"></TextView>

<TextView
 android:text="GREEN"
 android:layout_height="wrap_content"
 android:background="#0f0"
 android:gravity="center"
 android:textColor="#000"
 android:id="@+id/TextView04"
 android:layout_width="wrap_content"
 android:layout_toLeftOf="@+id/TextView05"
 android:padding="25dp"
 android:layout_centerVertical="true"></TextView>

<TextView
 android:text="BLUE"
 android:layout_height="wrap_content"
 android:background="#00f"
 android:gravity="center"
 android:textColor="#fff"
 android:id="@+id/TextView05"
 android:layout_width="wrap_content"
 android:layout_centerInParent="true"
 android:layout_margin="10dp"
 android:padding="25dp"></TextView>

<TextView
 android:text="INDIGO"
 android:layout_height="wrap_content"
 android:gravity="center"
 android:textColor="#fff"
 android:id="@+id/TextView06"
 android:layout_width="wrap_content"
 android:layout_toRightOf="@+id/TextView05"
 android:background="#4b0082"
 android:padding="25dp"
 android:layout_centerVertical="true"></TextView>

<TextView
 android:text="VIOLET"
 android:layout_height="wrap_content"
 android:background="#ee82ee"
 android:gravity="center"
 android:textColor="#000"
 android:id="@+id/TextView07"
 android:layout_alignParentBottom="true"
 android:layout_width="fill_parent"
 android:padding="25dp"></TextView>

</RelativeLayout>

     

    相对布局使用技巧

    这里是一些使用相对布局的技巧。

    • 相对布局的子控件必须有唯一的id属性以使规则正确应用。
    • 当心循环规则。循环规则发生在两个控件具有互相指向的规则时。如果你在布局设计中使用了循环规则，你将会得到以下错误信息：

    IllegalStateException: Circular dependencies cannot exist in a RelativeLayout（相对布局中不允许存在循环依赖）

    • 回忆一下相对布局规则的应用被一次处理是很有用的
    • 保持你的相对布局规则最小化。这减小了循环规则的机率并且使得你的布局更加可维护和灵活。
    • 一般地，记住测试一下你的布局设计在横屏和竖屏模式下，以及在不同的屏幕大小和解决方案下是不是符合预期的。
    • 使用相对布局代替嵌套线性布局以改进程序性能和响应能力。

    总结

    Android程序用户界面使用布局来定义，相对布局是用于使得程序屏幕更加灵活和强大的布局类型之一。相对布局允许子控件相对于其它子控件和相对 于父控件（边缘以及水平和垂直居中）来组织。一旦你掌握了如何使用相对布局的规则，它们可以有非常多的用处，使你能够创建复杂布局，而不需要过多嵌套不同 的布局，因此也改进了性能。[English]

    转载请注明：
    作者：RockUX–WEB前端

    ]]>     http://www.shtion.com/5664.html/feed 0     [WebOS 3.0泄密展示]WebOS 3.0新功能，WebOS 3.0新界面（三） http://www.shtion.com/5589.html http://www.shtion.com/5589.html#comments Thu, 14 Apr 2011 18:34:51 +0000 shtion http://www.shtion.com/?p=5589 在[WebOS 3.0泄密展示]WebOS 3.0新功能，WebOS 3.0新界面（一）1天之内的文章 和[WebOS 3.0泄密展示]WebOS 3.0新功能，WebOS 3.0新界面（二）1天之内的文章这两篇文章中，我们向大家展示了最新版的WebOS 3.0众多新功能和新界面。如 Launcher 页面、虚拟键盘、通知系统等；然后又概览了自带的部分应用，如浏览器、日历、联系人、邮件、展示模式、地图等功能。本文继续展示 webOS 3.0 的海量截图。着重介绍包括备忘录、短信息、音乐，视频，图片，office等系统的其他方方面面细枝。

    • Palm webOS是一个嵌入式操作系统，以Linux内核为主体并加上部份Palm公司开发的专有软件。它主要是 为Palm 智能手机而开发。该平台于2009年1月8日的拉斯维加斯国际消费电子展宣布给公众，并于2009年6月6日发布。该平台是事实上的PalmOS继任 者，webOS将在线社交网络和Web 2.0一体化作为重点。第一款搭载webOS系统的智能手机是Palm Pre，于2009年6月6日发售。由于Palm被HP（惠普）收购,webOS现收归HP旗下，HP已发布多款手机及一款平板电脑。

    备忘录

    Memo 的整体界面和之前并没有太多改变，像是直接把手机上的 webOS 拉伸到平板的分辨率和比例。只是舍弃了软木板和图钉的背景，取而代之的是浅灰色的织物质感的背景。

    此外以前长按某一个记事贴然后移动的处理方式也有所改变，点击 Memos 的顶部栏右上方的编辑按钮，可以移动或删除某一个或者全部的记事贴。

    Messaging

    消息界面跟 webOS 2.0 也没有太大不同，只是由原来的一栏改为了两栏式。不过右侧的聊天界面可以切换成全屏。当你切换到其他软件时，消息提示首先以预览的形式出现在顶部的状态栏，然后缩小成一个图标。这一点在第一部分的通知系统中已有提及。

    Music

    音乐界面有点类似于电脑上的音乐播放器，上方以两栏的形式呈现音乐查看方式及对应的歌曲，下方是播放控制栏。因为模拟器只支持 wav 格式的文件，所以虽然能识别出来歌曲名称，演唱者及专辑却都无法显示。

    音乐界面的截图，位于下方播放控制栏中的全屏按钮不知是什么用途。这次在模拟器上点击全屏按钮后，发现进入的是一个类似于 Cover Flow 的视图，有意思的是模拟器中装载的 wav 格式歌曲虽然无法识别专辑信息，但都默认显示 Pink Floyd 的经典专辑月之暗面的封面。

    如我们在系统通知部分所提到的，音乐的通知系统也做得相当便捷，点击菜单栏中通知下拉菜单，会弹出一个小的播放控制面板。此外音乐界面应该还在开发 之中，因此现在还有些不太细腻的地方，比如专辑封面之间没有适当的间隙，Cover Flow 也没有常见的 3D 效果。相信正式版推出时还会有一些改变。

    图片和视频

    在 webOS 3.0 中照片和视频集成在了一起，在横屏模式下同样采用了两栏界面。在这里不仅可以查看本机的图片和视频，同样可以查看 Facebook 的图片。

    点击任一个专辑之后，会显示这个专辑内的图片，右上方的两个按钮分别为幻灯片播放和编辑功能。

    进入编辑模式后，选择某一张或几张图片，下方有分享、移动、打印以及删除选项。

    而点击打开某一张图片后，可以看到右上方除了之前的几个选项之外，还有与 Facebook 双向同步的评论。

    Quickoffice

    考虑到商务应用，文档的阅读和处理就很重要了。QuickOffice 曾承诺将会在 webOS 3.0 中提供文档的阅读和编辑功能。所以在模拟器中我们可以看到 QuickOffice 的身影。从软件界面中可以看出，QuickOffice 不仅可以查阅本机的文档，而且还支持 Google Docs、Dropbox 等诸多云存储平台。

    不过虽然在模拟器中 QuickOffice 可以打开并识别本机的文档，却无法打开任何测试的文档（PDF、DOC 和 XLS 文档），云存储平台也无法登陆。

    也许这是因为 beta 版模拟器中的第三方软件不是全功能版本，毕竟模拟器是用来帮助开发者开发其他应用的，而不是用来浏览编辑文档的。在当初的发布会上，我们曾看到 QuickOffice 的应用展示，希望在夏天 TouchPad 发布时能够有真正全功能的 QuickOffice。

    系统配置

    虽然很多系统参数都有单独的设置程序，webOS 3.0 还是提供了与 iOS 非常相似的设置程序，在这里可以一站式的完成几乎所有系统相关的设置。不过从截图上看目前还有些粗糙，在正式版发售前还有很多优化工作要做。

    其他

    除了上述的程序，在模拟器中其实还有很多程序处在开发进程中。比如拨号界面以及 Task 程序都只是简单的拉伸了一下尺寸；此外，模拟器中没有计算器，PreCentral 在测试时也没有找到如何使用复制粘贴。

    而另外一些软件也不是全功能版本，Adobe Reader 和 QuickOffice 一样的状态。因为模拟器没有 Palm 帐户，因此也无法访问 App Catalog。另有一个叫做“Communication”的奇怪的程序，打开之后是原来的 webOS 邮件程序。

    Software Manager 也有两个不同的版本，一个看上去是针对平板电脑优化过的，另一个则是老的 webOS 2.0 中的版本。

    WebOS Quick Install 可以识别模拟器并安装程序，如上图所示，Internalz 和 Preware 都可以安装并打开。

    从这三篇 webOS 3.0

     

    的海量截图中可以看出，目前这个版本的 webOS 3.0 仍处于开发之中，很多程序及细节仍有待完善，但是 webOS 原有的云平台协同、多任务处理、免打扰通知系统依然出色。这些细节都让我很动心，如果六月份 TouchPad 能够顺利上市，我们相信如今归属在惠普旗下的 Palm webOS 会有出色的表现。

    本文经实时信息（shtion.com）重新编译，中文来源于ifanr，英文来源于：PreCentral

    ]]>     http://www.shtion.com/5589.html/feed 2     [WebOS 3.0泄密展示]WebOS 3.0新功能，WebOS 3.0新界面（二） http://www.shtion.com/5518.html http://www.shtion.com/5518.html#comments Thu, 14 Apr 2011 07:12:03 +0000 shtion http://www.shtion.com/?p=5518 在[WebOS 3.0泄密展示]WebOS 3.0新功能，WebOS 3.0新界面（一）1天之内的文章 一文中，我们向大家展示了最新版的WebOS 3.0（当然也是泄露版）的部分新功能，新界面。本文继续展示 webOS 3.0 的海量截图。着重介绍包括浏览器，日历，联系人，邮件，展示模式，地图等功能。

    本文将作为另外一部分来展示WebOS 3.0的其他功能，违反与惠普（HP）签订的保密协议的人，继续将 webOS 3.0 SDK 发给了 PreCentral，这下我们都可以更全面的了解 webOS 3.0。作为竞争对手想了解 webOS 3.0 将有哪些新东西，不需要等到媒体泄密，只需要找个人申请 Early Access Program 就可以了。

    浏览器

    浏览器的名称从“Web”改成了 “Browser”，打开之后会显示一个空白页面。顶部有标准的前进，后退等按钮。右边有一个“分享”按钮，可以把 TouchPad 上正在浏览的网页地址分享给其他设备。

    请注意，导航栏是固定在屏幕上方的。它不会随着页面的滚动而消失，你可以随时点击地址栏来输入新的网址。

    点击右上方的书签按钮之后，弹出一个熟悉的界面。那就是在 Palm Pre 常见的书签和历史链接。所有被关闭的页面和卡片都会显示在这里。

    日历

    一整个月份的行程全部显示出来的感觉真好。webOS 3.0 上的日历可以说是世界上最棒的日历系统，它整洁而干净，集成了 Palm 出色的 PIM 管理手段。

    默认的查看方式是按天查看，顶部用不同的颜色区分出不同的分类。界面上没有出现“上一天”“下一天”的按钮，说明还是得依靠左右滑动的手势来切换工作日和月份。

    点击某条事件，可以编辑它的详细信息，最下边还有两颗巨大的的取消和保存按钮。

    联系人

    这个版本的联系人信息看起来有点空旷，左边三分之一只能显示出人物头像和姓名，右边三分之二显示该联系人的详细信息。如果你需要查找联系人，只好滚动左边的列表了。好在可以把常用的联系人添加成“Favorites”。

    邮件

    TouchPad 的邮件程序是它最有代表性的功能之一，默认被分为三栏显示，通过点击或滑动，可以调整分割比例。

    如果是新建一封邮件的话，会生成一个新的卡片。新卡片自动切换到全屏，方便用户预览整封邮件的内容。

    展示模式

    屏幕的大部分面积变黑，能够有效节省电力。硕大的时钟有多种主题可选——石英钟或电子表。展示模式原本可以展示照片，标语或其他的东西，但这个版本只能显示时钟。

    地图

    webOS 3.0 的地图功能得到了重大的改进。webOS 2.0 的地图在手机上的表现就令人赞赏，而这次在平板上越发显示出它的威力。

    整个地图程序的界面都围绕着搜索框展开，只要输入几个单词就能快速地找到你想要的地方，然后用大头钉标示出来。随即可以展开导航，各个拐弯的节点会列在左边。

    右上角有一个“i”按钮，你可以拖住它，然后把它放置在地图的任意位置，这样就出现了鸟瞰视图，呈现出的是 3D 景观。是不是跟 Android 3.0 的地图很类似呢？

    这一次泄露的图片实在太多，加载可能有些慢。

    本文经实时信息（shtion.com）重新编译，中文来源于ifanr，英文来源于：PreCentral

    ]]>     http://www.shtion.com/5518.html/feed 1     [WebOS 3.0泄密展示]WebOS 3.0新功能，WebOS 3.0新界面（一） http://www.shtion.com/5500.html http://www.shtion.com/5500.html#comments Thu, 14 Apr 2011 06:41:47 +0000 shtion http://www.shtion.com/?p=5500 本文展示的是泄露版WebOS 3.0的新特性，WebOS 3.0 到底怎么样？UI设计是什么样的呢？将在本文以及[WebOS 3.0泄密展示]WebOS 3.0新功能，WebOS 3.0新界面（二）1天之内的文章 中详细为大家介绍。有人违反与惠普（HP）签订的保密协议，将 webOS 3.0 SDK 发给了 PreCentral，本文的源文件就是来自于那里。作为竞争对手想了解 webOS 3.0 将有哪些新东西，不需要等到媒体泄密，只需要找个人申请 Early Access Program 就可以了。让我们暂时放下关于违反保密协议的是与非，来看看 webOS 3.0 是否能让你热血沸腾，是否会让你觉得 iPad 真正的对手来了！

    • Palm webOS是一个嵌入式操作系统，以Linux内核为主体并加上部份Palm公司开发的专有软件。它主要是为Palm 智能手机而开发。该平台于2009年1月8日的拉斯维加斯国际消费电子展宣布给公众，并于2009年6月6日发布。该平台是事实上的PalmOS继任者，webOS将在线社交网络和Web 2.0一体化作为重点。第一款搭载webOS系统的智能手机是Palm Pre，于2009年6月6日发售。由于Palm被HP（惠普）收购,webOS现收归HP旗下，HP已发布多款手机及一款平板电脑。

    很多人都对违反保密协议将仍在研发中的 webOS 3.0 公之于众是对惠普的努力的不尊重。

    通过下面这个视频，可以对 webOS 3.0 有个快速的印象。我们也会通过两三篇文章把 PreCentral 的大量截图一一展示给大家。

    Launcher

    Home 主界面依旧是熟悉而简洁的布局。上方是菜单栏，下方是快速启动栏，只是在菜单栏下多了一个 Just type 的快速搜索框。

    系统菜单依旧位于右上方，并且与时间整合在一起。下拉菜单打开后有常用的一些功能，其中飞行模式、横竖屏切换以及静音开关打开后，会在菜单栏中显示对应的提示图标。

    进入 Launcher 页面会发现和 iOS 不尽相同，更多了一份我们极为亲切的 Palm OS 的感觉。Launcher 页面上方有不同的标签，虽然在模拟器中还无法修改，但是正式推出时应该可以编辑不同的标签页。在“All”标签页中是按照字幕分组的所有程序。

    而在“Favorites”里面则是类似于 iOS 的布局。而与 iOS 不同的是，在这样的页面中程序数量没有限制，而不是只能放一屏的图标。此外 Launcher 页面还新增了编辑功能，可以移动图标或者删除程序。

    Just Type

    Just Type 是 webOS 2.0 之后重点推出的新功能之一，比简单的搜索更进一步，对用户来说将是一个非常方便实用的功能。点击主界面上的 Just Type 搜索框就会进入这个页面，有点类似于 Launcher 页面，包括四个不同的标签页：所有、联系人、内容及动作。

    All 这个标签无需赘言，包括了所有的搜索结果。

    Contacts 这个标签页同样顾名思义，包含了与所搜索关键词相关的联系人。

    Content 标签页中是类似于邮件、浏览器历史、音乐等等与关键词有关的内容搜索结果。

    而在 Action 标签页中，包括了与关键词有关的程序，各种搜索以及 Quick Action 指令。

    虚拟键盘

    虚拟键盘如我们一周前所写的那样，不同于其他平板电脑的四行式虚拟键盘，webOS 3.0 虚拟键盘为 5 行。在字母按键的上方和实体键盘一样有一列数字按键。而且如我们在发布会时就了解到的那样，webOS 3.0 的键盘有 XS、S、M、L 四种不同的大小可供选择。

    键盘左下方空格旁边的“+=[]”键会将键盘切换成字符及图释键盘。此外，长按 b 按键会弹出键盘选项，包括 QWERTY、AZERTY、QWERTZ 键盘选择以及 Prefs 和 Clear 键。对于德语、法语用户来说，这一功能很实用。

    而长按 x 按键同样有些很有意思的选项，分别是：Suggest、XT9 Regs、Regions、Rec 和 Mute。XT9 Regs 和 Regions 两种模式中，键盘会以不同的颜色显示每个键所对应的响应区域，其他几种模式 PreCentral 也没搞明白到底什么用途。

    另一点必须提到的是输入时的预判，webOS 3.0 在 2.0 文字纠错的基础上增加了输入时的文字预判。不管是在什么软件中，在你输入时，系统总是会去判断你可能输入的单词，以蓝色显示你所未输入完成的单词部分。不过这一功能对于我们中文用户来说可能不太重要。

    通知系统

    通知系统一向都是 webOS 的优势所在，3.0 上同样如此。与 2.0 时代通知从下方出现不同，现在的通知系统全部集成在菜单栏右上方，系统菜单左侧。其呈现形式也有改进：有些只显示图标，有些如 Messaging 直接在菜单栏中显示内容预览与图标，而类似于日历项这种则是弹出更为醒目的提示框。

    所有的通知会分组排列，与 2.0 时代另一个不同之处是，3.0 中的通知都是按组排列的。2.0 系统中侧滑便可以忽略通知，而在 3.0 中有两种滑动方式，在通知内容上滑动，只会忽略特定的某一条通知，而在图标上侧滑，会忽略某一组通知。

    我们都知道 iOS 中的通知系统是一个很大的缺陷，大多数用户拿到机器之后先做的事情就是越狱，然后安装 SBSettings Notified，然而即便是这样，仍然没有一个强大的下拉菜单。在 webOS 3.0 的通知系统中还集成了音乐播放快捷控制，不需要像 iOS 中去双击 Home 键。

    本文经实时信息（shtion.com）重新编译，中文来源于ifanr，英文来源于：PreCentral

    ]]>     http://www.shtion.com/5500.html/feed 2     Android 开发简介 http://www.shtion.com/5470.html http://www.shtion.com/5470.html#comments Wed, 13 Apr 2011 16:11:31 +0000 shtion http://www.shtion.com/?p=5470 Android 是一种基于 Linux® V2.6 内核的综合操作环境。最初，Android 的部署目标是移动电话领域，包括智能电话和更廉价的翻盖手机。但是， Android 全面的计算服务和丰富的功能支持完全有能力扩展到移动电话市场以外。Android 也可以用于其他的平台和应用程序。在本文中，阅读对 Android 平台的简介，并学习如何编写基本的 Android 应用程序。

    简介

    黑莓和 iPhone 都提供了受欢迎的、高容量的移动平台，但是却分别针对两个不同的消费群体。黑莓是企业业务用户的不二选择。但是，作为一种消费设备，它在易用性和 “新奇特性” 方面难以和 iPhone 抗衡。Android 则是一个年轻的、有待开发的平台，它有潜力同时涵盖移动电话的两个不同消费群体，甚至可能缩小工作和娱乐之间的差别

    如今，很多基于网络或有网络支持的设备都运行某种 Linux 内核。这是一种可靠的平台：可经济有效地进行部署和提供支持，并且可直接作为面向部署的良好的设计方法。这些设备的 UI 通常是基于 HTML 的，可通过 PC 或 Mac 浏览器查看。但并不是每个设备都需要通过一个常规的计算设备来控制。想象一下传统的家用电器，例如电炉、微波炉或面包机。如果您的家用电器由 Android 控制，并且有一个彩色触摸屏，会怎么样？如果电炉上有一个 Android UI，那么操控者甚至可以烹饪点什么东西。

    在本文中，了解 Android 平台，以及如何将它用于移动和非移动应用程序。安装 Android SDK，并构建一个简单的应用程序。下载 本文中的示例应用程序的源代码。

    Android 简史

    Android 平台是 Open Handset Alliance 的成果，Open Handset Alliance 组织由一群共同致力于构建更好的移动电话的公司组成。这个组织由 Google 领导，包括移动运营商、手持设备制造商、零部件制造商、软件解决方案和平台提供商以及市场营销公司。从软件开发的观点看，Android 正处在开源领域的中心位置。

    市场上第一款支持 Android 的手机是由 HTC 制造并由 T-Mobile 供应的 G1。这款设备从设想到推出花了大约一年的时间，惟一可用的软件开发工具是一些实行增量改进的 SDK 发行版。随着 G1 发行日的临近，Android 团队发布了 SDK V1.0，用于这个新平台的应用程序也浮出水面。

    为了鼓励创新，Google 举办了两届 “Android Developer Challenges”，为优胜的参赛作品提供数百万美金的奖励。G1 问世几个月之后，随后就发布了 Android Market，它使用户可以浏览应用程序，并且可以将应用程序直接下载到他们的手机上。经过大约 18 个月，一个新的移动平台进入公众领域。

    Android 平台

    Android 有丰富的功能，因此很容易与桌面操作系统混淆。Android 是一个分层的环境，构建在 Linux 内核的基础上，它包括丰富的功能。UI 子系统包括：

    • 窗口
    • 视图
    • 用于显示一些常见组件（例如编辑框、列表和下拉列表）的小部件

    Android 包括一个构建在 WebKit 基础上的可嵌入浏览器，iPhone 的 Mobile Safari 浏览器同样也是以 WebKit 为基础。

    Android 提供多种连接选项，包括 WiFi、蓝牙和通过蜂窝（cellular）连接的无线数据传输（例如 GPRS、EDGE 和 3G）。Android 应用程序中一项流行的技术是链接到 Google 地图，以便在应用程序中显示地址。Android 软件栈还提供对基于位置的服务（例如 GPS）和加速计的支持，不过并不是所有的 Android 设备都配备了必需的硬件。另外还有摄像支持。

    过去，移动应用程序努力向桌面应用程序看齐的两个领域分别是图形/媒体和数据存储方法。Android 通过提供对 2D 和 3D 图形的内置支持，包括 OpenGL 库，解决了图形方面的挑战。由于 Android 平台包括流行的开源 SQLite 数据库，因此缓解了数据存储的负担。图 1 显示一个简化的 Android 软件层次结构。
    图 1. Android 软件层次结构

    应用程序架构

    如前所述，Android 运行在 Linux 内核上。Android 应用程序是用 Java 编程语言编写的，它们在一个虚拟机（VM）中运行。需要注意的是，这个 VM 并非您想象中的 JVM，而是 Dalvik Virtual Machine，这是一种开源技术。每个 Android 应用程序都在 Dalvik VM 的一个实例中运行，这个实例驻留在一个由 Linux 内核管理的进程中，如下图所示。
    图 2. Dalvik VM

    Android 应用程序由一个或多个组件组成：

    活动
    具有可视 UI 的应用程序是用活动实现的。当用户从主屏幕或应用程序启动器选择一个应用程序时，就会开始一个动作。
    服务
    服务应该用于任何需要持续较长时间的应用程序，例如网络监视器或更新检查应用程序。
    内容提供程序
    可以将内容提供程序看作数据库服务器。内容提供程序的任务是管理对持久数据的访问，例如 SQLite 数据库。如果应用程序非常简单，那么可能不需要创建内容提供程序。如果要构建一个较大的应用程序，或者构建需要为多个活动或应用程序提供数据的应用程序， 那么可以使用内容提供程序实现数据访问。
    广播接收器
    Android 应用程序可用于处理一个数据元素，或者对一个事件（例如接收文本消息）做出响应。

    Android 应用程序是连同一个 AndroidManifest.xml 文件一起部署到设备的。AndroidManifest.xml 包含必要的配置信息，以便将它适当地安装到设备。它包括必需的类名和应用程序能够处理的事件类型，以及运行应用程序所需的许可。例如，如果应用程序需要访 问网络 — 例如为了下载一个文件 — 那么 manifest 文件中必须显式地列出该许可。很多应用程序可能启用了这个特定的许可。这种声明式安全性有助于减少恶意应用程序损害设备的可能性。

    下一节讨论构建 Android 应用程序所需的开发环境。

    所需的工具

    开始开发 Android 应用程序的最简捷的方式是下载 Android SDK 和 Eclipse IDE（参见 参考资料）。Android 开发可以在 Microsoft® Windows®、Mac OS X 或 Linux 上进行。

    本文假设您使用的是 Eclipse IDE 和用于 Eclipse 的 Android Developer Tools 插件。Android 应用程序是用 Java 语言编写的，但是是在 Dalvik VM（非 Java 虚拟机）中编译和执行的。在 Eclipse 中用 Java 语言编程非常简单；Eclipse 提供一个丰富的 Java 环境，包括上下文敏感帮助和代码提示。Java 代码通过编译后，Android Developer Tools 可确保适当地将它打包，包括 AndroidManifest.xml 文件。

    虽然没有 Eclipse 和 Android Developer Tools 插件也可以开发 Android 应用程序，但是那样就需要熟悉 Android SDK。

    Android SDK 是作为一个 ZIP 文件发布的，可以将该文件解压到硬盘上的一个目录中。由于有多个 SDK 更新，建议有意识地组织开发环境，以便在不同的 SDK 安装之间轻松地切换。SDK 包括：

    android.jar
    Java 归档文件，其中包含构建应用程序所需的所有的 Android SDK 类。
    documention.html 和 docs 目录
    本地和网上提供的 SDK 文档。这些文档的主要形式为 JavaDocs，以便于在 SDK 中导航大量的包。文档还包括一个高级开发指南和 Android 社区的链接。
    Samples 目录
    samples 子目录包含各种应用程序的源代码，包括 ApiDemo，该应用程序演示了很多 API。这个示例应用程序可以作为 Android 应用程序开发的良好起点。
    Tools 目录
    包含所有用于构建 Android 应用程序的命令行工具。最常用、最有用的工具是 adb 实用程序（Android Debug Bridge）。
    usb_driver
    该目录包含将开发环境连接到支持 Android 的设备（例如 G1 或 Android Dev 1 解锁开发手机）所需的驱动程序。只有 Windows 平台的开发人员才需要这些文件。

    Android 应用程序可以在实际的设备上运行，也可以在 Android SDK 附带的 Android Emulator 上运行。图 3 显示 Android Emulator 的主屏幕。
    图 3. Android Emulator

    Android Debug Bridge

    adb 实用程序支持一些可选命令行参数，以提供强大的特性，例如复制文件到设备或从设备复制文件。可以使用 shell 命令行参数连接到手机本身，并发送基本的 shell 命令。图 4 显示在通过 USB 线连接到 Windows 笔记本电脑的一个实际设备上运行的 adb shell 命令。
    图 4. 使用 adb shell 命令

    在这个 shell 环境中，可以：

    • 显示网络配置，网络配置可显示多个网络连接。注意这多个网络连接：
      • lo 是本地或 loopback 连接。
      • tiwlan0 是 WiFi 连接，该连接由本地 DHCP 服务器提供一个地址。
    • 显示 PATH 环境变量的内容。
    • 执行 su 命令，以成为超级用户。
    • 将目录改为 /data/app，其中存放用户应用程序。
    • 列出包含某个应用程序的目录。Android 应用程序文件实际上是归档文件，可通过 WinZip 之类的软件查看。扩展名为 apk。
    • 发出 ping 命令，查看 Google.com 是否可用。

    从相同的命令提示符环境中，还可以与 SQLite 数据库交互，启动程序以及执行许多其他系统级任务。想像一下您正在连接到电话，因此这是非常了不起的功能。

    在下一节，您将创建一个简单的 Android 应用程序。

    编写一个基本的应用程序

    本节展示如何构建一个 Android 应用程序。示例应用程序非常简单：一个修改后的 “Hello Android” 应用程序。您将进行一个微小的修改，使屏幕背景全部变为白色，以便把手机用作手电筒。这个例子不是很有创意，但是可以作为一个有用的例子。请 下载 完整的源代码。

    为了在 Eclipse 中创建应用程序，选择 File > New > Android project，这将启动 New Android Project 向导。
    图 5. New Android project 向导

    接下来，创建一个简单的应用程序，该应用程序有一个活动，并且在 main.xml 中有一个 UI 布局。布局包含一个文本元素，您将修改这个文本元素，以显示 Android FlashLight。下面的清单显示了这个简单的布局。
    清单 1. Flashlight 布局

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/all_white">
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello" android:textColor="@color/all_black"
   android:gravity="center_horizontal"/>
</LinearLayout>

     

    在 strings.xml 中创建两个颜色资源。
    清单 2. strings.xml 中的颜色

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Android FlashLight</string>
    <string name="app_name">FlashLight</string>
    <color name="all_white">#FFFFFF</color>
    <color name="all_black">#000000</color>
</resources>

     

    主屏幕布局有一个定义为 all_white 的背景色。在 strings.xml 文件中，可以看到 all_white 被定义为一个值为 #FFFFFF 的 RGB 三元组，即纯白。

    布局包含一个 TextView，这实际上是一块静态文本。它是不可编辑的。文本被设为黑色，并通过 gravity 属性设为水平居中。

    该应用程序有一个名为 FlashLight.java 的 Java 源文件，如以下清单所示。
    清单 3. Flashlight.java

    package com.msi.flashlight;
import android.app.Activity;
import android.os.Bundle;
public class FlashLight extends Activity {
    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

     

    该代码是直接来自 New Project 向导的模板代码：

    • 它是 Java 包 com.msi.flashlight 的一部分。
    • 它有两个 import：
      • 一个用于 activity 类
      • 一个用于 bundle 类
    • 当该活动发起后，onCreate 方法被调用，传入一个 savedInstanceState。对于我们来说，不必关心这个 bundle。只有在暂停然后恢复活动时才会用到。
    • onCreate 方法覆盖了同名的 activity 类方法。它调用超类的 onCreate 方法。
    • 对 setContentView() 的调用将关联 main.xml 文件中定义的 UI 布局。main.xml 和 strings.xml 中的任何内容都自动映射到 R.java 源文件中定义的常量。任何时候都不要直接编辑这个文件，因为它随着每次构建而改变。

    运行该应用程序可以看到一个白色屏幕，其中有黑色文本。
    图 6. flashlight 的白色屏幕

    下面显示用于 FlashLight 应用程序的 AndroidManifest.xml 文件。
    清单 4. 用于 FlashLight 的 AndroidManifest.xml

    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.msi.flashlight"
      android:versionCode="1"
      android:versionName="1.0.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".FlashLight"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

     

    该文件是由用于 Eclipse 的 Android Developer Tools 插件自动创建的。您不需要做任何事情。

    当然，这个应用程序并不是很强大。但是如果希望读点书，又不想打扰正在睡觉的爱人，或者如果需要在断电时去地下室查看保险丝盒，那么这个应用程序还是很方便的。

    结束语

    在本文中，您阅读了对 Android 的简介，并构建了一个小型的应用程序。希望本文中的例子能激起您进一步探索 Android 平台的兴趣。Android 有望成为对市场产生深远影响的开源平台，它的用处将远远超越移动电话。

    下载

    描述 名字 大小 下载方法
    FlashLight 源代码 os-android-devel-FlashLight.zip 22KB HTTP

    关于下载方法的信息

     

    参考资料

    学习

    获得产品和技术

    讨论

    关于作者

    Frank Ableson 在结束了大学时代的篮球生涯后，由于未能与洛杉矶湖人队签下一份多年合约，他将重心转移到计算机软件设计方面。他喜欢解决复杂的软件问题，特别是通信和硬件交互领域。在业余时间，他喜欢与妻子 Nikki 和他们的孩子在一起。

    本文转载自：IBM

    ]]>     http://www.shtion.com/5470.html/feed 1     Android UI基本测验：线性布局 http://www.shtion.com/5461.html http://www.shtion.com/5461.html#comments Wed, 13 Apr 2011 16:00:16 +0000 shtion http://www.shtion.com/?p=5461 你已经阅读过了如何在Android使用线性布局。用这些包括线性布局控件的渐进测验来测试你的新知识，并且巩固你Java编程和Android用户界面设计与开发的知识。

    准备

    为了准备这个测验，你希望以一个基本的Android程序开始。你只需要在Eclipse中创建一个Android程序然后编辑它的默认活动（Activity），特别是onCreate()方法，就可以测试你为本次测验写的代码了。

    如果你不明白刚才说的怎么做，那我推荐你们先看一看之前的文章。从一些Android教程开始，比如Android开发简介或Android入门: Getting Started with Fortune Crunch。一旦你掌握了如何创建项目，再回来尝试这个练习。

    循序渐进的测验

    这是一个循序渐进地测验。它包含了许多Android开发初学者想要设计和开发程序所必须掌握的技能。通过下面的每一个步骤，难度逐渐增大，你可以巩固你的线性布局和通用的Android用户界面设计的知识。

    步骤0：定义你的字符串

    现在你创建了一个合适的Android项目，你需要创建一些用于你的用户界面的资源。

    创建：

    • 创建7个字符串资源，第一种都使用光谱的颜色（“Red”红，“Orange”橙，“Yellow”黄，“Green”绿，“Blue”蓝，“Indigo”青，“Violet”紫）
    • 创建7个颜色资源，每一种都使用光谱的颜色（Red=>#f00, Orange=>#ffa500, Yellow=>#ffff00, Green=>#0f0, Blue=>#00f, Indigo=>#4b0082, Violet=>#ee82ee）
    • 为文本颜色创建另外两个颜色资源（Black=>#000, White=>#fff）

    被创建字符串或颜色资源难住了？查看这个字符串格式教程.

    测验1：定义你的布局资源

    我们以创建一个新的叫做rainbow.xml的布局资源文件开始。在这个XML文件中，添加一个填充整个屏幕的垂直方向线性布局控件。接下来，添 加7个TextView控件作为线性布局的子控件：每一个控件颜色都是一种光谱色。设置每一个TextView控件的文本为合适的颜色值字符串并且背景色 设为合适的颜色。同时，设置每个控件的layout_width属性为fill_parent，layout_height属性值为 wrap_content。

    如果你正确地完成了这一步，你的布局应该看起来像这样：

    测验2：调整你的布局

    在这一步，你将关注不同的对齐属性，包括用于线性布局的这些属性。

    按以下说明更新rainbow.xml布局资源文件：将TextView控件在屏幕居中，并且每个控件中的文字也居中。提示：这需要设置两个不同的XML属性，一个是线性布局的，另一个是每一个TextView控件的。

    如果你正确地完成了这一步，你的布局看起来应该像这样：

    测验3：修改线性布局子控件

    线性布局非常灵活。如果你修改了父级线性布局中的子控件，布局就会尽可能地调整。

    这里的TextView控件的文本很小并且有些难以阅读。先从修改TextView控件本身开始。按以下说明更新rainbow.xml布局资源：首先，添加一个叫做textsize的尺寸值。在这里我们设置为22dp。

    现在你的布局应该像这样：

    注意线性布局如何灵活地适应更大的TextView控件，但是它们没有充分利用屏幕的空间，黑色带仍然存在。

    高级技巧：你可能想考虑对不同的屏幕大小创建不同尺寸的资源，文本大小22dp看起来不错，而在小屏幕上，文本大小为14dp或16dp可能更合适。要获取更多关于创建备选资源的信息，查看多屏幕支持。

    测验4：有效地使用屏幕空间

    注意到那些没有使用的黑色空间了吗？在这一步，你将关注如何有效地使用整个屏幕。线性布局中的TextView控件被适当的改变大小，但是他们可以微微变大以使用未使用的黑色空间。

    我们希望TextView控件扩展到所有可用的空间，不管屏幕的方向和大小是什么样的。

    要实现这一点，调整线性布局中子控件的layout_weight属性以给每个控件指定的增长边界。当设备在特定方向 时，layout_weight属性的效果更明显：对于垂直线性布局，你将看到weight在设备竖屏模式时最有效，而对于水平线性布局，你将看到 weight在横屏模式时最有效。

    首先，尝试设置权值使得每个TextView彩色带在屏幕占据相同的区域。提示：5个控件设置为0.14和2个控件设置为0.15总和为1.0。

    如果你正确地配置你的控件，你的屏幕应该看起来像这样：

    接下来，尝试设置权值使得每个TextView控件在屏幕上逐渐增大，比如RED带最小而VIOLET带最大。提示：一个不错的分布是：0.08，0.10，0.12，0.14，0.16，0.18，0.22。

    如果你正确地完成了这一步，你的布局应该像这样：

    为了好玩，换到横屏模式并发现一样的布局如下：

    附加测验：用Java程序重新创建步骤4b中使用的布局

    如果你发现前面的测验相当简单，考虑下面附加的测验：用Java程序重新创建你最后的布局资源（每个TextView控件有渐变的权值），代替在布局XML资源里控制。

    你需要在你的活动的onCreate()方法中添加setContentView()调用并创建你的线性布局，就像《Android用户界面设计：线性布局》中讨论的一样。

    这里有一些用程序实现rainbow布局的提示：

    • 以构造每个TextView控件开始。
    • 配置每个TextView控件的布局参数，构造一组LinearLayout.LayoutParams，设置每个控件的layout_width，layout_height和权值。
    • 使用TextView类的setText()方法来加载和显示合适的字符资源。
    • 使用TextView类的setTextSize()方法来配置文本的字体大小。你可以使用getResources().getDimension()来获得标尺资源。
    • 使用TextView类的setTextColor()方法来配置文本的字体颜色。你可以使用getResources().getColor()来加载颜色资源。
    • 使用TextView类的setBackgroundColor()方法来配置控件的背景色。同样，你可以使用getResources().getColor()来加载颜色资源。
    • 使用TextView类的setGravity()方法来配置文本对齐。Gravity类包括了不同的对齐类型的定义。
    • 接下来，构造LinearLayout控件。
    • 使用LinearLayout类的setOrientation()方法来配置布局方向。LinearLayout类包括了两种方向的定义。
    • 使用LinearLayout类的setGravity()方法来配置布局的子控件的对齐。Gravity类包括了不同的对齐类型的定义。
    • 当你用程序设置子控件的权值，你也必须使用LinearLayout类的setWeightSum()方法设置总权值，比如setWeightSum(1.0f)。
    • 别忘了构造一个LayoutParams对象来设置线性布局本身的高和宽。
    • 使用addView()方法将每一个TextView控件添加到你的LinearLayout对象中。
    • 最后，使用setContentView()方法来显示你刚才配置好的LinearLayout。

    你可以在这里下载到源代码。

    总结

    Android用户界面设计师一直在使用线性布局来水平或竖直地有序地显示控件。你可以使用线性布局的对齐属性控制子控件在哪里显示。你可以使用layout_weight属性控制每一个子控件分配的空间。

    本文转载自：RockUX–WEB前端

    ]]>     http://www.shtion.com/5461.html/feed 1     如何开发iphone软件？[精品]iOS人机界面设计指南中文版下载 http://www.shtion.com/5386.html http://www.shtion.com/5386.html#comments Mon, 11 Apr 2011 22:32:08 +0000 shtion http://www.shtion.com/?p=5386 Apple公司为确保发布到App Store的iOS软件都能具有较高的质量，为界面设计师制作了一套完整的界面设计指南（Human Interface Guideline，简称HIG）。

    这份指南全面介绍了iOS操作系统中的控件元素和设计规则，是每个设计师熟悉移动设备界面设计的最佳启蒙读物。Apple官方网站会对该文档持续更新。在iPad发布后，Apple在2010.11.15合并了iPad HIG和iPhone HIG，统称为iOS HIG。本文稿是我在研究生毕业前用了大概两周的时间翻译出来的，现授权火花网发布，算是帮助中国的交互设计师和开发者了解苹果设计规范的小礼物。

    关于iOS的设计，您还可以参见以下这些文章：

    iOS人机界面设计指南中文版 下载地址：点此下载

    ]]>     http://www.shtion.com/5386.html/feed 0     Android用户界面设计：线性布局 http://www.shtion.com/5242.html http://www.shtion.com/5242.html#comments Thu, 07 Apr 2011 13:43:06 +0000 shtion http://www.shtion.com/?p=5242 理解布局对于良好的Android程序设计来说很重要。在这个教程中，你将学习到所有关于线性布局的东西，它在屏幕上垂直地或水平地组织用户界面控件或者小工具。使用得当，线性布局可以作为基本的布局，基于这个布局来可以设计出许多有趣的Android程序用户界面。

    什么是线性布局？

    线性布局是最简单，Android开发者使用得最多的布局类型之一，开发者用它来组织你们的用户界面上的控件。线性布局的作用就像它的名字一样：它 将控件组织在一个垂直或水平的形式。当布局方向设置为垂直时，它里面的所有子控件被组织在同一列中；当布局方向设置为水平时，所有子控件被组织在一行中。

    线性布局可以在XML布局资源文件中定义，也可以用Java代码在程序中动态的定义。

    下图展示了一个包含7个TextView控件的线性布局。这个线性布局方向被设置为垂直，导致每个TextView控件被显示在一列当中。每一个 TextView控件的文本属性都是一个颜色值，背景色就是这个颜色；通过将控件的layout_width属性设置为fill_parent，每个控件 都拉伸到屏幕宽度。

    用XML布局资源定义线性布局

    设计程序用户界面最方便和可维护的方法是创建XML布局资源。这个方法极大地简化了UI设计过程，它将很多静态创建和用户界面控件的布局以及控件属性的定义移到了XML中，而不是写代码。

    XML布局资源必须被存储在项目目录的/res/layout下。让我们看看前一节介绍的彩虹线性布局。这个屏幕基本上就是一个设置为铺满整个屏幕 的垂直线性布局，这通过设置它的layout_width和layout_height属性为fill_parent来实现。适当地将其命名为/res /layout/rainbow.xml，XML定义如下：

     

    <?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent" android:layout_height="fill_parent"

android:orientation="vertical">

<TextView android:text="RED" android:id="@+id/TextView01"

android:layout_height="wrap_content" android:background="#f00"

android:layout_width="fill_parent" android:layout_weight=".14"

android:gravity="center" android:textColor="#000"></TextView>

<TextView android:text="ORANGE" android:id="@+id/TextView02"

android:layout_height="wrap_content" android:layout_width="fill_parent"

android:layout_weight=".15" android:background="#ffa500"

android:gravity="center" android:textColor="#000"></TextView>

<TextView android:text="YELLOW" android:id="@+id/TextView03"

android:layout_height="wrap_content" android:layout_width="fill_parent"

android:layout_weight=".14" android:background="#ffff00"

android:gravity="center" android:textColor="#000"></TextView>

<TextView android:text="GREEN" android:id="@+id/TextView04"

android:layout_height="wrap_content" android:layout_width="fill_parent"

android:layout_weight=".15" android:background="#0f0" android:gravity="center"

android:textColor="#000"></TextView>

<TextView android:text="BLUE" android:id="@+id/TextView05"

android:layout_height="wrap_content" android:layout_width="fill_parent"

android:layout_weight=".14" android:background="#00f" android:gravity="center"

android:textColor="#fff"></TextView>

<TextView android:text="INDIGO" android:id="@+id/TextView06"

android:layout_height="wrap_content" android:layout_width="fill_parent"

android:layout_weight=".14" android:background="#4b0082"

android:gravity="center" android:textColor="#fff"></TextView>

<TextView android:text="VIOLET" android:id="@+id/TextView07"

android:layout_height="wrap_content" android:layout_width="fill_parent"

android:layout_weight=".14" android:background="#ee82ee"

android:gravity="center" android:textColor="#000"></TextView>

</LinearLayout>

    可能你会注意到这个线性布局的每一个子控件都有很多有趣的属性，包括一个叫做layout_weight的属性。一会我们会讲到更多关于它的内容。

    下面两张图片展示了这个布局在设备的竖屏和横屏模式下的样子：

    回忆一下，在Activity中，只需要一行有onCreate()方法的代码来在屏幕上加载和显示一个布局资源。如果这个布局资源被存储在/res/layout/rainbow.xml文件中，这行代码应该是：

    setContentView(R.layout.rainbow);

    用程序动态定义线性布局

    你也可以通过程序来创建和配置线性布局。这通过LinearLayout（android.widget.LinearLayout）类来实现。你 能在LinearLayout.LayoutParams类中找到子级细节。同样地，典型的布局参数 （android.view.ViewGroup.LayoutParams），如layout_height和layout_width, 以及边距参数（ViewGroup.MarginLayoutParams）也能用在LinearLayout对象上。

    使用以前介绍过的setContentView()方法代替直接加载布局资源，你需要用Java创建屏幕内容，然后向 setContentView()方法提供一个父级布局对象，这个对象包括了所有要作为它的子视图展示的控件内容。在这种情况下，你的父级布局对象是线性 布局。

    例如，下面的代码示例了如何用程序在Activity中实例化一个线性布局并在它的onCreate()方法中将三个TextView对象放入其中：

    public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// setContentView(R.layout.rainbow);

TextView tv1 = new TextView(this);

tv1.setText("FIRST");

tv1.setTextSize(100);

tv1.setGravity(Gravity.CENTER);

TextView tv2 = new TextView(this);

tv2.setTextSize(100);

tv2.setGravity(Gravity.CENTER);

tv2.setText("MIDDLE");

TextView tv3 = new TextView(this);

tv3.setTextSize(100);

tv3.setGravity(Gravity.CENTER);

tv3.setText("LAST");

LinearLayout ll = new LinearLayout(this);

ll.setOrientation(LinearLayout.VERTICAL);

ll.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

ll.setGravity(Gravity.CENTER);

ll.addView(tv1);

ll.addView(tv2);

ll.addView(tv3);

setContentView(ll);

}

    下面两张图片展示了这个布局在设备竖屏和横屏下的样子：

    让我们更近一步地研究一下上面的Java代码。首先，创建并配置三个TextView控件。每个控件都有文本大小（字体大小），文本对齐，以及文本 值本身。然后，创建一个垂直方向的线性布局。它的布局参数允许它填充整个父级对象（在这里就是整个屏幕），并且它的对齐导致所有子控件都排列在屏幕中间， 而不是从左上角开始。每个TextView控件通过addView方法作为子控件添加到线性布局中。最后，当父级控件要在屏幕上显示时，线性布局被传到 setContentView()方法中。

    如你所见，当越来越多的控件要添加到屏幕时，代码量会很快地增长。为了易组织和可维护性，用程序定义并使用布局最好是用在特殊情况而不是一般情况。

    探讨线性布局的重要特性和属性

    现在让我们来看看有助于配置线性布局和它的子控件的一些重要属性。

    一些特别的属性应用到线性布局。你会使用到线性布局最重要的属性包括：

    • 方向属性（必须），取值可以是vertical或horizontal（类：LinearLayout）
    • 对齐属性（可选），控制子控件在线性布局中如何排列和显示（类：LinearLayout）
    • layout_weight属性（可选，应用到每个子控件）指定每个子控件在父级线性布局中的相对重要性（类：LinearLayout.LayoutParams）

    此外，通用的ViewGroup-style属性也应用到线性布局。这些属性包括：

    • 通用布局参数如layout_height (必须)和layout_width (必须) (类：ViewGroup.LayoutParams)
    • 边距布局参数如margin_top，margin_left，margin_right和margin_bottom (类：ViewGroup. MarginLayoutParams)
    • 布局参数如layout_height和layout_width (类：ViewGroup.LayoutParams)

    给子控件赋权

    绝大部分线性布局的属性都是自明性的。然而layout_weight属性需要一些额外的讨论。与其它线性布局属性不同，其它属性应用在线性布局视 图本身，而这个属性是应用在它的子控件上的。权值本身应该是一个数字（比如0.5，0.25，0.10，0.10，0.05），如果你把所有子控件的权值 加起来等于1（100%）。

    子控件的权值控件它在父线性布局中有多“重要”或者留给其多少“空间”。这一点最好通过例子来说明。让我们回到我们前面用的彩虹线性布局。为了允许 所有子控件相同地“拉伸”填充线性布局，不管屏幕的大小，我们使用layout_weight来对每个TextView赋予相对权值。因为有7种我们想赋 相同权值的颜色，我们将1除以7大约得到0.143.然而，既然我们想要权值之和最后为1，因此5个控件权值设为0.14，另外两个为0.15——一个微 小的区别使得总和刚刚好为1，但是这对于第一个和最后一个控件来说还是很明显的。

    当屏幕上有足够空间来正确的展示所有控件的时候，这个权值技巧很有效。那就是说，当空间很紧的时候，权值属性可能会被其它因素覆盖，比如视图裁剪或 者在TextView下试图不环绕文本。当我们改变rainbow.xml布局文件以包含相似水平布局（layout_height 还是设置为 fill_parent）的时候，这变得很明显。

    下面的两张图片展示这个相同的布局（只是改变到水平方向）在设备竖屏和横屏模式下可能的样子：

    我们期望的是红色和紫色区域（权值0.15）比其它颜色（权值为0.14）会略大一些，但是显示出来却不是这样。如果你仔细看红色 TextView，它应该比它边上橙色的TextView占用更多空间。然而，因为“Red”是一个短单词，而“Orange”不是，因此系统自动的作了 一些冲撞调整，为了使得每个单词不会折行。这样的结果更令人高兴，但是这可能会有一些烦恼，如果这不是想要的效果的话。

    总结

    Android程序用户界面使用布局来定义，而线性布局是最基本的布局类型之一。线性布局允许子控件被组织在一行或一行（水平）或一列（竖直）上。子控件的位置可以使用对齐和权值属性进一步设置。[English]

    本文转载自：RockUX–WEB前端

    ]]>     http://www.shtion.com/5242.html/feed 1     Android用户界面设计：基本按钮 http://www.shtion.com/5237.html http://www.shtion.com/5237.html#comments Thu, 07 Apr 2011 13:31:16 +0000 shtion http://www.shtion.com/?p=5237 本文向你展示了在你的Android应用程序中创建一个简单的Button或ImageButton控件的步骤。首先，你会学到如何向你的布局文件 中添加按钮控件。然后你会学习如何用两种方法处理用户对按钮的点击。最后，我们讨论Android中按钮控件一些其它的可用特性。

    第1步：创建Android应用程序

    我们从创建Android程序开始。你平常一样完成你的Android应用。一旦你已经创建项目并可以运行，决定你希望向什么样的屏幕添加 Button控件。可能你就简单地创建了一个使用默认活动和布局(main.xml)的新Android项目。这个教程将使用这种情况作例子。一旦你创建 了你的Android项目，你就可以继续学习这篇文章了。

    你可以参考我们的项目：BasicButtons, 可以在一个开源项目中找到。

    第2步：使用Button控件

    Android SDK包含两个在你的布局中可以使用的简单按钮控件：Button（android.widget.Button）和 ImageButton（android.widget.ImageButton）。这些控件的功能很相似因此我们几乎可以一并地的讨论它们。这两个控件 不相同的地方基本上就是外观上；Button控件有一个文本标签，而ImageButton使用一个可绘制的图像资源来代替。Button使用的一个很好 的例子应该是一个简单的带有“保存”文本标签的按钮。ImageButton使用的一个很好的例子可能是音乐播放器按钮的集合，包括播放P(), 暂停() 以及停止 ( )。

    这里是一个示例屏幕，包括一个Button控件（左边）和一个ImageButton控件（右边）。

    Android SDK还包含了一些其它更不为人知的从上面两个基本按钮类型继承来的类按钮控件，包括 CompoundButton，RadioButton，ToggleButton，和ZoomButton。要了解这些控件的更多信息，查看 Android文档。你也可以通过继承合适的类并实现控件行为来创建自定义控件。

    第3步：向布局添加Button控件

    Button控件通常都被作为活动的布局资源文件一部分。比如，要添加一个Button控件到与你程序相关的main.xml布局资源中，你必须编 辑布局文件。你可使用Eclipse的布局资源设计器，或者直接编辑XML。像按钮这样的控件也可以通过程序动态地创建并在运行时添加到你的屏幕上。简单 地通过它的类来创建合适的控件并将它添加到你的活动中的布局。

    要添加一个Button控件到布局资源文件，打开/res/layout/main.xml布局文件，它是你的Android项目的一部分。点击你 想要为其添加Button控件的LinearLayout （或者父级布局控件，比如RelativeLayout或FrameLayout）。在Eclipse中，你可以点击Outline标签中的父级布局，然 后使用绿色加号按钮添加一个新的控件。选择你要添加的控件——在这个例子中是Button控件。

    要配置Button控件的外观，选中该控件并通过在属性标签中改变属性值来调节控件的属性。下面是一些你会想知道的特别的属性：

    • 使用id属性给Button或ImageButton一个唯一的名字。
    • 使用文本属性设置Button控件上要显示的文字；使用src属性设置ImageButton控件上要显示的图片。
    • 将控件的布局高度和布局宽度属性设置为wrap_content.
    • 设置任何其它属性来调整控件的外观。比如，使用文本颜色，文本大小和文本样式属性来调整Button的字体。

    下面是用来生成前段中展示的屏幕的布局资源文件的内容。它包括三个控件。RelativeLayout组织屏幕上的控件，也就是两个子控件，一个Button和一个ImageButton，如下：

    <pre name="code"><?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:gravity="center">
 <Button
 android:id="@+id/Button01"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/hello"
 android:minHeight="92dp"
 android:textSize="22dp"
 android:onClick="onMyButtonClick"></Button>
 <ImageButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/skater"
 android:id="@+id/ImageButton01"
 android:layout_toRightOf="@+id/Button01"></ImageButton>
 </RelativeLayout>
 </pre>

    第4步：处理点击

    现在，如果你运行你的程序，按钮控件显示出来了，但是如果你点击它们不会有任何反应。现在应该来处理控件上的点击事件了。有好几种方法可以做到。

    让我们从简单的方法开始吧。Button和ImageButton控件有一个叫onClick的属性（在属性面板里叫“On Click”）。你可以通过这个属性设置要处理点击事件的方法名，然后在你的活动中实现这个方法。比如，你可以将你的Button控件属性设置为 onMyButtonClick。在XML中，这个属性将如下所示：

    android:onClick="onMyButtonClick"

    然后，在你的活动类，你需要实现这个方法。它应该是一个带有单个参数（一个View对象）的公有的void方法。例如，下面的按钮点击实现了当Button控件被点击时在屏幕生成一个消息框：

    public void onMyButtonClick(View view)
 {
 Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show();
 }

    当你点击这个Button控件，onMyButtonClick()方法被调用，在屏幕上显示一个消息。你的Button按钮能做什么就取决于你自己了。下图显示了当点击Button按钮时消息是如何展示的：

    第5步：处理点击——实现OnClickListener

    实现点击事件处理的另一种方法是使用setOnClickListener()方法向你的按钮控件注册一个新的 View.OnClickListener。这种方式代替了将你布局资源中的按钮控件的On Click属性设置为一个你必须实现的方法的方式，你可以在你的活动中动态地做这些事情。虽然这可能看起来有很多额外的代码要写，但至少理解它是非常重要 的，因为在一些控件上点击不是需要处理的唯一事件。我们将要向你展示的程序应用了其它的事件，比如长按。

    要使用这个方法，你必须更新你的活动类以注册控件点击事件。通常情况下通过你的活动的onCreate()方法来实现。使用 findViewById()方法找到控件然后使用它的setOnClickListener()方法来定义当它被点击时的行为。你将需要自己去实现界面 的onClick()方法。比如，下面的代码（位于活动的onCreate()方法中）为我们的ImageButton控件注册了一个点击处理器。

    ImageButton myImageButton = (ImageButton) findViewById(R.id.ImageButton01);
 myImageButton.setOnClickListener(new View.OnClickListener() {
 public void onClick(View v) {
 Toast.makeText(BasicButtonActivity.this, "ImageButton clicked!", Toast.LENGTH_SHORT).show();
 }
 });

    同样地，你可以使用这个技术来实现长按点击处理，通过使用控件的setOnLongClickListener()方法。

    总结

    按钮控件在Android程序中经常会用到。在这个快速教程中你学习了如何创建两种不同的Android按钮控件：Button和ImageButton。你也学习了实现这些类型按钮控件的按钮点击事件处理的几种方法。[English]

    转载请注明：
    作者：RockUX–WEB前端

    ]]>     http://www.shtion.com/5237.html/feed 0