CODEWITHSUNDEEP
ioswatchkitapple-watchios-extensions
N0mi
N0mi

Reputation: 814

How to overlap two controls in iOS watch kit using interfacebuilder

I have two button with images and i want to overlap one over another. Is it even possible to do it iOS Watch? Moreover, how to handle background or foreground depth of a WKInterfaceObject in watch programming, like sendViewtoBackground or bringSubViewtoFront, as in normal iOS programming ?

Upvotes: 4

Views: 2612

Answers (4)

Tiago Almeida
Tiago Almeida

Reputation: 14237

WatchOS4+

For Watch OS4+ follow the answer that @DrMickeyLauer gave.

Outdated answer

In the watch you don't have a Z hierarchy.

The max you can do is using a group, that has a background and then have controls over that background.

Another alternative (hack?) is to render all your hierarchy into an UIImage and set it in the watch.

Upvotes: 4

DrMickeyLauer
DrMickeyLauer

Reputation: 4674

This is possible since watchOS4: You can use groups to create overlapping content. Set the group's Layout attribute in the Attribute inspector to "Overlap". The system positions each item in the group based on the item's alignment attributes.

More info @ https://developer.apple.com/documentation/watchkit/wkinterfacegroup

Upvotes: 12

James Bush
James Bush

Reputation: 1527

It took me awhile to figure it out; but, I was able to not only overlap interface elements, but also set the alpha to different values. The attached images of Interface Builder show two things: overlapping objects and different alpha settings for overlapping objects.

Note the difference between the waveform.path SF Symbol in the background of Interface Controller and the play button above it. This effect cannot be achieved any other way using SF Symbols only. If the alpha of one grouped element is reduced, then the alpha for the other elements are reduced. To achieve the effect, I set the background of an overlapping group to solid black and then set the alpha to 0.75 to let about .25 of the waveform.path symbol to show through. Doing so allowed me to overlap the play button without its alpha setting being affected.

The following images show the settings for each element in the layout:

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Upvotes: 0

Cap
Cap

Reputation: 2044

No, you cannot, using iOS normal programming.

You can have two hack:

  • Create a Group, and hide the button you don't want to see. Hide/Unhide your button when you want to change.

  • Manage on the same WKButton: You change the image on the button, and depending the image you modify your logic (Not a very good hack).

Upvotes: 1

Related Questions