WatchOS2.0 自定义表盘元素

转载 2015年11月17日 16:58:04

原文链接:http://blog.csdn.net/wangjavafans/article/details/47763423

北京时间6月9日凌晨1点,苹果在美国旧金山举行了WWDC2015全球开发者大会发布新的WatchOS2.0操作系统,不仅与之前WatchOS1系统结构的改变,还添加许多新的功能、新特性及新UI控件,其中WatchOS2.0新Complications(自定义表盘元素)我认为是WatchOS2.0的亮点,好那么我们下面就来聊一聊这东西。

首先在WatchOS1的时候,只支持简单自定义配置表盘。watchOS2支持自定义表盘的Complication(苹果把表盘上显示的每一个控件称之为Complication)。苹果已经做使定制Complication在watchOS2的非常好的工作。WatchoOS现在包含ClockKit(表盘开发工具包),他包含了所有可定制化的Complication类型。自定义表盘的工作方式是非常简单的,只需要你的Watch Extension提供实现CLKComplicationDataSource协议,提供给ClockKit(表盘)数据。

创建一个自定义表盘元素项目

创建一个自定义表盘元素(Complication)项目,只需要你在创建项目时候勾选”Include Complication”。

创建向导

勾选”Include Complication”之后你的工程添加“ComplicationController”类,它用来配置你的Complication。当你在xcode查看你的Watch Extension的target,你将会看到配置你支持Complication的五大家族

配置向导

Complication家族

Complication分为五个不同的家族。下面我们来看以下五大家族分类。

Modular large 和 Modular small

Modular large

当前显示的是Standard Body Template.它可以显示多行数据,第一行时它的标题行,下面称为“body 1” 和 “body 2”.

<code class="language-swift hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">let tmpl = CLKComplicationTemplateModularLargeStandardBody()
tmpl<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.headerTextProvider</span> = CLKTimeIntervalTextProvider(startDate:  NSDate(), endDate:  NSDate()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.dateByAddingTimeInterval</span>(MatchDurtion))
tmpl<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span>1TextProvider = CLKSimpleTextProvider(text: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Lunch with Paul"</span>)
tmpl<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span>2TextProvider = CLKSimpleTextProvider(text: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Zero Zero"</span>)
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

Modular small

模块化(Modular)的表盘里面有一个块大的部分和四块小的部分,大的部分称为Modular large,小的部分称为Modular small,可以通过滚动Digital Crown来选择不同的Complication(表盘控件)。

Utilitarian large 和 Utilitarian small

Utilitarian large 
Utilitarian small

实用型(Utilitarian)的表盘里面有底部一块大的部分和顶部两块小的部分,大的部分称为Utilitarian large,小的部分称为Utilitarian small类型。

Circular small

Circular small

节约(Circular)的表盘里面包含四块小的部分称为Circular small。

Complication 布局

提供给表盘(ClockKit)显示元素主要是通过CKComplicationTemplate,每一种家族的表盘元素 (complication)都有特定的子类,目前为止测速版,它一共提供用23个子类。 
如下:

Template

通过自己的业务需求来选择数据展示所需模版。

Templates and Providers

通过上面学习我们知道,我们可以通过选择模版来展示我们的数据。那么我们的数据如何显示在模版上的呢?我们可以通过设置模版的Providers(提供者),Providers是非常灵活的,提供了各种各样的Provider,如需要显示文本内容,我们有CLKTextProvider,它的子类CLKSimpleTextProvider非常常用,它有个text属性,设置这个属性提供给模版显示简单的文本内容。显示图片用CLKImageProvider提供给模版显示简单图片。使用CLKDateTextProvider,CLKTimeTextProvider和relativCLKRelativeDateTextProvider来为表盘显示时间。

<code class="language-swift hljs mel has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//1.创建选择的模版</span>
let tmpl = CLKComplicationTemplateModularLargeStandardBody()
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//2.使用Provider设置要显示的数据</span>
tmpl.headerImageProvider = CLKImageProvider(onePieceImage:UIImage(named: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"soccer_ball"</span>)!)
tmpl.headerTextProvider = CLKTimeTextProvider(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">date</span>: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">match</span>.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">date</span>!)
tmpl.body1TextProvider = CLKSimpleTextProvider(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span>: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">match</span>.teamDesc!)
tmpl.body2TextProvider = CLKSimpleTextProvider(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span>: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">match</span>.groupDesc!)
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

如何工作?

当你安装了一个带有Complication的应用,它的extension会自动启动。这个getPlaceholderTemplateForComplication:withHandler: 方法会首先被调用一次为每个支持的Complication,值会被缓存整改应用的生命周期。这个主要是placeholder模型给用户。 
一旦placeholder被使用,用户将安装你的Complication,如果已经安装,你的extension将会被唤醒调用getCurrentTimelineEntryForComplication:withHandler: 它需要一个现在complication显示结果。在次之后,系统将自动调用getNextRequestedUpdateDateWithHandler:去请求下一次数据刷新。最后通过-getPrivacyBehaviorForComplication:withHandler: 让watch知道,在锁屏时候是否隐藏Complication。

Time Travel: 显示过去/未来事件

当用户在转动Digital Crownhs时,watch将进入Time Travel模式,下面一些方法来支持Time Travel。 
* getSupportedTimeTravelDirectionsForComplication:withHandler: 
* getTimelineStartDateForComplication:withHandler: 
* getTimelineEndDateForComplication:withHandler: 
* getTimelineEntriesForComplication:beforeDate:limit:withHandler: 
* getTimelineEntriesForComplication:afterDate:limit:withHandler:

这些方法都是为Time Travel工作,entries是CLKComplicationTimelineEntry对象,它包括NSDate和CLKComplicationTemplate。

这是关于事件有趣的事情,来举例说明:比如说今天有三场足球比赛,第一场10点半、第二场13点半、第三场17点半。那么我们要在complication上提醒用户现在或将要进行的那场球赛,那么首先我们要提供整个时间线的开始、结束时间通过getTimelineStartDateForComplication:withHandler:和getTimelineEndDateForComplication:withHandler:。

<code class="language-swift hljs coffeescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">   func getTimelineStartDateForComplication<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(complication: CLKComplication, withHandler handler: (NSDate?) -> Void)</span> {
        //<span class="hljs-title" style="box-sizing: border-box;">timeline</span>开始时间
        <span class="hljs-title" style="box-sizing: border-box;">let</span> <span class="hljs-title" style="box-sizing: border-box;">startDate</span> = <span class="hljs-title" style="box-sizing: border-box;">SoccerMatch</span>.<span class="hljs-title" style="box-sizing: border-box;">firstMatch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>?.<span class="hljs-title" style="box-sizing: border-box;">date</span>?.<span class="hljs-title" style="box-sizing: border-box;">dateByAddingTimeInterval</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span> * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>)</span>
        <span class="hljs-title" style="box-sizing: border-box;">handler</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(startDate)</span>
    }</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>
<code class="language-swift hljs coffeescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    func getTimelineEndDateForComplication<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(complication: CLKComplication, withHandler handler: (NSDate?) -> Void)</span> {
        //<span class="hljs-title" style="box-sizing: border-box;">timeline</span>结束时间
        <span class="hljs-title" style="box-sizing: border-box;">let</span> <span class="hljs-title" style="box-sizing: border-box;">endDate</span> = <span class="hljs-title" style="box-sizing: border-box;">SoccerMatch</span>.<span class="hljs-title" style="box-sizing: border-box;">lastMatch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>?.<span class="hljs-title" style="box-sizing: border-box;">date</span>?.<span class="hljs-title" style="box-sizing: border-box;">dateByAddingTimeInterval</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(MatchDurtion)</span>
        <span class="hljs-title" style="box-sizing: border-box;">handler</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(endDate)</span>

    }</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

如何根据Time Travel的时间来显示该时间将要或进行中的比赛呢?那么我们就可以通过getTimelineEntriesForComplication:beforeDate:limit:withHandler:和 getTimelineEntriesForComplication:afterDate:limit:withHandler:来根据条件来取得当前比赛。

<code class="language-swift hljs coffeescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    func getTimelineEntriesForComplication<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(complication: CLKComplication, beforeDate date: NSDate, limit: Int, withHandler handler: (([CLKComplicationTimelineEntry]?) -> Void))</span> {
        // <span class="hljs-title" style="box-sizing: border-box;">Call</span> <span class="hljs-title" style="box-sizing: border-box;">the</span> <span class="hljs-title" style="box-sizing: border-box;">handler</span> <span class="hljs-title" style="box-sizing: border-box;">with</span> <span class="hljs-title" style="box-sizing: border-box;">the</span> <span class="hljs-title" style="box-sizing: border-box;">timeline</span> <span class="hljs-title" style="box-sizing: border-box;">entries</span> <span class="hljs-title" style="box-sizing: border-box;">prior</span> <span class="hljs-title" style="box-sizing: border-box;">to</span> <span class="hljs-title" style="box-sizing: border-box;">the</span> <span class="hljs-title" style="box-sizing: border-box;">given</span> <span class="hljs-title" style="box-sizing: border-box;">date</span>
        //构造返回的<span class="hljs-title" style="box-sizing: border-box;">enties</span>
        <span class="hljs-title" style="box-sizing: border-box;">var</span> <span class="hljs-title" style="box-sizing: border-box;">enties</span> = [<span class="hljs-title" style="box-sizing: border-box;">CLKComplicationTimelineEntry</span>]<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>

        <span class="hljs-title" style="box-sizing: border-box;">var</span> <span class="hljs-title" style="box-sizing: border-box;">match</span> = <span class="hljs-title" style="box-sizing: border-box;">SoccerMatch</span>.<span class="hljs-title" style="box-sizing: border-box;">lastMatch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>
        //去比赛数据中匹配 如果满足条件 添加到 <span class="hljs-title" style="box-sizing: border-box;">enties</span>

        <span class="hljs-title" style="box-sizing: border-box;">while</span> <span class="hljs-title" style="box-sizing: border-box;">let</span> <span class="hljs-title" style="box-sizing: border-box;">thisMatch</span> = <span class="hljs-title" style="box-sizing: border-box;">match</span> {
            //获取进入这场比赛的<span class="hljs-title" style="box-sizing: border-box;">Entry</span>时间
            <span class="hljs-title" style="box-sizing: border-box;">let</span> <span class="hljs-title" style="box-sizing: border-box;">thisMatchEntryDate</span> = <span class="hljs-title" style="box-sizing: border-box;">entryDateForMatch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(thisMatch)</span>
            <span class="hljs-title" style="box-sizing: border-box;">print</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(enties)</span>
            <span class="hljs-title" style="box-sizing: border-box;">print</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(match)</span>
            <span class="hljs-title" style="box-sizing: border-box;">if</span> <span class="hljs-title" style="box-sizing: border-box;">date</span>.<span class="hljs-title" style="box-sizing: border-box;">compare</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(thisMatchEntryDate!)</span> == .<span class="hljs-title" style="box-sizing: border-box;">OrderedDescending</span>
            {
                <span class="hljs-title" style="box-sizing: border-box;">let</span> <span class="hljs-title" style="box-sizing: border-box;">timelineEntry</span> = <span class="hljs-title" style="box-sizing: border-box;">CLKComplicationTimelineEntry</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>
                <span class="hljs-title" style="box-sizing: border-box;">timelineEntry</span>.<span class="hljs-title" style="box-sizing: border-box;">complicationTemplate</span> = <span class="hljs-title" style="box-sizing: border-box;">templateForMatch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(match!)</span>
                <span class="hljs-title" style="box-sizing: border-box;">timelineEntry</span>.<span class="hljs-title" style="box-sizing: border-box;">date</span> = <span class="hljs-title" style="box-sizing: border-box;">thisMatchEntryDate</span>!
                <span class="hljs-title" style="box-sizing: border-box;">enties</span>.<span class="hljs-title" style="box-sizing: border-box;">append</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(timelineEntry)</span>

                <span class="hljs-title" style="box-sizing: border-box;">if</span> <span class="hljs-title" style="box-sizing: border-box;">enties</span>.<span class="hljs-title" style="box-sizing: border-box;">count</span>==<span class="hljs-title" style="box-sizing: border-box;">limit</span> {<span class="hljs-title" style="box-sizing: border-box;">break</span>}
            }
            <span class="hljs-title" style="box-sizing: border-box;">match</span> = <span class="hljs-title" style="box-sizing: border-box;">match</span>?.<span class="hljs-title" style="box-sizing: border-box;">frontMatch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>

        }
        // <span class="hljs-title" style="box-sizing: border-box;">Call</span> <span class="hljs-title" style="box-sizing: border-box;">the</span> <span class="hljs-title" style="box-sizing: border-box;">handler</span> <span class="hljs-title" style="box-sizing: border-box;">with</span> <span class="hljs-title" style="box-sizing: border-box;">the</span> <span class="hljs-title" style="box-sizing: border-box;">timeline</span> <span class="hljs-title" style="box-sizing: border-box;">entries</span> <span class="hljs-title" style="box-sizing: border-box;">after</span> <span class="hljs-title" style="box-sizing: border-box;">to</span> <span class="hljs-title" style="box-sizing: border-box;">the</span> <span class="hljs-title" style="box-sizing: border-box;">given</span> <span class="hljs-title" style="box-sizing: border-box;">date</span>
        <span class="hljs-title" style="box-sizing: border-box;">handler</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(enties)</span>
    }</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li></ul>
<code class="language-swift hljs coffeescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    func getTimelineEntriesForComplication<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(complication: CLKComplication, afterDate date: NSDate, limit: Int, withHandler handler: (([CLKComplicationTimelineEntry]?) -> Void))</span> {
        //构造返回的<span class="hljs-title" style="box-sizing: border-box;">enties</span>
        <span class="hljs-title" style="box-sizing: border-box;">var</span> <span class="hljs-title" style="box-sizing: border-box;">enties</span> = [<span class="hljs-title" style="box-sizing: border-box;">CLKComplicationTimelineEntry</span>]<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>

        <span class="hljs-title" style="box-sizing: border-box;">var</span> <span class="hljs-title" style="box-sizing: border-box;">match</span> = <span class="hljs-title" style="box-sizing: border-box;">SoccerMatch</span>.<span class="hljs-title" style="box-sizing: border-box;">firstMatch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>
        //去比赛数据中匹配 如果满足条件 添加到 <span class="hljs-title" style="box-sizing: border-box;">enties</span>

        <span class="hljs-title" style="box-sizing: border-box;">while</span> <span class="hljs-title" style="box-sizing: border-box;">let</span> <span class="hljs-title" style="box-sizing: border-box;">thisMatch</span> = <span class="hljs-title" style="box-sizing: border-box;">match</span> {
            //获取进入这场比赛的<span class="hljs-title" style="box-sizing: border-box;">Entry</span>时间
            <span class="hljs-title" style="box-sizing: border-box;">let</span> <span class="hljs-title" style="box-sizing: border-box;">thisMatchEntryDate</span> = <span class="hljs-title" style="box-sizing: border-box;">entryDateForMatch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(thisMatch)</span>
            <span class="hljs-title" style="box-sizing: border-box;">print</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(enties)</span>
             <span class="hljs-title" style="box-sizing: border-box;">print</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(match)</span>
            <span class="hljs-title" style="box-sizing: border-box;">if</span> <span class="hljs-title" style="box-sizing: border-box;">date</span>.<span class="hljs-title" style="box-sizing: border-box;">compare</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(thisMatchEntryDate!)</span> == .<span class="hljs-title" style="box-sizing: border-box;">OrderedAscending</span>
            {
                <span class="hljs-title" style="box-sizing: border-box;">let</span> <span class="hljs-title" style="box-sizing: border-box;">timelineEntry</span> = <span class="hljs-title" style="box-sizing: border-box;">CLKComplicationTimelineEntry</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>
                <span class="hljs-title" style="box-sizing: border-box;">timelineEntry</span>.<span class="hljs-title" style="box-sizing: border-box;">complicationTemplate</span> = <span class="hljs-title" style="box-sizing: border-box;">templateForMatch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(match!)</span>
                <span class="hljs-title" style="box-sizing: border-box;">timelineEntry</span>.<span class="hljs-title" style="box-sizing: border-box;">date</span> = <span class="hljs-title" style="box-sizing: border-box;">thisMatchEntryDate</span>!
                <span class="hljs-title" style="box-sizing: border-box;">enties</span>.<span class="hljs-title" style="box-sizing: border-box;">append</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(timelineEntry)</span>

                <span class="hljs-title" style="box-sizing: border-box;">if</span> <span class="hljs-title" style="box-sizing: border-box;">enties</span>.<span class="hljs-title" style="box-sizing: border-box;">count</span>==<span class="hljs-title" style="box-sizing: border-box;">limit</span> {<span class="hljs-title" style="box-sizing: border-box;">break</span>}
            }
            <span class="hljs-title" style="box-sizing: border-box;">match</span> = <span class="hljs-title" style="box-sizing: border-box;">match</span>?.<span class="hljs-title" style="box-sizing: border-box;">nextMatch</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>

        }


        // <span class="hljs-title" style="box-sizing: border-box;">Call</span> <span class="hljs-title" style="box-sizing: border-box;">the</span> <span class="hljs-title" style="box-sizing: border-box;">handler</span> <span class="hljs-title" style="box-sizing: border-box;">with</span> <span class="hljs-title" style="box-sizing: border-box;">the</span> <span class="hljs-title" style="box-sizing: border-box;">timeline</span> <span class="hljs-title" style="box-sizing: border-box;">entries</span> <span class="hljs-title" style="box-sizing: border-box;">after</span> <span class="hljs-title" style="box-sizing: border-box;">to</span> <span class="hljs-title" style="box-sizing: border-box;">the</span> <span class="hljs-title" style="box-sizing: border-box;">given</span> <span class="hljs-title" style="box-sizing: border-box;">date</span>
        <span class="hljs-title" style="box-sizing: border-box;">handler</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(enties)</span>
    }</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li></ul>

刷新数据

当你的应用底层数据改变时候, 你想要刷新complications去更新新数据.你可以通过以下代码:

<code class="language-swift hljs axapta has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> func refreshComplications() {
        let <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">server</span> = CLKComplicationServer.sharedInstance()
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> complication in <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">server</span>.activeComplications
        {
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//刷新complication数据</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">server</span>.reloadTimelineForComplication(complication)
        }
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

那么关于自定义表盘元素就介绍到这里,希望对你有所帮助。

相关文章推荐

WatchOS2.0 自定义表盘元素

WatchOS2.0 自定义表盘元素 北京时间6月9日凌晨1点,苹果在美国旧金山举行了WWDC2015全球开发者大会发布新的WatchOS2.0操作系统,不仅与之前WatchOS1系统结构的改变,还...

自定义View 手表表盘

最近想好好熟悉下自定义View的相关知识。Android应用开发少了自定义View真是一个缺口,关键使用而且有趣。 下面是参考别人的代码自己改装写下来的一个表盘,不说多了,从模仿开始。具体代码如下: ...

android自定义刻度盘 表盘 速度表

android自定义刻度盘 表盘 速度表效果图 直接在xml文件中添加即可,在代码中调用setProgress(int) 即可。代码注释写的很清楚,有兴趣的随便改改。InstrumentVi...

自定义表盘(未彻底完成)

自定义表盘View

android 自定义 view 实现表盘效果

第一步:画一个简单的圆 第二步:绘制刻度 第三步:绘制时,分,表指针 第四步:绘制当前时间文字 第五步:实现时间动态显示 第一步画一个圆是很简单的, package com.e...

自定义表盘,一个是关于canvas.rotate的运用,一个是关于Path,Math的运用

1.表盘一效果图 忽略小球上下移动。。。这个是重力感应下上下移动的。 本功能的主要实现是,三个背景圆圈的旋转。 首先,这三个圆需要无线旋转。 其次,需要根据不同的情况,加速,或者减速旋转。 不知...

Android 自定义view(画表盘)

自定义View就是继承一个View的子孙类或View类,然后重写其中的一些方法来完成界面的美观效果。 效果: 布局: 代码:pub
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)