web-dev-qa-db-ja.com

Swiftを含む複数のカスタムセルを含むUITableview

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

  • Cell1：には画像とラベルが必要です。
  • Cell2：2つのラベルが必要です。
  • Cell3：dayPickerが必要です。

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

IOSデバイスの連絡先アプリのようなtableViewを生成したいと思います。

swiftuitableview
95
Easyglider

最初にあなたの質問に答えることから始めましょう。

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

1つのtableviewControllerを使用できますか？=>はい、できます。ただし、View Controller内にテーブルビューを作成することもできます。

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

ViewController内のTableViewの例を示します。メインコンセプトを理解したら、必要に応じて変更してみてください。

手順1：3つのカスタムTableViewCellsを作成します。 FirstCustomTableViewCell、SecondCustomTableViewCell、ThirdCustomTableViewCellという名前を付けました。より意味のある名前を使用する必要があります。

enter image description here

ステップ2：Main.storyboardに移動して、View Controller内にTableViewをドラッグアンドドロップします。次に、テーブルビューを選択し、IDインスペクターに移動します。 「プロトタイプセル」を3に設定します。ここでは、TableViewに3種類のセルがある可能性があることを伝えました。

enter image description here

ステップ3：次に、TableViewとIDインスペクターで最初のセルを選択し、Customクラスフィールドに「FirstCustomTableViewCell」を入力してから、属性インスペクターで識別子を「firstCustomCell」に設定します。

enter image description here

enter image description here

他のすべてについても同じことを行います-カスタムクラスをそれぞれ「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のアウトレットを作成し、ストーリーボードから接続を設定します。また、クラス定義にプロトコルリストとして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：次に、ViewTableで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()
    }
}
253
Natasha

Swift 3.0 +最小限のコードで更新

基本概念：動的セルプロトタイプを使用してテーブルビューを作成します。セルプロトタイプごとに識別子を割り当て、カスタムテーブルビューセルクラスを作成します。テーブルビューのデリゲートメソッドでカスタムセルを開始して表示します。

1。ストーリーボードにセルを作成します

TableViewをView Controllerにドラッグし、プロトタイプセルを追加してから、UI要素をTable Viewセルにドロップし、必要に応じて制約を適切に追加します。

enter image description here

2。カスタムUITableViewCellクラスを作成します

次のコードをプロジェクトに追加します。 View Controllerクラスのすぐ上に配置しています。

class FirstTableCell: UITableViewCell {
}

class SecondTableCell: UITableViewCell {
}

class ThirdTableCell: UITableViewCell {   
}

3。カスタムクラスと識別子をセルプロトタイプに割り当てます

ストーリーボードの各セルプロトタイプに、手順2で作成したカスタムクラスを割り当て、一意の識別子を入力します。

enter image description here

4。 UI要素をSwiftコードに接続します

テーブルビューをコントロールドラッグして、View Controllerクラスに接続します。手順1でセルプロトタイプに追加されるUI要素をコントロールドラッグし、対応するテーブルビューセルクラスに接続します。

enter image description here

5。コントローラを表示し、テーブルビューを制御するコードを追加します

View ControllerをTable Viewデリゲートに準拠させる

class YourViewController: UIViewController, UITableViewDataSource, UITableViewDelegate

viewDidLoadで、Table Viewのデリゲートとデータソースを設定します。

override func viewDidLoad() {
    super.viewDidLoad()

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

}

最後に、最小要件に従って、テーブルビューを制御する2つのデリゲートメソッドを追加します。

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。試してみてください：）

enter image description here

28
Fangming

上記の回答が最良の回答ですが、この問題を解決する理由はたくさんあります。この問題を抱えている人のための別の潜在的な解決策は次のとおりです。

私の問題は、ストーリーボードビューではなくViewControllerクラスに依存していることでした。ストーリーボードは使用されていなかったため、ストーリーボードセルへの参照は無意味でした。

私はこれをやっていた：

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

そして、私はこのようなことをする必要がありました：

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)

これが誰かを助けることを願っています。

0
Coltuxumab