Overlay images and customize x,y position in the watchOS storyboard

Question

I want to duplicate this design mockup and use it in production.

iOS has Z-hierarchy for arranging on Z axis, but it's greyed out in watchOS. I want to create an overlay of a profile avatar like this Instagram prototype where only half of the avatar is over the main image.

Naturally I would like all profile images from the server to be placed in the small round imagview which goes on top of the photos in the stream.

Answer 1

Figured it out. It takes some tinkering. The group layout overlap option in the Attribute Inspector works as advertised. My case was unique because I not only wanted an overlay but I also wanted only half of the avatar to overlap as in the Instagram prototype.

1. Set the group layout overlap attribute to the root group since that has to be done or this to work.

2. Next apply the overlap attribute to the avatar group since it is the group we want to overlap on top of the cat group.

3. Use bottom insets on the cat group to push the avatar down. Adjust accordingly. Naturally, if you want a 50% overhang the bottom inset value should be half of the avatar height.

4. The cat group does not need the overlap attribute.

5. The circular avatar is not a circular Photoshop element. I simply adjusted the radius of the avatar group to make it round.

Note: You'll get a warning from Xcode when using Overlap.

Interface.storyboard: notice: Discouraged Configuration: Overlap layout falls back to vertical when used before watchOS 4.0