Xcode how to add buttons to an image view - swift

Question

What approach would I take to add buttons to an image in xcode? The app is for iPhones and iPads so it needs to be "responsive" somehow. I am trying to do something like this image has sample image map I found a Github project that uses Obj-C, but I am just trying to learn app development and have no idea what I am doing. Eventually, once the button is pressed I will make some kind of popup with an image and a little info. My app is in swift. I would appreciate and tips or direction to tutorials.

Answer 1

Assuming that provided Map is one flat image.
This is sudo and it will explain you the concept.
Works for both iPhone or iPad on different screen sizes.
//make sure you have the correct size of original image.
let originalImageSize: CGSize = CGSize(width: 1000, height: 500)
//Lets create a struct to have the basic information we need
struct Item {
var id: Int
var name: String
var x: Double
var y: Double
}
//Creating some sample button on the map
//x and y are based on the original Image size
let buttonsInfo : [Item] = [
Item(id: 1, name: "France", x: 10, y: 10),
Item(id: 2, name: "Poland", x: 20, y: 30),
Item(id: 3, name: "Location A", x: 50, y: 100),
Item(id: 4, name: "Location B", x: 300, y: 300)
]
//sudo code : plug it with your project real image code
let yourUIImageView = UIImageView(image: UIImage())
//after the image is rendered on UI get the real dimensions
//Size of the Image that is rendered on UI in proper aspect ratio
let renderedImageSize: CGSize = CGSize(width: 500, height: 250)
for item in buttonsInfo {
let button = UIButton()
button.tag = item.id
//
button.frame = CGRect(x: Double(renderedImageSize.width/originalImageSize.width)*item.x,
y: Double(renderedImageSize.height/originalImageSize.height)*item.y,
width: 50, height: 50)
button.backgroundColor = UIColor.red
button.setTitle("Name your Button ", for: .normal)
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
//yourUIImageView is actual view in your code
yourUIImageView.addSubview(button)
}
func buttonAction(sender: UIButton!) {
let item:Item = buttonsInfo.filter{$0.id == sender.tag}
print("Button tapped")
print(item)
}
Note: if you are resizing your yourUIImageView on orientation changes, then you need to do few more changes to move the buttons based on the new aspect ratio. (let us know if you need help)

Answer 2

You can use UITapGestureRecognizer over the image view to perform same as button action
1st Put in viewDidLoad
let tap: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(YourViewControllerName.imgAction))
ImageViewName.addGestureRecognizer(tap)
2nd write function to perform action
func imgAction(){
// perform the action here
}

Answer 3

There are two approaches
1. You can add image to a button as shown in the picture
You can place an image in the storyboard and then add a button above it, then remove the text of the button. It's better to add both these things in a UIView so you can make sure that the button is exactly above the image. You can set the constraints for the UIView after that add the image and button and set the constraints of top, left, right and bottom to 0
Note: Make sure that the button is always above the image so it's clickable. Try to color the button in storyboard in order to be certain.