CODEWITHSUNDEEP
ioswatchkitapple-watch
EnriMR
EnriMR

Reputation: 3970

How to create rounded images with WatchKit?

I'm trying to do a rounded images to be shown in my WatchKit application but I don't find any method to do it programatically.

What I have done to perform that, it is use my original image as a group background and put inside a mask image with rounded shape but I think this is not so clean.

Another different solution that I have thought is to create in my backend a new thumbnail or similar with the shape I want to show, but this require more time to be programed.

I could use also radius parameter from WKInterfaceGroup but, in my case (see the image below), I will lose my notification bubble that I have in a corner.

My app interface:

enter image description here

Uber application example:

enter image description here

Upvotes: 2

Views: 2019

Answers (5)

Vivek
Vivek

Reputation: 99

i have used UIImage category from http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/. this has a Category for Rounded corner images, worked for me in watchkit app.

Upvotes: 0

Richard Bao
Richard Bao

Reputation: 415

You can actually achieve this by using three groups:

  1. The 1st WKInterfaceGroup has your original non-cropped image as its background.
  2. The 2nd WKInterfaceGroup, which is inside the 1st one but has the same size, has the circle image mask as its background.
  3. The 3rd WKInterfaceGroup, which is inside the 2nd one, contains your badge. You can put the text label in it.

Although this requires a pure simple background so the mask image can simply just overlay above the background image, this one doesn't require any image data transferring between the phone and the watch.

Upvotes: 2

DevAndArtist
DevAndArtist

Reputation: 5149

What you are trying to create is not possible at the moment (we'll see if Apple will add new features to WatchKit this Summer). You'll need to mask your icons on your device and cache on your Watch.

As 'bgilham' said you could put the WKInterfaceImage inside WKInterfaceGroup, but you don't have to. You can just set the background image of WKInterfaceGroup. This time you can create some shiny fake subviews. WKInterfaceGroup inside WKInterfaceGroup with different background images on them.

For example. Lets say you have three ui (WKInterface) elements 'iconGroup', 'badgeGroup', 'badgeLabel'. Center badgeLabel inside badgeGroup. Set badgeGroups radius to half of its height. If badgeGroups width is equal to its height you'll get a nice circle. Place your badgeGroup inside iconGroup at the top right corner. You can now set the radius of iconGroup equal to the radius of badgeGroup. Set the background image and you'll get a nice rounded rectangle with an dynamic badge.

You also can hide some items (groups) and fake some dynamic changes inside your watch app. There is tons you can create with such fakes. If you will add some animations (for example .png files) you can create fake views with transparent overlays and so on.

UPDATE: I checked the uber screenshots of uber app, because I was wondering how they created that overlay over the map. My only clue is that they creating a lot of images on their iPhone and sending them to the apple watch to animate the background image of the WKInterfaceGroup. If the images are cached they will play 30fps on the watch otherwise its going to be 10fps or so.

My statement: So rethink your design, its not always good to make a design like everyone else do. Create something shiny and new so people will memorize your work. :)

Hope this will help you guys out there to rethink your work and create some cool watch apps. Day one apps aren't that great at all, only a few of them are.

Upvotes: 4

Jason Clardy
Jason Clardy

Reputation: 153

The only way to do this right now is just as you said. To mask the profile image into a circle, add it to a group, then add the notification bubble group as a sub-group of the main one (with a circular radius and the label inside.)

Right now there is no way to have a sub-group ignore its parent's clipping radius.

Upvotes: 0

bgilham
bgilham

Reputation: 5939

Put your WKInterfaceImage inside a WKInterfaceGroup and round the corners of the group in Interface Builder.

Upvotes: 7

Related Questions