developer tip

Swift로 둘 이상의 사용자 지정 셀이있는 UITableview

copycodes 2020. 8. 21. 07:55
반응형

Swift로 둘 이상의 사용자 지정 셀이있는 UITableview


다른 사용자 정의 tableViewCell과 함께 UITableview를 사용하고 싶습니다. 내 3 개의 셀은 다음과 같습니다.

  • Cell1 : 이미지와 레이블이 있어야합니다.
  • Cell2 : 두 개의 레이블이 있어야합니다.
  • Cell3 : dayPicker가 있어야합니다.

셀에 대한 태그를 코딩하고 싶지 않습니다. Swift에서 어떻게 관리 할 수 ​​있습니까? 모든 셀에 대해 고유 한 클래스를 코딩해야합니까? 하나의 tableviewController를 사용할 수 있습니까? 다른 셀에 데이터를 어떻게 채울 수 있습니까?

iOS 장치의 연락처 앱과 같은 tableView를 생성하고 싶습니다.


먼저 질문에 대한 답변부터 시작하겠습니다.

모든 셀에 대해 고유 한 클래스를 코딩해야합니까? => 예, 그렇게 생각합니다. 적어도 나는 그렇게 할 것입니다.

하나의 tableviewController를 사용할 수 있습니까? => 예, 할 수 있습니다. 그러나 뷰 컨트롤러 내에 테이블 뷰를 가질 수도 있습니다.

다른 셀에 데이터를 어떻게 채울 수 있습니까? => 조건에 따라 다른 셀에 데이터를 채울 수 있습니다. 예를 들어 처음 두 행이 첫 번째 유형의 셀과 같기를 원한다고 가정합니다. 따라서 첫 번째 유형의 셀을 생성 / 재사용하고 데이터를 설정하기 만하면됩니다. 스크린 샷을 보여 주면 더 분명해질 것 같아요.

ViewController 내부의 TableView가있는 예제를 보여 드리겠습니다. 기본 개념을 이해하면 원하는대로 시도하고 수정할 수 있습니다.

1 단계 : 사용자 지정 TableViewCell 3 개를 만듭니다. 이름을 FirstCustomTableViewCell, SecondCustomTableViewCell, ThirdCustomTableViewCell로 지정했습니다. 더 의미있는 이름을 사용해야합니다.

여기에 이미지 설명 입력

2 단계 : Main.storyboard로 이동하여 View Controller 내부에 TableView를 끌어다 놓습니다. 이제 테이블보기를 선택하고 ID 검사기로 이동합니다. "Prototype Cells"를 3으로 설정합니다. 여기서 방금 TableView에 3 가지 종류의 셀이있을 수 있다고 말했습니다.

여기에 이미지 설명 입력

3 단계 : 이제 TableView와 ID 검사기에서 첫 번째 셀을 선택하고 Custom 클래스 필드에 "FirstCustomTableViewCell"을 입력 한 다음 속성 검사기에서 식별자를 "firstCustomCell"로 설정합니다.

여기에 이미지 설명 입력

여기에 이미지 설명 입력

다른 모든 사용자에 대해 동일한 작업을 수행합니다. 사용자 지정 클래스를 각각 "SecondCustomTableViewCell"및 "ThirdCustomTableViewCell"로 설정합니다. 또한 식별자를 secondCustomCell 및 thirdCustomCell로 연속적으로 설정합니다.

4 단계 : 사용자 지정 셀 클래스를 편집하고 필요에 따라 콘센트를 추가합니다. 귀하의 질문에 따라 편집했습니다.

PS : 클래스 정의 아래에 콘센트를 넣어야합니다.

따라서 FirstCustomTableViewCell.swift에서

class FirstCustomTableViewCell: UITableViewCell {

당신은 당신의 라벨과 이미지보기 콘센트를 넣을 것입니다.

 @IBOutlet weak var myImageView: UIImageView!
 @IBOutlet weak var myLabel: UILabel!

SecondCustomTableViewCell.swift에서 다음과 같이 두 개의 레이블을 추가하십시오.

import UIKit

class SecondCustomTableViewCell: UITableViewCell {

    @IBOutlet weak var myLabel_1: UILabel!
    @IBOutlet weak var myLabel_2: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

그리고 ThirdCustomTableViewCell.swift는 다음과 같이 보일 것입니다.

import UIKit

class ThirdCustomTableViewCell: UITableViewCell {

    @IBOutlet weak var dayPicker: UIDatePicker!

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

5 단계 : ViewController에서 TableView에 대한 Outlet을 만들고 스토리 보드에서 연결을 설정합니다. 또한 클래스 정의에 UITableViewDelegate 및 UITableViewDataSource를 프로토콜 목록으로 추가해야합니다. 따라서 클래스 정의는 다음과 같아야합니다.

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

그런 다음 테이블 뷰의 UITableViewDelegate 및 UITableViewDatasource를 컨트롤러에 연결하십시오. 이 시점에서 viewController.swift는 다음과 같이 보일 것입니다.

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

추신 : ViewController 내부에서 TableView가 아닌 ​​TableViewController를 사용한다면이 단계를 건너 뛸 수 있습니다.

6 단계 : Cell 클래스에 따라 이미지 뷰와 레이블을 셀에 끌어다 놓습니다. 그런 다음 스토리 보드에서 콘센트에 대한 연결을 제공합니다.

7 단계 : 이제 뷰 컨트롤러에서 UITableViewDatasource의 필수 메서드를 작성합니다.

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        if indexPath.row == 0 {
            let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "firstCustomCell")
            //set the data here
            return cell
        }
        else if indexPath.row == 1 {
            let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "secondCustomCell")
            //set the data here
            return cell
        }
        else {
            let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "thirdCustomCell")
            //set the data here
            return cell
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

Swift 3.0 + 최소 코드로 업데이트

기본 개념 : 동적 셀 프로토 타입을 사용하여 테이블보기를 만듭니다. 식별자를 할당하고 각 셀 프로토 타입에 대한 사용자 정의 테이블보기 셀 클래스를 만듭니다. 테이블보기의 델리게이트 메서드에서 사용자 지정 셀을 시작하고 표시합니다.

1. 스토리 보드에 셀 만들기

tableView를 뷰 컨트롤러로 드래그하고 프로토 타입 셀을 추가 한 다음 UI 요소를 테이블 뷰 셀에 드롭하고 필요한 경우 제약 조건을 적절하게 추가합니다.

여기에 이미지 설명 입력

2. 사용자 정의 UITableViewCell클래스 만들기

프로젝트에 다음 코드를 추가하십시오. 뷰 컨트롤러 클래스 바로 위에 놓았습니다.

class FirstTableCell: UITableViewCell {
}

class SecondTableCell: UITableViewCell {
}

class ThirdTableCell: UITableViewCell {   
}

3. 셀 프로토 타입에 사용자 정의 클래스 및 식별자 할당

스토리 보드의 각 셀 프로토 타입에 대해 2 단계에서 만든 사용자 지정 클래스를 할당 한 다음 고유 식별자를 입력합니다.

여기에 이미지 설명 입력

4. UI 요소를 신속한 코드에 연결

컨트롤 드래그 테이블 뷰를 뷰 컨트롤러 클래스에 연결합니다. 1 단계에서 셀 프로토 타입에 추가되는 UI 요소를 제어하고 해당 테이블보기 셀 클래스에 연결하십시오.

여기에 이미지 설명 입력

5. 컨트롤러보기 및 테이블보기 제어를위한 코드 추가

뷰 컨트롤러가 테이블 뷰 델리게이트를 따르도록합니다.

class YourViewController: UIViewController, UITableViewDataSource, UITableViewDelegate

에서 viewDidLoad테이블 뷰의 델리게이트 및 데이터 소스를 설정합니다.

override func viewDidLoad() {
    super.viewDidLoad()

    self.tableView.dataSource = self
    self.tableView.delegate = self

}

마지막으로 최소 요구 사항에 따라 테이블보기를 제어하는 ​​두 가지 대리자 메서드를 추가합니다.

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 3
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if indexPath.row == 0 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "firstTableCell") as! FirstTableCell
        // Set up cell.label
        return cell
    } else if indexPath.row == 1 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "secondTableCell") as! SecondTableCell
        // Set up cell.button
        return cell
    } else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "thirdTableCell") as! ThirdTableCell
        // Set up cell.textField
        return cell
    }
}

6. 한번 시도해보세요 :)

여기에 이미지 설명 입력


The above answers are the best answers, but there are TONS of reasons to get this issue. Here is another potential solution for anyone with this problem:

My problem was that I was segueing to the ViewController class and not the storyboard view. So my reference to the storyboard cell was meaningless, since the storyboard wasn't being used.

I was doing this:

let viewControllerB = SubViewController()
viewControllerB.passedData = diseases[indexPath.row].name
navigationController?.pushViewController(viewControllerB, animated: true)

And I needed to do something like this:

let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle:nil)
let nextViewController = storyBoard.instantiateViewController(withIdentifier: "SubViewStoryboardController") as! SubViewController
nextViewController.passedData = diseases[indexPath.row].name
self.present(nextViewController, animated:true, completion:nil)

Hope this helps someone.


UITableViewController is inheriting UIViewController that already has UITableviewDataSource & UITableviewDelegate mapped on itself.

You might subclass UITableViewController or use a TableView inside your ViewController. After that you must implement required methods(cellForRowAtIndexPath and numberOfRowsInSection) which are declared in the UITableviewDataSource.

Also in storyboard, you need to create cell prototypes with unique Id.

(예 : 제목, 부제)와 함께 기본 유형의 셀이 있습니다. 특별한 구성이 필요하지 않은 경우에도 사용할 수 있습니다.

따라서 선택기의 경우 사용자 지정 셀을 만들어야합니다. UITableViewCell날짜 선택기를 포함하는 필요한 사용자 지정 클래스를 만들고 델리게이트를 사용하여 원하는 결과를 ViewController.

참고 URL : https://stackoverflow.com/questions/30774671/uitableview-with-more-than-one-custom-cells-with-swift

반응형