소개

아마도 tableview라면, 보통의 방법만으로 갈 수 있는데,
왜 일부러 번거로운 xib을 사용합니까?
어떤 타이밍에 사용합니까? 라고 생각하는 분이 있다고 생각합니다.

심플한 화면이라면 보통의 방법으로 괜찮다고 생각합니다만,
같은 Controller 화면에 복수의 복잡한 메인 화면이 있을 때, 이렇게 각 화면을 파트화해, 각각 조립하는 것이 알기 쉽고 향후의 보수성, 확장성에 친절할지도 모르기 때문에, 참고를!

절차

Xib 파일 만들기

Xib 화면에 UITableView 추가

사용자 정의 클래스 파일 만들기

셀용 xib 파일, swift 파일 만들기

컨트롤러 화면의 UIView 클래스를 정의 된 클래스로 설정합니다.

viewDidLoad에서 셀을 tableview에 등록하는 처리를 넣는다

각 스텝에 세세한 수고가 있어 빠져서는 안 되므로, 이하 설명하겠습니다.

Xib 파일 만들기

File -> New -> File...로 Xib 파일 만들기

Xib 화면에 UITableView 추가

Xib view에 UITableView 넣기

커스터마이즈 클래스 파일 만들기

File -> New -> File... -> Swift File 선택
파일을 작성해, 커스터마이즈 class를 정의한 다음, xib 파일의 File's Owner의 class를 정의한 class로 설정해, 이하와 같이 처리를 넣는다

test.swift

import Foundation
import UIKit

class Test: UIView{
    //xibファイルに追加したUItableViewをswiftファイルと連結するようにする
    @IBOutlet weak var testTableView: UITableView!

    // コードから呼び出す際に使用される
    override init(frame: CGRect) {
        super.init(frame: frame)
        loadNib()
    }

    // Storyboardから利用する際に使用される
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        loadNib()
    }

    // 上記どちらのinitからも使用される共通関数で、xibファイルを呼び出す。
    func loadNib() {
        // 第1引数のnameには、xibファイル名
        // ownerはself固定
        // optionsはここではnil
        let view = Bundle.main.loadNibNamed("test", owner: self, options: nil)?.first as! UIView
        view.frame = self.bounds
        self.addSubview(view)
    }
}

셀용 xib 파일, swift 파일 만들기

File -> New -> Cocoa Touch Class를 선택하고, "Also create XIB file"에 체크를 넣어, xib 파일, swift 파일 양쪽 모두 만들 수 있다.

만든 후에, 여러 UI 컴포네이트를 넣어, Identifier를 네이밍한다

이 경우 두 개의 레이블을 넣었으므로 swift 파일과 연결할 수 있습니다.

testTableViewCell.swift

import UIKit

class testTableViewCell: UITableViewCell {

    //swiftファイルと連結するようにする
    @IBOutlet weak var testLb1: UILabel!
    @IBOutlet weak var testLb2: UILabel!


    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

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

        // Configure the view for the selected state
    }

}

정의한 class를 가지는 UIView를 controller 화면에 넣는다

UIView를 넣고 Custom Class를 Test로 만듭니다.

viewDidLoad에 셀을 tableview에 등록하는 처리를 넣는다

등록하기 전에 추가한 UIView를 swift 파일과 연결하도록 합니다.

ViewController.swift

    @IBOutlet weak var testView: Test!

연결 후 viewDidLoad에서 셀을 tableview에 등록

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var testView: Test!

    override func viewDidLoad() {
        super.viewDidLoad()
        testView.testTableView.register(UINib(nibName: "testTableViewCell", bundle: nil), forCellReuseIdentifier: "testCell")
    }

}

등록한 후에는 기존의 TableView 추가 방법과 거의 동일합니다.
① UITableViewDelegate , UITableViewDataSource 를 ViewController에 구현하고 dataSource
ViewController.swift

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
    override func viewDidLoad() {
        super.viewDidLoad()
        testView.testTableView.dataSource = self
        testView.testTableView.delegate = self
        testView.testTableView.register(UINib(nibName: "testTableViewCell", bundle: nil), forCellReuseIdentifier: "testCell")
    }
...

② delegate , func tableView(_ tableView:numberOfRowsInSection section:) -> Int 구현

ViewController.swift

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    //適当に戻す
    return 10
    }

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "testCell", for: indexPath) as? testTableViewCell
    else { return UITableViewCell() }
    cell.testLb1.text = "test1"
    cell.testLb2.text = "test2"
    return cell
    }

이것으로 완성!

끝에

메인 기능만 설명했습니다, 세세한 레이 아웃의 처리는 여기에서 생략하겠습니다.
tableview뿐만 아니라 다른 다양한 UIView도이 방법으로 구현할 수 있다고 생각합니다.
이것으로 설명이 끝나고 싶습니다, 뭔가 빠진 부분이 있으면 코멘트 주시면 좋겠습니다.