在 watchOS 故事板中叠加图像并自定义 x,y 位置

Question

我想复制这个设计模型并在生产中使用它。

iOS 具有用于在 Z 轴上排列的 Z 层次结构，但它在 watchOS 中呈灰色显示。我想创建一个个人资料头像的叠加层，就像这个 Instagram 原型一样，其中只有一半的头像位于主图像上。

当然，我希望将来自服务器的所有个人资料图像放置在小圆形 imagview 中，该 imagview 位于流中照片的顶部。

Answer 1

弄清楚了。这需要一些修补。属性检查器中的组布局重叠选项按广告所示工作。我的案例很独特，因为我不仅想要一个覆盖层，而且还想要像 Instagram 原型一样只让一半的头像重叠。

1. 将组布局重叠属性设置为根组，因为必须完成此操作才能工作。

2. 接下来将重叠属性应用于头像组，因为它是我们想要重叠在猫组之上的组。

3. 使用猫组的底部插图将头像向下推。相应地进行调整。当然，如果您想要 50% 的悬垂，底部插入值应该是头像高度的一半。

4. 猫组不需要重叠属性。

5. 圆形头像不是圆形 Photoshop 元素。我只是简单地调整了头像组的半径使其变圆。

注意：使用 Overlap 时，您会收到来自 Xcode 的警告。

Interface.storyboard：通知：不鼓励的配置：在 watchOS 4.0 之前使用时，重叠布局会回落到垂直