基本的なTable Viewの作成

表ビュー

各セルにラベルとボタンがあるテーブルビューを作成します.
表ビューを作成するには、次の2つの方法があります.

tableviewインスタンスをビューコンテキストに追加するビュー

テーブルビューに加えて、他のビューも管理できます

テーブルビューの位置とサイズを調整可能

開発者は、データソースと委任先を設定する義務がある

UITableViewControllerの使用→推奨

テーブルビューはビュー全体を占め、そのサイズを調整できません

tableviewcontrollerはdatasourceとdelegate(?)

→一般的にはtableviewcontrollerを使用するのが望ましい.しかし、この授業ではまず1日の状況を調べてみましょう.(2番は次の位置で)
また、Custom UItableViewCellクラスを作成し、UItableViewDataSourceのCellForRowAtメソッドのDequeueReusableCell()インポートユニットを作成します.
(次のプロンプトでは、セルスタイルを設定する方法で試します)

1.シーケンスイメージボードの設定

Table View

Table View Cell

Label

Button
ドラッグ＆ドロップ

2.カスタムビューの作成

カスタム表ビューユニットタイプを作成します.
どうして?表ビューですべてのセルを個別に設定するのは難しいです.

1)新しいFile-Cocoa Touch Class-UItableViewタイプのクラスを作成する
2)LabelをドラッグしてIBOUTLETに接続する
3)Labelのデフォルト設定に使用するconfigure()メソッドを定義し、awakeFromNib()で実行

class TableViewCell: UITableViewCell {
    
    @IBOutlet weak var label: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        configure()
    }

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

        // Configure the view for the selected state
    }
    
    func configure() {
        label.text = "텍스트"
        label.textColor = .brown
        label.font = .boldSystemFont(ofSize: 12)
    }
    
    @IBAction func button(_ sender: UIButton) {
        print("잘 눌렸다.")
    }
}

3.Table View Cellの識別子の設定

後で、ViewControllerからUItableViewDataSourceプロトコルを使用して実装する必要がある方法でTableビューのセルを取得する場合(4-2).
は、現在実装されているこの特定のカスタムタイプのユニットを識別して入力するために命名されたものです.

4.ViewControlの設定

1)テープビューをドラッグしiBoutletに接続する
2)UItableViewDataSourceプロトコルを使用して実装する必要がある2つの方法:numberOfRowsInSection,cellForRowAt->いずれにしてもtable viewを描くには、基本的にどのくらいの行があるかを知る必要があるので、実現しなければなりません

*UItableViewDataSourceとは何ですか?
:table viewがviewconに何行とsectionがあるかを尋ねると、ロールのプロトコルが定義されます.

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self // 테이블뷰에게 뷰컨이 데이터소스를 가진다고 알려주기
        tableView.delegate = self
    }
}

extension ViewController: UITableViewDataSource {
       
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //요기서 아까 커스텀 셀 뷰에서 준 identifier을 쓴다
        //여기서 쓸 셀은 아까 만들어준 zoe라는 커스텀 셀이야~~~
        let cell = tableView.dequeueReusableCell(withIdentifier: "zoe", for: indexPath) as! TableViewCell
            
        return cell
    }

}

3)UItableViewDelegateプロトコルを使用した関連メソッドの実装(必須ではない)-didSelectRowAtセルをクリックして文字列「セルの選択」を出力します.

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("셀 선택")
        //이거 안하면 클릭했을 때 변한 셀의 색이 그대로 남아있음
        tableView.deselectRow(at: indexPath, animated: true)
    }
}

4)ViewコントローラをTable Viewに割り当てるデータソース構成
5)ViewコントローラをTable Viewに割り当てる委任プロセス

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
    }
}

結果

その他の実施

Section実装(+部分名称が異なる)

実装異なるユニット名

extension ViewController: UITableViewDataSource {
    
    //Section을 몇개 구현할건지
    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }
    
    //Section 이름은 뭘로 할건지
   func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {

       // 섹션 이름을 다르게 주고싶을 때
       if section == 0 {
           return "첫번째"
       } else {
           return "두번째"
       }
   }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "zoe", for: indexPath) as! TableViewCell
        
        //셀 이름을 다르게 주고싶을 때
       let array = ["1", "2", "3", "4", "5"]
       cell.label.text = array[indexPath.row]
       print(indexPath)
        
        return cell
    }

}

セルをクリックすると背景色が青に変わりますself.selectionStyle = .blue機能しない
UIViewタイプインスタンスの色を設定し、セルのSelectedBackgroundView

として指定します.

class TableViewCell: UITableViewCell {
    
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var button: UIButton!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        configure()
        
        //셀클릭시 나오는 배경색 설정
        let backgroundView = UIView()
        backgroundView.backgroundColor = .blue
        self.selectedBackgroundView = backgroundView
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
    
    func configure() {
        label.text = "텍스트"
        label.textColor = .brown
        label.font = .boldSystemFont(ofSize: 12)
        self.selectionStyle = .default
        
        button.titleLabel?.text = "버튼"
    }
    
    @IBAction func button(_ sender: UIButton) {
        print("잘 눌렸다.")
    }
}

結果