问题
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.
回答1:
It is possible to use constraints to match the positions of the circles with UIButton
s. The trick is to use the multiplier
of the constraint to scale the buttons width/height and position to the screen size.
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.
- Create a
UIView
to hold the image and buttons. Give this view an aspect ratio constraint withmultiplier
657:918
which is width:height. Add theUIImageView
to this view and constrain its 4 edges to the edges of the view with0
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. - 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 position392
and the bottom is at338
. - 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. - 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. - 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. - 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.
This will allow the button to stay aligned with the circle on all devices. Repeat steps 2 through 6 for the other circles.
回答2:
Instead of using an image, you can try creating your own UIView
subclass called BlackDotsView
.
In the draw(_rect:)
method, you can draw the lines. To determine where the lines start and end, you need to do some maths with the view's width and height. You calculate where all the lines end and create UIBezierPath
s and then you stroke the paths.
In the initializer of BlackDotsView
, you can add the dots as subviews. To make them circular, just set dotView.layer.cornerRadius
to half the dot's width. Then, you can add UITapGestureRecognizer
s to the dot views.
You can follow the delegate pattern by creating a BlackDotsViewDelegate
that has a method called dotTapped(index:)
. When a dot is tapped, you would call the delegate method and pass the index of the dot.
来源:https://stackoverflow.com/questions/51365374/how-to-get-exactly-the-same-point-on-different-screen-sizes