Apple Watch 1.0 开发介绍 2.1 WatchKit Apps UI要点

时间:2022-09-12 13:38:40

实现app的开始是定义storyboard场景。每个场景定义了app的一部分界面。可以为不同的尺寸自定义场景。

组装storyboard界面

WatchKit app和iOS app的布局模式不同。组装WatchKit app界面时,并不是把元素在一个空间里任意层次结构的摆放,而是把元素添加到场景,Xcode会管理他们,一行一行的竖直堆在上面。运行时,Apple Watch会根据可用的空间布局他们。

虽然Xcode处理了整体布局,WatchKit也提供了在场景中微调元素的方式。调整最多的是元素的大小和位置。可以改变元素的位置也可以改变水平竖直对齐方式。大小的话可以指定一个宽度或者让它根据可用的空间自己计算宽度。

Group对象提供了另外一种布局界面的方法。Group元素是其他元素的容器,可以在group中水平或竖直布局元素。可以group嵌套group然后用间距来改变他们的大小和位置。Group没有默认的可视图像,但是可以配置它的背景颜色或者图片。

下图展示了一个storyboard中的布局。前三个元素是标签,他们有不同的对齐方式。标签下面是一个包含两个图片水平布局的group对象。这个界面也包含了一个分割线还有一个按钮在group对象下面。

Apple Watch 1.0 开发介绍 2.1 WatchKit Apps UI要点

在Xcode中创建界面时,尽量让元素在有可用空间时自己调整位置。界面应该适应Apple Watch不同的尺寸。让系统自动布局可以减少为每种尺寸写布局的工作量。

适应不同的尺寸

Xcode支持为不同尺寸的Apple Watch自定义界面。默认情况下在storyboard中改变的尺寸会影响所有的尺寸,但是也可以在storyboard中为特定的尺寸定义。比如,可能需要在不同的尺寸上微调元素的大小或者指定不同的图片。

要定义指定的设备尺寸,点击属性旁边的(+)按钮然后选择特定的尺寸。对特定尺寸的更改只影响这个尺寸。下图显示了在Apple Watch 42mm上文字的缩放。

Apple Watch 1.0 开发介绍 2.1 WatchKit Apps UI要点

不应该让用户在不同的尺寸上感觉到明显的差异,尽量缩小不同尺寸设备上的差异。虽然可以每种尺寸单独实现一套界面,但是不推荐这样做。尽量所有尺寸使用一套界面。

要查看不同尺寸上的效果的话,可以使用storyboard底部的按钮来切换设备尺寸。storyboard默认显示通用尺寸。在通用尺寸下的更改会影响所有尺寸。如果切换到特定的模式下, 这时候的改变只影响那个尺寸。

运行时更新界面

在运行时,界面控制器可以对storyboard场景对应的对象做下面的操作:

  • 设置或更新数据的值
  • 改变界面的样子,如果对应的对象支持的话
  • 改变对象的大小
  • 改变对象的透明度
  • 显示或隐藏一个对象

不能添加新的对象或者改变已有对象的顺序。虽然不能移除对象,但是可以隐藏它,这样可以临时不显示在界面上。当一个对象隐藏时,其他对象会占据这个对象以前占据的空间。如果要隐藏对象但是要保留位置,可以设置对象的透明度为0.

设置App的主题颜色

每个WatchKit app都有一个相关的主题颜色,会影响下面的UI元素:

  • status bar上的标题
  • short-look通知的app名字

app的主题颜色存储在storyboard的全局属性里。要访问这个属性的话, 选择storyboard然后选择File inspector。选择弹出菜单中的颜色,或者使用颜色选择器选择指定的颜色。

为界面国际化

WatchKit app的storyboard默认就启用了国际化。这会导致任何加到storyboard中的字符串会自动加到Localizable.strings文件中。只需要为特定语言翻译文件中的字符串,然后在发布的app中引用他们。当在运行时创建storyboard中的场景时,Xcode会加入对应的本地化后的字符串。

注意像label喝controls这类的UI控件有足够的空间显示。相对于把多个按钮放在同一行,把他们放在多行这样他们有足够的空间显示。

对于用程序设置的文字和图片,使用iOS和OS Xapp中同样的方法来国际化。

  • 使用NSLocalizedString来加载字符串资源
  • 使用NSNumberFormatter对象来格式化数字
  • 使用NSDateFormatter对象来格式化时间。

使用WatchKit extension时,NSLocal对象会返回Apple Watch中配置的地点信息。使用这个类来获得用户选择的语言,以及备选语言,以及地点相关的信息。

Apple Watch 1.0 开发介绍 2.1 WatchKit Apps UI要点的更多相关文章

  1. Apple Watch 1.0 开发介绍 1.2 简介 配置Xcode工程

    WatchKit app需要一个现有的iOS app.在iOS app工程中,添加一个新的WatchKit app target,它包含了WatchKit app和WatchKit extension ...

  2. Apple Watch 1.0 开发介绍 1.1 简介 开发苹果手表

    使用Apple Watch,用户可以使用一种不显眼的方式查看信息.不用把iPhone从口袋里拿出来,就可以通过看一下手表快速获得重要信息. 作为Apple Watch的第三方app开发者,应该通过使用 ...

  3. Apple Watch 1.0 开发介绍 1.4 简介 使用iOS技术

    WatchKit extension可以使用iOS app同样的技术,但是由于他是extension,使用有些技术的时候会有限制,有些不推荐使用.下面是一些介绍以及什么时候使用什么技术: 有些需要权限 ...

  4. Apple Watch 1.0 开发介绍 1.3 简介 WatchKit App 架构

    WatchKit app和WatchKit extension一起实现了app的界面.当用户在Apple Watch中操作时,WatchKit app从storyboards中选择合适的场景.比如,如 ...

  5. android 蓝牙4.0 开发介绍

    最近一直在研究一个蓝牙功能 由于本人是菜鸟  学起来比较忙 一直搞了好久才弄懂 , 网上对蓝牙4.0也就是几个个dome 抄来抄去,全是英文注解 , 对英语不好的朋友来说 真是硬伤 , 一些没必要的描 ...

  6. 从0开发3D引擎(补充):介绍领域驱动设计

    我们使用领域驱动设计(英文缩写为DDD)的方法来设计引擎,在引擎开发的过程中,领域模型会不断地演化. 本文介绍本系列使用的领域驱动设计思想的相关概念和知识点,给出了相关的资料. 上一篇博文 从0开发3 ...

  7. 从0开发3D引擎(二):准备预备知识

    大家好,本文介绍了开发3D引擎需要的预备知识,给出了相关的资源. 上一篇博文 从0开发3D引擎(一):开篇 了解Web 3D Web 3D的历史 目前Web 3D是基于WebGL这个Web端3D AP ...

  8. 从零开始编写自己的C#框架(6)——SubSonic3.0插件介绍(附源码)

    前面几章主要是概念性的东西为主,向初学者们介绍项目开始前的一些知识与内容,从本章开始将会进入实操阶段,希望跟着本系统学习的朋友认真按说明做好每一步操作(对于代码最好是直接照着文档内容在你的IDE中打一 ...

  9. 【转载】Ssh整合开发介绍和简单的登入案例实现

    Ssh整合开发介绍和简单的登入案例实现 Ssh整合开发介绍和简单的登入案例实现 一  介绍: Ssh是strtus2-2.3.1.2+ spring-2.5.6+hibernate-3.6.8整合的开 ...

随机推荐

  1. 背后的故事之 - 快乐的Lambda表达式(二)

    快乐的Lambda表达式 上一篇 背后的故事之 - 快乐的Lambda表达式(一)我们由浅入深的分析了一下Lambda表达式.知道了它和委托以及普通方法的区别,并且通过测试对比他们之间的性能,然后我们 ...

  2. uva 10934 Dropping water balloons(转载)

    本文转载自http://blog.csdn.net/shuangde800/article/details/11273123 题意 你有k个一模一样的水球,在一个n层楼的建筑物上进行测试,你想知道水球 ...

  3. C/C++中的++a和a++

    代码: #include <iostream> #include <cstdio> using namespace std; int main(){ ; (++a)+=a; / ...

  4. &lbrack;置顶&rsqb; 北漂的大三IT男(暂完)

    今天是2013年8月9日,是我待在北京的最后一个晚上,今天我已经正式向公司提出辞职了,虽然公司已经答应从下个月起涨部分工资,但是我还是坚决的离开了,回想当时进公司的想法----------干了一个月后 ...

  5. linux下svn&lpar;subversion&rpar;服务端添加工程及配置权限

    linux下svn(subversion)服务端添加工程及配置权限 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/9010507.html 此篇我只是将所做过的 ...

  6. 2019&period;03&period;29 bzoj5463&colon; &lbrack;APIO2018&rsqb; 铁人两项(圆方树&plus;树形dp)

    传送门 题意简述:给你一张无向图,问你满足存在从a−>b−>ca->b->ca−>b−>c且不经过重复节点的路径的有序点对(a,b,c)(a,b,c)(a,b,c) ...

  7. BFS求解迷宫的最短路径问题

    题目:给定一个大小为N*M的迷宫,迷宫由通道('.')和墙壁('#')组成,其中通道S表示起点,通道G表示终点,每一步移动可以达到上下左右中不是墙壁的位置.试求出起点到终点的最小步数.(本题假定迷宫是 ...

  8. Python3在指定路径下递归定位文件中出现的字符串

    [本文出自天外归云的博客园] 脚本功能:在指定的路径下递归搜索,找出指定字符串在文件中出现的位置(行信息). 用到的python特性: 1. PEP 318 -- Decorators for Fun ...

  9. JavaScript学习笔记系列2&colon;Dom操作&lpar;一&rpar;

    一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...

  10. PHP - MongoDB连接攻略

    http://blog.163.com/lgh_2002/blog/static/44017526201261111044608/ 使用PHP的Mongo扩展连接MongoDB.通过new Mongo ...