Swift 3-如何在UICollectionViewCell中获取按钮 [英] Swift 3- How to get button in UICollectionViewCell work

问题描述

我正在尝试在单元格中实现编辑按钮。

I am trying to implement an Edit button inside a cell.

请参考图片：

Please refer to image:

到目前为止我做了什么：

What I done so far:

MainController：

MainController:

class MainController: UICollectionViewController, UICollectionViewDelegateFlowLayout  {
  let imgCellId = "imgCellId"

  override func viewDidLoad() {
    collectionView?.backgroundColor = .white
    collectionView?.register(ImgItemCell.self, forCellWithReuseIdentifier: imgCellId)
  }

  override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {   
      let cell = collectionView.dequeueReusableCell(withReuseIdentifier: imgCellId, for: indexPath) as! ImgItemCell
      cell.editButton.addTarget(self, action: #selector(buttonPressed), for: .touchUpInside)

      return cell
  }

  func buttonPressed(){
    print("buttonPressed !")
  }

}

ImgItemCell：

ImgItemCell:

import Material

class ImgItemCell: UICollectionViewCell{

   override init(frame: CGRect){
       super.init(frame: frame)

       setupViews()
   }
   ...
   let editButton: RaisedButton = {
       let button = RaisedButton(title: "Edit", titleColor: .black) return button
   }()

  func setupViews(){
     ...
     addSubview(editButton)
     ...
  }

}

结果：该按钮无法点击。单击按钮时不会打印日志。

Result: The button is not clickable. No log is printed when clicking on the button.

在android中，我通过按钮的 OnClickListener 完成此操作为每一行执行操作。我如何在Swift 3中做同样的事情？

In android, I have done this by OnClickListener of button to perform action for each row. How can I do the same in Swift 3?

解决方案：（这对我有用）

大家好，谢谢你提出的所有建议，他们更不用说我提出解决方案了。

Hi all thank you for all suggestions, they’re more less the hint for me to come to the solution.

我的问题的根本原因是查看层次结构（如@DatForis指出）

The root cause of my problem is view hierarchy (as @DatForis pointed out)

说明：我想要一个单元格包含图像和按钮布局，以便我有如下视图层次结构

Explanation: I want a cell contains image and a layout of buttons so that I had view hierarchy as below

override func setupViews() {
    super.setupViews()

    addSubview(imgView)
    addSubview(buttonLayout)
    buttonLayout.addSubView(buttonList)
            buttonList.addSubview(editButton)
            buttonList.addSubview(shareButton)
  }

此层次结构以某种方式阻止了按钮的点击事件。

this hierarchy somehow blocked the click event of button.

因此，我改变了一点层次结构

Therefore, I changed a bit in hierarchy

  override func setupViews() {
    super.setupViews()

    addSubview(imgView)
    addSubview(buttonLayout)
            buttonLayout.addSubview(editButton)
            buttonLayout.addSubview(shareButton)
   }

和BAM！它就像一个魅力。

and BAM ! it worked like a charm.

事实上，我需要一个正确的解释，说明层次结构对子视图的影响。

In fact, I need a proper explanation about why the hierarchy impact to children view.

顺便说一句，我认为这里的大多数回复都是可行的解决方案，但我选择了@DonMag作为最终答案，因为它干净清晰，并且有一个很酷的回调控制器。

By the way, I think most replies here are workable solution, but I selected @DonMag as final answer, because it’s clean and clear with a cool callback to Controller.

但同样，我的根问题来自视图层次结构。

But again, my root problem is from view hierarchy.

推荐答案

一个非常可靠和灵活的模式是分配一个回调关闭你的牢房。将您的按钮操作处理程序放在单元格中，并让它回调到视图控制器。

A very reliable and flexible pattern is to assign a "Callback Closure" to your cell. Put your button action handler inside the cell, and have it "call back" to the view controller.

这是一个基本示例（您应该能够实现它您的自定义单元格没有问题）：

Here is a basic example (you should be able to implement it with your custom cell with no problem):

//
//  CViewWithButtonCollectionViewController.swift
//  SWTemp2
//
//  Created by Don Mag on 6/5/17.
//  Copyright © 2017 DonMag. All rights reserved.
//

import UIKit

private let reuseIdentifier = "ImgItemCell"

class ImgItemCell: UICollectionViewCell {

    // this will be our "call back" action
    var btnTapAction : (()->())?

    override init(frame: CGRect){
        super.init(frame: frame)
        setupViews()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupViews()
    }

    let editButton: UIButton = {
        let button = UIButton(type: UIButtonType.system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.backgroundColor = .white
        button.setTitle("Edit", for: .normal)
        return button
    }()

    func setupViews(){

        // add a button
        addSubview(editButton)

        editButton.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
        editButton.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true

        // add the touchUpInside target
        editButton.addTarget(self, action: #selector(btnTapped), for: .touchUpInside)

    }

    func btnTapped() {
        print("Tapped!")

        // use our "call back" action to tell the controller the button was tapped
        btnTapAction?()
    }

}

class CViewWithButtonCollectionViewController: UICollectionViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        if let layout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
            layout.itemSize = CGSize(width: 300, height: 100)
        }

    }

    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! ImgItemCell

        cell.backgroundColor = .red

        // set a "Callback Closure" in the cell
        cell.btnTapAction = {
            () in
            print("Edit tapped in cell", indexPath)
            // start your edit process here...
        }

        return cell
    }

}

这篇关于Swift 3-如何在UICollectionViewCell中获取按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！