Table Viewでセルを構成するには、Built-In Style、Custom Style

13511 ワード
テキストリンク
今日はtable viewに入るセルをどのように構成するかを書きます.
その前にtableviewとは何かを簡単に理解して、
テーブルビューは、階層データを表すときにナビゲーションコントローラとよく使用されます.
表ビューを作成する際に考慮する4つの要因
UItableView→テーブルの基本外観を管理します.
UITableViewCell→実際のコンテンツを管理します.
UItableViewDataSource->ユニットにアクセスするコンテンツを管理します.
UItableViewDelegate->イベント発生時に発生するイベントを管理します.

UITableViewCell


このうち、今日はUItableViewセルについてご紹介します.
cellでテーブルのrow外観を定義できます.
セルはUItableViewCellオブジェクトによって作成されます.テンプレートの感覚を定義
cellもビューで、ビューにはサブビュー、セル内のlabel、image viewなどが含まれます.
表に入るセルを作成するには、2つの方法があります.
A.アップルが提供する基本ユニットテンプレートの使用->廃棄
B.カスタムユニットを直接定義して使用する

セルの作成順序


A.アップルが提供する基本テンプレートを使う

  • ビュープロファイルまたはビュープロファイルを作成し、インタフェースにビュー、ビューユニットを追加する
    • .
  • 原型機任意指定様式
  • プロパティ・アイテムセルの識別子を指定

    • B.カスタムユニットを定義し、自分のテンプレートを使用する場合


  • ビュー付きプロファイルまたはビュープロファイルを作成し、ビュー付き、ビュー付きユニットをインタフェースに追加します.

  • プロトタイプユニットのスタイルをcustomに指定

  • attributeアイテムでセルの識別子を指定する

  • プロトタイプ・セルの表示(ボタン、ラベル...)制約を追加します


  • Inspectorエントリでセルのクラスを指定


  • 5で指定したクラスを定義します.(UItableViewClassファイルを作成)
    • このとき、4に追加したすべてのボタンまたはラベルをIBOUTに接続します.
    class FoodCell: UITableViewCell {
    @IBOutlet var name : UILabel?
    @IBOutlet var plantDescription : UILabel?
    @IBOutlet var picture : UIImageView?
}
    *カスタムユニットを作成する際の注意事項
  • 静的ビューラベルまたはimageViewなどの構成
    • を使用する.
  • のパフォーマンスを低下させるためにユーザのインタラクションを必要とするビューをできるだけ避ける

    セルの使用


    では、このように定義されたユニットはどこで使われているのでしょうか.
    UItableViewControlは、UItableViewDataSourceのCellForRowAtメソッドで使用する限り、UItableViewDataSourceプロトコルを自動的に採用します.

    A.アップルが提供する基本テンプレートを使う


    UItableViewCellとしてのProperty
    textLabel、detailTextLabel、imageViewの使用
    この場合、先ほどビューで指定したスタイルに基づいてアイテムが設定されます.
    たとえば、スタイルにimageViewがない場合、ここでimageViewを指定すると、ビューに反映されません.
    override func tableView(_ tableView: UITableView, 
             cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   // 다운캐스팅 안해도됨
   let cell = tableView.dequeueReusableCell(withIdentifier: "basicStyle", for: indexPath)

   // For a standard cell, use the UITableViewCell properties.
   cell.textLabel!.text = "Title text"
   cell.imageView!.image = UIImage(named: "bunny")
   return cell
}

    B.カスタムユニットを定義し、自分のテンプレートを使用する場合


    Customユニットを使用する場合、dequeueReusableCellメソッドを使用する場合は、ドロップダウン鋳造を行う必要があります.
    次に、先ほど定義したクラスのIBoutletにデータを割り当てます.
    override func tableView(_ tableView: UITableView, 
             cellForRowAt indexPath: IndexPath) -> UITableViewCell {

   // 여기서 다운캐스팅을 해줘야한다-> 만들어준 커스텀셀을 가져와서 밑에서 그 프로퍼티에 접근하기위해!!!
   let cell = tableView.dequeueReusableCell(withIdentifier: "foodCellType", 
                         for: indexPath) as! FoodCell

   // Fetch the data for the row.
   let theFood = foods[indexPath.row]
        
   // Configure the cell’s contents with data from the fetched object.
   cell.name?.text = theFood.name
   cell.plantDescription?.text = theFood.description
   cell.picture?.image = theFood.picture
        
   return cell
}
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "testIdentifier", for: indexPath) as? CustomTableViewCell else { return CustomTableViewCell() }
        
        //  A 프로토타입 셀의 요소를 쓰는 것 -> 오류
//        cell.textLabel?.text = "안녕하세요 " + asset[indexPath.row] + "행 입니다."
//        cell.imageView?.image = UIImage(systemName: "circle")
        
        // B 수박 추천 방법) 커스텀 셀에서 만들었던 IBOutlet을 쓰는 것 -> 이거하기 위해 다운캐스팅 해주는 듯
        let camperAsset = jsonParser()
        cell.myLabel.text = camperAsset[indexPath.row].nicName
        cell.pointLabel.text = camperAsset[indexPath.row].yagomPoint.description
        
        // C 애플문서에 나온 방법) 커스텀 셀을 안만들고 하는 방법 -> 됨
//        var content = cell.defaultContentConfiguration()
//        content.text = "안녕하세요 " + asset[indexPath.row] + "행 입니다."
//        content.image = UIImage(systemName: "circle")
//
//        cell.contentConfiguration = content
//        cell.showsReorderControl = true
        
        return cell
    }
    カスタムユニットを実装する場合は、B番メソッドのカスタムユニットから接続されたIBOUTを取得することが望ましい.
    前に説明しなかったC次方法は、デフォルトスタイルで実装されたセルを取得し、設定値を変更してセルに再割り当てすることです.この方法もアップルのドキュメントに現れて、いい方法ですね.まず、B号を使いましょう.
    var content = cell.defaultContentConfiguration()

// Configure content.
content.image = UIImage(systemName: "star")
content.text = "Favorites"

// Customize appearance.
content.imageProperties.tintColor = .purple

cell.contentConfiguration = content
    UIListContentConfiguration
    Reference
    Configuring the Cells for Your Table
    [Swift 5]Table Viewの作成(カスタムセルの作成)
    • SpringBootでのcondition注記の使用
    EJB 3.0開発ガイドのタイミングサービス