如何在不同的屏幕尺寸上获得完全相同的点？

Question

当用户点击image（黑点）的特定区域时，我想调用该操作（转到另一个视图）：。图像填充整个视图，内容模式为“Aspect Fit”。问题是，当我在另一种屏幕尺寸（例如 iPhone 8）上设置它时，“点击区域”会移动。我尝试通过按钮和约束或使用屏幕分辨率（nativeBounds）进行点转换的 UITapGestureRecognizer 来解决这个问题，但没有任何帮助。

Answer 1

您可以尝试创建自己的 UIView 子类，而不是使用图像，称为 BlackDotsView。

在draw(_rect:) 方法中，您可以绘制线条。要确定线条的开始和结束位置，您需要对视图的宽度和高度进行一些数学运算。您计算所有行的结束位置并创建UIBezierPaths，然后您描边路径。

在BlackDotsView 的初始化器中，您可以添加点作为子视图。要使它们成为圆形，只需将dotView.layer.cornerRadius 设置为点宽度的一半。然后，您可以将UITapGestureRecognizers 添加到点视图中。

您可以通过创建具有称为dotTapped(index:) 的方法的BlackDotsViewDelegate 来遵循委托模式。当一个点被点击时，你会调用委托方法并传递点的索引。

Answer 2

可以使用约束将圆圈的位置与UIButtons 匹配。诀窍是使用约束的multiplier 将按钮的宽度/高度和位置缩放到屏幕大小。

我将描述如何为一个按钮执行此操作，然后您可以为其他按钮重复此操作。我假设图像是 657 宽 918 高。如果我的尺寸颠倒了，您需要用实际值替换我使用的值。

1. 创建一个UIView 来保存图像和按钮。使用multiplier 657:918 为该视图提供宽高比约束，即宽度：高度。将UIImageView 添加到此视图中，并使用0 偏移将其4 条边约束到视图的边上。将此视图约束到主视图的左右边缘，并为其设置垂直约束以将其放置在屏幕上。
2. 获取图像中圆圈的宽度/高度以及右边缘和下边缘的水平和垂直位置。例如，最上面的圆圈是106 x 106，并在水平位置392 结束，底部在338。
3. 将按钮的宽度设置为等于包含视图的宽度，乘数为106:657，即圆的宽度：图像的宽度。
4. 将按钮的高度设置为等于包含视图的高度，乘数为106:918，即圆的高度：图像的高度。
5. 使用乘数 392:657 将按钮的后沿设置为等于包含视图的后沿，即圆的结束：图像的宽度。
6. 将按钮的底部边缘设置为等于包含视图的底部边缘，使用乘数338:918，即圆的底部：图像的高度。

这将使按钮与所有设备上的圆圈保持对齐。对其他圈子重复步骤 2 到 6。