首页 > 解决方案 > 在 watchOS 故事板中叠加图像并自定义 x、y 位置

问题描述

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

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

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

在此处输入图像描述

标签: swiftwatchos-2xcode-storyboard

解决方案


弄清楚了。这需要一些修修补补。属性检查器中的组布局重叠选项按宣传的方式工作。我的案例是独一无二的,因为我不仅想要一个叠加层,而且我还想要像 Instagram 原型中那样只重叠一半的头像。

  1. 将组布局重叠属性设置为根组,因为必须这样做或这样做才能工作。

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

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

  4. cat 组不需要重叠属性

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

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

Interface.storyboard:注意:不鼓励配置:在 watchOS 4.0 之前使用时,重叠布局回退到垂直

在此处输入图像描述

在此处输入图像描述 在此处输入图像描述


推荐阅读