How to round WKInterfaceImage's corners in an  Watch app?

Question

There're lot of  Watch apps which has rounded corners for their WKInterfaceImages. I'm trying to round even some WKInterfaceImages in my test app but I can't understand how to do that.

I can't work with imageView.layer. ... as with normal iPhone apps and I can't find an alternative to do that using code or storyboard.

Do I have to mask all PNGs or there's a simpler way?

score 2 · Answer 1 · answered Sep 18 '15 at 14:09

2

I solved removing the WKInterfaceImage from storyboard then replacing it with an WKInterfaceGroup which I set with same sizes of previous Image then, from attribute inspector, I setted his radius (yes, with groups it's possible!) then I declared group in controller and setted the image using row.flagView.setBackgroundImageNamed(imageName).

answered Sep 18 '15 at 14:09

Matte.Car

2,007
4
23
41

Actually I knew it :) But thought the question was about WKInterfaceImage. Anyway I'm glad to hear that you solved your problem! – Dmytro Hutsuliak Sep 18 '15 at 14:17
Yeah, mine it's a trick! I'll keep this question open if someone find a real solution for asked question. – Matte.Car Sep 18 '15 at 14:19

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

You are right CALayer and UIView are not directly available on watchOS 2. But you are able to use graphic functions and for instance this approach is perfectly acceptable on Watch.

The analogue in Swift:

class ImageTools {
    class func imageWithRoundedCornerSize(cornerRadius:CGFloat, usingImage original: UIImage) -> UIImage {
        let frame = CGRectMake(0, 0, original.size.width, original.size.height)

        // Begin a new image that will be the new image with the rounded corners
        UIGraphicsBeginImageContextWithOptions(original.size, false, 1.0)

        // Add a clip before drawing anything, in the shape of an rounded rect
        UIBezierPath(roundedRect: frame, cornerRadius: cornerRadius).addClip()

        // Draw the new image
        original.drawInRect(frame)

        // Get the new image
        let roundedImage = UIGraphicsGetImageFromCurrentImageContext()

        // Lets forget about that we were drawing
        UIGraphicsEndImageContext()

        return roundedImage
    }
}

Somewhere in your WKInterfaceController class:

let originalImage = UIImage(named: "original-image")!
let roundedImage = ImageTools.imageWithRoundedCornerSize(60, usingImage: originalImage)

// Set `UIImage` for your `WKInterfaceImage`
imageOutlet.setImage(roundedImage)

edited May 23 '17 at 12:16

Community

1
1

answered Sep 18 '15 at 11:42

Dmytro Hutsuliak

1,741
4
21
37

@Matte.Car - I've updated the link with a more appropriate example for Watch. – Dmytro Hutsuliak Sep 18 '15 at 12:48
It could even work but it's in Objective-C... I tried translating it but I can't... – Matte.Car Sep 18 '15 at 13:53
@Matte.Car - Added the example in Swift. It works perfectly. – Dmytro Hutsuliak Sep 19 '15 at 08:47
Wow! I'm trying to test it but, I can't undestand why, using `row.flagView.setImageNamed(codice)` works great, but using `let immagine = UIImage(named: codice)!` return a nil value... – Matte.Car Sep 19 '15 at 10:37
This is a totally different question - try to clean your cache or something. – Dmytro Hutsuliak Sep 19 '15 at 10:56

How to round WKInterfaceImage's corners in an  Watch app?

2 Answers2