如何在不同的屏幕尺寸上获得完全相同的点? [英] How to get exactly the same point on different screen sizes?

问题描述

当用户点击图像的特定区域时，我想调用该动作(转到另一个视图)(黑点):.图像充满整个视图，内容模式为宽高比".问题是，当我在另一屏幕尺寸(例如iPhone 8)上将其设置时，``点击区域''被移动了.我试图通过按钮和约束或使用屏幕分辨率(nativeBounds)进行点转换的UITapGestureRecognizer来解决此问题，但没有任何帮助.

I want to call the action (go to another view) when user tap specific area of image (black dots): . Image fills whole view, content mode is 'Aspect Fit'. The problem is that when I setup it on one screen size (e.g. iPhone 8) on another the 'tap area' is shifted. I've tried to solve this with button and constraints or UITapGestureRecognizer with point conversion using screen resolution (nativeBounds), but nothing helps.

推荐答案

可以使用约束条件将圆的位置与 UIButton s匹配.诀窍是使用约束的 multiplier 来将按钮的宽度/高度和位置缩放到屏幕尺寸.

It is possible to use constraints to match the positions of the circles with UIButtons. The trick is to use the multiplier of the constraint to scale the buttons width/height and position to the screen size.

我将描述如何对一个按钮进行操作，然后您可以对其他按钮重复该操作.我假设图像的宽度为 657 ，高为 918 .如果我的尺寸已颠倒，则需要用实际值代替我以前使用的值.

I'll describe how to do it for one button, and then you can repeat it for the others. I assume the image is 657 wide by 918 high. If I have the dimensions reversed, you'll need to substitute the actual values for the ones I have used.

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

1. Create a UIView to hold the image and buttons. Give this view an aspect ratio constraint with multiplier 657:918 which is width:height. Add the UIImageView to this view and constrain its 4 edges to the edges of the view with 0 offsets. Give this view constraints to the left and right edges of the main view and give it a vertical constraint to place it on the screen.
2. Get the width/height of the circle in the image and the horizontal and vertical positions of the right edge and bottom edge. For example, the topmost circle is 106 x 106 and ends at horizontal position 392 and the bottom is at 338.
3. Set the width of the button equal to the width of the containing view with multiplier 106:657 which is width of circle:width of the image.
4. Set the height of the button equal to the height of the containing view with multiplier 106:918 which is height of circle:height of the image.
5. Set the trailing edge of the button equal to the trailing edge of the containing view with multiplier 392:657 which is end of circle:width of image.
6. Set the bottom edge of the button equal to the bottom edge of the containing view with multiplier 338:918 which is bottom of circle:height of the image.

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

This will allow the button to stay aligned with the circle on all devices. Repeat steps 2 through 6 for the other circles.

这篇关于如何在不同的屏幕尺寸上获得完全相同的点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！