WatchOS2.0 Custom Dial Elements

WatchOS2.0 Custom Dial Elements

Beijing time June 9 1 o'clock in the morning, Apple held the WWDC2015 Global Developers Conference in San Francisco to release the new WatchOS2.0 operating system, not only with the previous WATCHOS1 system structure changes, but also add many new features, new features and new UI controls, Where WatchOS2.0 new complications (custom dial element) I think it's the highlight of the WatchOS2.0, okay, so let's talk about this stuff.

First, in the WatchOS1, only simple custom configuration dials are supported. WatchOS2 supports the complication of custom dials (Apple calls each control shown on the dial complication). Apple has done a very good job of making custom complication in watchOS2. Watchoos now contains the Clockkit (Dial Development Kit), which contains all the customizable complication types. Customizing the way the dial works is very simple, just need your watch extension to provide the implementation of the Clkcomplicationdatasource protocol, provided to the Clockkit (dial) data.

Create a custom Dial element item

To create a custom dial element (complication) project, you only need to tick "Include complication" when you create the project.

After checking "Include complication", your project adds the "Complicationcontroller" class, which is used to configure your complication. When you view the target of your watch extension in Xcode, you will see the five families configured to support complication

Complication family

Complication is divided into five different families. Let's look at the following five major family categories.

Modular Large and Modular small

The standard Body Template is currently displayed. It can display multiple rows of data, the first row of its header line, hereinafter referred to as "Body 1" and "Body 2".

let tmpl = CLKComplicationTemplateModularLargeStandardBody()tmpl.headerTextProvider = CLKTimeIntervalTextProvider(startDate:  NSDate(), endDate:  NSDate().dateByAddingTimeInterval(MatchDurtion))tmpl.body"Lunch with Paul")tmpl.body"Zero Zero")

The modular (Modular) dial contains a large part and four small parts, the large part called the Modular large, and the small part called Modular small, which can be selected by scrolling digital crown to select different complication ( Dial control).

Utilitarian large and utilitarian small

The practical (utilitarian) dial contains a large portion of the bottom piece and a small portion of the top two pieces, the large part called the utilitarian large, and the small part called the utilitarian small type.

Circular Small

The saving (Circular) dial contains four pieces of small parts called Circular small.

Complication layout

The display elements provided to the dial (Clockkit) are mainly through the ckcomplicationtemplate, each family's dial element (complication) has a specific subclass, so far the Tachymeter version, which altogether offers a total of 23 subcategories.
As follows:

Choose the template you need for your data presentation with your business needs.

Templates and Providers

By learning from the above we know that we can display our data by selecting a template. So how does our data appear on the stencil? We can set the template of the providers (provider), providers is very flexible, provides a variety of provider, such as the need to display text content, we have Clktextprovider, Its subclass Clksimpletextprovider is very common, it has a text property, and setting this property provides a simple textual content for the template to display. The display picture is provided to the template by Clkimageprovider to display a simple picture. Use Clkdatetextprovider,clktimetextprovider and Relativclkrelativedatetextprovider to display time for the dial.

//1.创建选择的模版let tmpl = CLKComplicationTemplateModularLargeStandardBody()//2.使用Provider设置要显示的数据"soccer_ball")!)tmpl.headerTextProvider = CLKTimeTextProvider(datematch.date!)tmpl.body1TextProvider = CLKSimpleTextProvider(textmatch.teamDesc!)tmpl.body2TextProvider = CLKSimpleTextProvider(textmatch.groupDesc!)

How does it work?

When you install an app with complication, its extension will start automatically. This getplaceholdertemplateforcomplication:withhandler: The method will first be called once for each supported complication, and the value will be cached to rectify the application's life cycle. This is primarily a placeholder model to the user.
Once placeholder is used, the user will install your complication and if it is already installed, your extension will be woken up to call Getcurrenttimelineentryforcomplication: Withhandler: It needs a now complication display result. After the second, the system will automatically call Getnextrequestedupdatedatewithhandler: To request the next data refresh. Finally pass-getprivacybehaviorforcomplication:withhandler: Let watch know, when the lock screen is hidden complication.

Time travel: Show past/future events

When the user is turning digital CROWNHS, watch will enter time travel mode, and some of the following methods can be used to support it.
* Getsupportedtimetraveldirectionsforcomplication:withhandler:
* Gettimelinestartdateforcomplication:withhandler:
* Gettimelineenddateforcomplication:withhandler:
* GetTimelineEntriesForComplication:beforeDate:limit:withHandler:
* GetTimelineEntriesForComplication:afterDate:limit:withHandler:

These methods work for time travel, and entries is the Clkcomplicationtimelineentry object, which includes NSDate and clkcomplicationtemplate.

Here are some interesting things to say about the event: for example, there are three football matches today, the first one is 10:30, the second is 13:30, and the third is 17:30. So we're going to remind the user of the game that is or will be going on complication, so first we have to provide the start and end time of the entire timeline through Gettimelinestartdateforcomplication:withhandler: and Gettimelineenddateforcomplication:withhandler:.

 func Gettimelinestartdateforcomplication (complication:         Clkcomplication, Withhandler handler: (NSDate?), Void)  {//timeline  start time let  startdate  = soccermatch . firstmatch   () ?. date ?. datebyaddingtimeinterval   (-60  * 10 )  Span class= "Hljs-title" >handler   (startdate) }   

    func getTimelineEndDateForComplication(complication: CLKComplication, withHandler handler: (NSDate?) -> Void) {        //timeline结束时间        let endDate = SoccerMatch.lastMatch()?.date?.dateByAddingTimeInterval(MatchDurtion)        handler(endDate)    }

How do i show the time that the game is going or in progress based on time travel? Then we can go through GetTimelineEntriesForComplication:beforeDate:limit:withHandler: and gettimelineentriesforcomplication: AfterDate:limit:withHandler: To get the current match according to the conditions.

Func gettimelineentriesforcomplication(complication:clkcomplication, Beforedate date:nsdate, Limit:int, Withhandler handler: ([ Clkcomplicationtimelineentry]?) Void)){        //Pager  the Handler  with  the Timeline Entries Prior  to  the given DateConstructs the returnedenties        var enties= [Clkcomplicationtimelineentry]()        var Match=Soccermatch.lastmatch()Go to match data matches if conditions are added toenties         while  Let Thismatch=Match{//Get into this gameEntryTime Let thismatchentrydate=Entrydateformatch(Thismatch)            Print(enties)            Print(Match)            if Date.Compare(thismatchentrydate!)== .ordereddescending{ Let Timelineentry=Clkcomplicationtimelineentry()                Timelineentry.complicationtemplate=Templateformatch(match!)                Timelineentry.Date=thismatchentrydate!enties.Append(timelineentry)                if enties.Count==Limit{ Break}            }Match=Match?.Frontmatch()}        //Pager  the Handler  with  the Timeline Entries  After  to  the given Date        Handler(enties)}

Func gettimelineentriesforcomplication(complication:clkcomplication, Afterdate date:nsdate, Limit:int, Withhandler handler: ([ Clkcomplicationtimelineentry]?) Void)){//constructs the returnedenties        var enties= [Clkcomplicationtimelineentry]()        var Match=Soccermatch.Firstmatch()Go to match data matches if conditions are added toenties         while  Let Thismatch=Match{//Get into this gameEntryTime Let thismatchentrydate=Entrydateformatch(Thismatch)            Print(enties)             Print(Match)            if Date.Compare(thismatchentrydate!)== .orderedascending{ Let Timelineentry=Clkcomplicationtimelineentry()                Timelineentry.complicationtemplate=Templateformatch(match!)                Timelineentry.Date=thismatchentrydate!enties.Append(timelineentry)                if enties.Count==Limit{ Break}            }Match=Match?.NextMatch()}        //Pager  the Handler  with  the Timeline Entries  After  to  the given Date        Handler(enties)}

Refresh Data

When your application's underlying data changes, you want to refresh the complications to update the new data. You can use the following code:

 func refreshComplications() {        server = CLKComplicationServer.sharedInstance()        forserver.activeComplications        {            //刷新complication数据            server.reloadTimelineForComplication(complication)        }    }

The introduction of the custom dial element is helpful to you.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

WatchOS2.0 Custom Dial Elements