swiftwatchkitapple-watchwatchos-2

How to display image in watchOS complication

I'm currently setting up complications for my watchOS 2 app.

I want to offer three different types of complications:

All these complication types should simply display my app icon as an image. In my ClockKit class, I have implemented the following method:

func getCurrentTimelineEntryForComplication(complication: CLKComplication, withHandler handler: (CLKComplicationTimelineEntry?) -> Void) {

    if complication.family == .CircularSmall {

        let template = CLKComplicationTemplateCircularSmallRingImage()
        template.imageProvider = CLKImageProvider(onePieceImage: UIImage(named: "app_icon")!)
        let timelineEntry = CLKComplicationTimelineEntry(date: NSDate(), complicationTemplate: template)
        handler(timelineEntry)

    } else if complication.family == .UtilitarianSmall{

        let template = CLKComplicationTemplateUtilitarianSmallRingImage()
        template.imageProvider = CLKImageProvider(onePieceImage: UIImage(named: "app_icon")!)
        let timelineEntry = CLKComplicationTimelineEntry(date: NSDate(), complicationTemplate: template)
        handler(timelineEntry)

    } else if complication.family == .ModularSmall {

        let template = CLKComplicationTemplateModularSmallRingImage()
        template.imageProvider = CLKImageProvider(onePieceImage: UIImage(named: "app_icon")!)
        let timelineEntry = CLKComplicationTimelineEntry(date: NSDate(), complicationTemplate: template)
        handler(timelineEntry)

    } else {

        handler(nil)

    }

}

I'm not sure that's the appropriate way of realising my idea, so I'd like to know the code for just displaying an image as my complication. Does anybody know how I could achieve this?

Solution

  • At first I strongly recommend you to watch an Apple's session about Complications unless you haven't seen it yet.

    You need to implement 3 following non-optional methods of CLKComplicationDataSource in your ComplicationController at least:

    public func getSupportedTimeTravelDirectionsForComplication(complication: CLKComplication, withHandler handler: (CLKComplicationTimeTravelDirections) -> Void)
public func getCurrentTimelineEntryForComplication(complication: CLKComplication, withHandler handler: (CLKComplicationTimelineEntry?) -> Void)
public func getPlaceholderTemplateForComplication(complication: CLKComplication, withHandler handler: (CLKComplicationTemplate?) -> Void)

    All other methods are optional. As far as you see you implemented only the second one. Implementations of remaining two could be the following in your context:

    class ComplicationController: NSObject, CLKComplicationDataSource {

    func getSupportedTimeTravelDirectionsForComplication(complication: CLKComplication, withHandler handler: (CLKComplicationTimeTravelDirections) -> Void) { 
        // Turn off time travelling
        handler([CLKComplicationTimeTravelDirections.None])
    }

    func getPlaceholderTemplateForComplication(complication: CLKComplication, withHandler handler: (CLKComplicationTemplate?) -> Void) {
        var template: CLKComplicationTemplate?

        switch complication.family {
            case .CircularSmall:
                template = CLKComplicationTemplateCircularSmallRingImage()
                template.imageProvider = CLKImageProvider(onePieceImage: UIImage(named: "app_icon")!)
            case .UtilitarianSmall:
                template = CLKComplicationTemplateUtilitarianSmallRingImage()
                template.imageProvider = CLKImageProvider(onePieceImage: UIImage(named: "app_icon")!)
            case .ModularSmall:
                template = CLKComplicationTemplateModularSmallRingImage()
                template.imageProvider = CLKImageProvider(onePieceImage: UIImage(named: "app_icon")!)
            case .ModularLarge:
                template = nil
            case .UtilitarianLarge:
                template = nil
        }

        handler(template)
    }

}

    And don't forget to specify your Data Source Class in Complication Configuration as $(PRODUCT_MODULE_NAME).ComplicationController and check appropriate checkboxes. enter image description here

    That's the minimal complication configuration in your case.