1. ホーム
  2. swift

[解決済み] Swiftで複数のカスタムセルを持つUITableview

2022-08-22 18:01:22

質問

UITableviewに異なるカスタムtableViewCellを使用したい。私の3つのセルは次のとおりです。

  • セル1:画像とラベルを持つ必要があります。
  • Cell2:2つのラベルが必要です。
  • Cell3:デイピッカーがあるはずです。

セルのタグをコーディングしたくありません。どのように私はSwiftでこれを管理することができます。私はすべてのセルのために独自のクラスをコーディングする必要がありますか?1つのtableviewControllerを使用することはできますか?どのようにして、異なるセルにデータを入力することができますか?

iOSデバイスの連絡先アプリのようなtableViewを生成したいのですが、どうすればよいでしょうか?

どのように解決するのですか?

まず、ご質問にお答えすることから始めましょう。

すべてのセルに対して独自のクラスをコーディングする必要があるのでしょうか => はい、そう思います。少なくとも、私ならそのようにします。

tableviewControllerは1つでいいのでしょうか=> はい、できます。しかし、View Controllerの中にテーブルビューを持つこともできます。

異なるセルにデータを入力するにはどうすればよいですか => 条件によっては、異なるセルにデータを入力することができます。例えば、最初の2行を、最初のタイプのセルのようにしたいとします。そこで、最初のタイプのセルを作成/再利用して、そのデータを設定するだけです。スクリーンショットをお見せすれば、もっとわかりやすいと思います。

ViewControllerの中にTableViewがある例をあげます。主なコンセプトを理解したら、あとは好きなように変更してみてください。

ステップ1:カスタムTableViewCellを3つ作成します。FirstCustomTableViewCell、SecondCustomTableViewCell、ThirdCustomTableViewCellと名付けました。もっと意味のある名前にしたほうがいいでしょう。

ステップ2:Main.storyboardに移動して、TableViewをビューコントローラーの中にドラッグ&ドロップします。テーブルビューを選択し、IDインスペクタに移動します。Prototype Cells"を3に設定します。ここで、TableViewに3種類のセルがあることを伝えました。

ステップ3. さて、TableViewの1番目のセルを選択し、IDインスペクタで、カスタムクラスのフィールドに"FirstCustomTableViewCell"を入れ、属性インスペクタで識別子を"firstCustomCell"としてセットしてください。

他のすべてについても同様に、カスタムクラスをそれぞれ "SecondCustomTableViewCell" および "ThirdCustomTableViewCell" として設定します。また、識別子をsecondCustomCell、thirdCustomCellと連続的に設定します。

ステップ4:カスタムセルクラスを編集し、必要なアウトレットを追加します。ご質問をもとに編集しました。

追伸:クラス定義の下にアウトレットを配置する必要があります。

ということで、FirstCustomTableViewCell.swiftでは、クラス定義の下に

class FirstCustomTableViewCell: UITableViewCell {

には、ラベルと画像ビューのアウトレットを置きます。

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

で、SecondCustomTableViewCell.swiftに、以下のように2つのラベルを追加します。

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を作成し、storyboardからの接続を設定します。また、クラス定義に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クラスに従って、画像ビューとラベルをセルにドラッグ&ドロップします。 そして、ストーリーボードからそれらのアウトレットへの接続を提供します。

Step7:次に、ビューコントローラに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()
    }
}