Set (border) radius of a WKInterfaceImage by code

Question

I have to set the radius attribute of a WKInterfaceImage by Swift code.

I need the same formatting as for my others UIImageViews:

logoView.layer.cornerRadius = logoView.frame.width / 2
    logoView.clipsToBounds = true
    logoView.layer.borderWidth = 1.0
    logoView.layer.borderColor = UIColor (
                                    red: 0x33 / 255,
                                    green: 0x99 / 255,
                                    blue: 0x66 / 255,
                                    alpha: 1.0
                                ).CGColor

I checked the reference guide but I found no solution. Thanks for you help!

score 15 · Accepted Answer · answered Mar 08 '15 at 17:47

15

You don't have this type of functionality with a WKInterfaceImage. There are only a few public APIs.

In order to round the corners of an interface element in WatchKit, you need to use a WKInterfaceGroup. It allows you to modify the radius of all the corners directly in the storyboard.

WKInterfaceGroup Parameters in Storyboard

If you need to create an outlined border around the group, then you'll need to create a custom UIImage and set it as the background image of the group.

answered Mar 08 '15 at 17:47

cnoon

16,575
7
58
66

Thanks for the idea! The problem is, that I have no idea how many pixels the radius should have (calculated by code-behind source) and the `clipsToBounds` attribute is missing. :( – Tobonaut Mar 08 '15 at 21:48
1

Well, you have a few options. You could render the image manually using Core Graphics, or you could create a few different outline images using cap insets so scale up to the appropriate size. Without knowing more about your use case, that's about as much as I can help. – cnoon Mar 08 '15 at 22:04

score 9 · Answer 2 · answered Mar 08 '15 at 18:11

9

There is no direct way to do this. But I can think of a work around. The only interface object that can have a corner radius is WKInterfaceGroup. So, you can put a group inside a group and give both a corner radius. Set your image as the inner group background.

To have a border width & color, give your inner group a relative width and hight to the outer one. And give the outer a background of which you want your border color be.

answered Mar 08 '15 at 18:11

Ashraf Tawfeeq

3,036
1
20
34

That sounds logical. Thanks for the idea. – Tobonaut Mar 08 '15 at 21:48

score 0 · Answer 3 · answered Aug 04 '16 at 11:50

0

Just set the Radius Property and remember group should not be nested otherwise corners will not set to 0

answered Aug 04 '16 at 11:50

Ali

514
5
16

Set (border) radius of a WKInterfaceImage by code

3 Answers3