如何添加 UIView 手勢 - 以編程方式 UIView

Question

我已經搜索了很多關於在 UIView 被點擊時添加手勢的信息。 有很多解決方案，但沒有一個對我有用。

我以編程方式制作了 UIView class 並在不同的類中使用視圖。

這是我的 UIView 的 class：

class 支付服務查看：UIView {

private let views: UIView = {
    let view = UIView()
    view.backgroundColor = .white
    // view.layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner]
    view.layer.borderColor = UIColor.gray.cgColor
    view.layer.shadowOpacity = 0.3
    view.layer.shadowColor = UIColor.gray.cgColor
    view.layer.shadowRadius = 10
    view.layer.borderWidth = 0.1
    view.layer.cornerRadius = 20
    view.isUserInteractionEnabled = true
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

private let titleLbl: UILabel = {
    var label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.textAlignment = .center
    label.textColor = UIColor.black
    label.font = UIFont(name: AppFontName.circularStdRegular, size: 18)
    label.clipsToBounds = true
    return label
}()

private let subLbl: UILabel = {
    var label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.textAlignment = .center
    label.textColor = UIColor.gray
    label.numberOfLines = 0
    label.textAlignment = .left
    label.font = UIFont(name: AppFontName.robotoRegular, size: 15)
    label.clipsToBounds = true
    return label
}()

private let image: UIImageView = {
    let imageView = UIImageView()
    imageView.contentMode = .scaleAspectFit
    imageView.clipsToBounds = true
    imageView.translatesAutoresizingMaskIntoConstraints = false
    return imageView
}()

private let btnImage: UIImageView = {
    let imageView = UIImageView()
    imageView.contentMode = .scaleAspectFit
    imageView.clipsToBounds = true
    imageView.image = UIImage(named: IconName.chevron_down)?.transform(withNewColor: UIColor.btnGray)
    imageView.translatesAutoresizingMaskIntoConstraints = false
    return imageView
}()

init(titleLabel: String, subTitleLabel: String, imageName: String) {
    super.init(frame: CGRect.zero)
    self.addSubview(views)
    self.views.addSubview(btnImage)
    self.views.addSubview(titleLbl)
    self.views.addSubview(image)
    self.views.addSubview(subLbl)
    
    titleLbl.text = titleLabel
    image.image = UIImage(named: imageName)
    subLbl.text = subTitleLabel
    
    setupConstraints()
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

private func setupConstraints() {
    
    self.views.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
    self.views.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
    self.views.heightAnchor.constraint(equalToConstant: 150).isActive = true
    self.views.widthAnchor.constraint(equalToConstant: 320).isActive = true
    
    self.image.centerYAnchor.constraint(equalTo: self.views.centerYAnchor).isActive = true
    self.image.leadingAnchor.constraint(equalTo: self.views.leadingAnchor, constant: 15).isActive = true
    self.image.widthAnchor.constraint(equalToConstant: 30).isActive = true
    self.image.heightAnchor.constraint(equalToConstant: 30).isActive = true
    
    self.titleLbl.centerYAnchor.constraint(equalTo: self.views.centerYAnchor, constant: -35).isActive = true
    self.titleLbl.leadingAnchor.constraint(equalTo: image.trailingAnchor, constant: 15).isActive = true
    
    self.subLbl.topAnchor.constraint(equalTo: titleLbl.bottomAnchor, constant: 5).isActive = true
    self.subLbl.leadingAnchor.constraint(equalTo: image.trailingAnchor, constant: 15).isActive = true
    self.subLbl.trailingAnchor.constraint(equalTo: btnImage.leadingAnchor, constant: -15).isActive = true
    
    btnImage.topAnchor.constraint(equalTo: views.topAnchor, constant: 55).isActive = true
    btnImage.rightAnchor.constraint(equalTo: views.rightAnchor, constant: -10).isActive = true
    btnImage.heightAnchor.constraint(equalToConstant: 10).isActive = true
    
}

}

現在我在 PaymentServicesViewController 中使用這個 UIView class

class PaymentServicesViewController: UIViewController {

private (set) lazy var headerView: HeaderView = { [unowned self] in
    let view = HeaderView.init(titleLbl: Headings.paymentService, closeAction: {
        self.navigationController?.popViewController(animated: true)
    }, nextAction: {
        print("next")
    }, previousAction: {
        self.navigationController?.popViewController(animated: true)
    })
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

private let fundTransferView: PaymentServiceView = {
    
    let view = PaymentServiceView(titleLabel: Headings.fundTransfer, subTitleLabel: Description.fundTransferDecription , imageName: IconName.fundImage )
    view.isUserInteractionEnabled = true
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

private let subscriptionView: PaymentServiceView = {

    let view = PaymentServiceView(titleLabel: Headings.subscribe, subTitleLabel: Description.subscriptionDescription, imageName: IconName.subImage )
    view.isUserInteractionEnabled = true
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

private let billPaymentView: PaymentServiceView = {
    let view = PaymentServiceView(titleLabel: Headings.billPayment, subTitleLabel: Description.billPaymentDescription , imageName: IconName.billImage )
    view.isUserInteractionEnabled = true
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .gray2

    let fundtrasnferGesture = UITapGestureRecognizer(target: self, action: #selector(fundTranferTapped))
    fundTransferView.isUserInteractionEnabled = true
    self.fundTransferView.addGestureRecognizer(fundtrasnferGesture)
    
    let subscribeGesture = UITapGestureRecognizer(target: self, action: #selector(subscribeTapped))
    subscriptionView.isUserInteractionEnabled = true
    self.subscriptionView.addGestureRecognizer(subscribeGesture)

    let billPaymentGesture = UITapGestureRecognizer(target: self, action: #selector(billPaymentTapped))
    fundTransferView.isUserInteractionEnabled = true
    self.billPaymentView.addGestureRecognizer(billPaymentGesture)
    
    view.addSubview(headerView)
    view.addSubview(subscriptionView)
    view.addSubview(fundTransferView)
    view.addSubview(billPaymentView)
    setupConstraint()
}

@objc func fundTranferTapped(sender: UITapGestureRecognizer) {
    print("FundTransfer Tapped.")
}

@objc func subscribeTapped(sender: UITapGestureRecognizer) {
    print("Subscribe Tapped.")
}

@objc func billPaymentTapped(sender: UITapGestureRecognizer) {
    print("BillPayment Tapped.")
}


private func setupConstraint() {
    
    headerView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    headerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    headerView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    headerView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    
    subscriptionView.trailingAnchor.constraint(equalTo: fundTransferView.trailingAnchor, constant: 0).isActive = true
    subscriptionView.leadingAnchor.constraint(equalTo: fundTransferView.leadingAnchor, constant: 0).isActive = true
    subscriptionView.bottomAnchor.constraint(equalTo: fundTransferView.topAnchor, constant: -130).isActive = true
    
    fundTransferView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0).isActive = true
    fundTransferView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0).isActive = true
    
    billPaymentView.leadingAnchor.constraint(equalTo: fundTransferView.leadingAnchor, constant: 0).isActive = true
    billPaymentView.trailingAnchor.constraint(equalTo: fundTransferView.trailingAnchor).isActive = true
    billPaymentView.topAnchor.constraint(equalTo: fundTransferView.bottomAnchor, constant: 130).isActive = true
    
}

}

我知道我正在做一個小錯誤，但不確定。 幫助將不勝感激，謝謝。

Answer 1

您缺少一些約束...

如果在viewDidLoad()的末尾添加：

    subscriptionView.clipsToBounds = true
    fundTransferView.clipsToBounds = true
    billPaymentView.clipsToBounds = true

您會看到視圖“消失”：

因為它們沒有 Width 或 Height 約束（所以它們的大小是.zero ）。

在PaymentServiceView class 的setupConstraints()中，添加以下兩行：

    self.widthAnchor.constraint(equalTo: self.views.widthAnchor).isActive = true
    self.heightAnchor.constraint(equalTo: self.views.heightAnchor).isActive = true

現在， PaymentServiceView的寬度和高度將與self.views視圖相同。

但是，現在視圖具有高度：

你的布局需要調整。

將.clipsToBounds回false （刪除那些添加的線），這樣陰影就不會被剪裁，並在 controller 中更改這些約束（根據自己的喜好調整15和-15 ）：

    //subscriptionView.bottomAnchor.constraint(equalTo: fundTransferView.topAnchor, constant: -130).isActive = true
    subscriptionView.bottomAnchor.constraint(equalTo: fundTransferView.topAnchor, constant: 15).isActive = true

    //billPaymentView.topAnchor.constraint(equalTo: fundTransferView.bottomAnchor, constant: 130).isActive = true
    billPaymentView.topAnchor.constraint(equalTo: fundTransferView.bottomAnchor, constant: -15).isActive = true

我們得到：

現在，因為視圖有大小，點擊手勢將起作用。