Xcode如何将按钮添加到图像视图

Question

我会采取什么方法在 xcode 中向图像添加按钮？该应用程序适用于 iPhone 和 iPad，因此它需要以某种方式“响应”。我正在尝试做类似这张图片的事情 has sample image map 我找到了一个使用 Obj-C 的 Github 项目，但我只是想学习应用程序开发并且不知道我在做什么。最终，一旦按下按钮，我将制作一些带有图像和一些信息的弹出窗口。我的应用程序很快。我将不胜感激和提示或指导教程。

Answer 1

您可以在图像视图上使用 UITapGestureRecognizer 来执行与按钮操作相同的操作

第一次放入 viewDidLoad

let tap: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(YourViewControllerName.imgAction))

ImageViewName.addGestureRecognizer(tap)

第二次编写函数来执行操作

func imgAction(){

// perform the action here
}

Answer 2

假设提供的地图是一张平面图像。 这是 sudo，它将向您解释这个概念。 适用于不同屏幕尺寸的 iPhone 或 iPad。

//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)
}

注意：如果您在方向更改时调整 yourUIImageView 的大小，则需要再做一些更改以根据新的纵横比移动按钮。 （如果您需要帮助，请告诉我们）

Answer 3

有两种方法 1. 如图所示，可以给按钮添加图片

1. 您可以在情节提要中放置一个图像，然后在其上方添加一个按钮，然后删除该按钮的文本。最好将这两个东西都添加到 UIView 中，这样您就可以确保按钮正好位于图像上方。添加图像和按钮后，您可以设置 UIView 的约束，并将顶部、左侧、右侧和底部的约束设置为 0

注意：确保按钮始终位于图像上方，以便它可以点击。尝试为情节提要中的按钮着色以确定。