Swiftで行こう！--TableViewCellを使う。

テーブルを表示させるためにUITableViewを使って作ってきました。とりあえず表示させてToDoリスト、UserDefautを使って保存機能を使ったものとか作ってみました。もう少し細分化して高機能化をするにはファイルを分けたりしながら作って行かなければいけません。class分けしたり、UIの部分でも小分けして管理したいものです。

そこで、テーブルの部品であるセルをメインのテーブルとは分けて管理する方法を記録しておきます。

まるで囲ったところがセルですね。ここを管理する方法です。

まずclassですね。クラスはUITableViewCellを継承して必要なパーツを作っていきます。

新規ファイルをつくり、UITableViewCell classを継承したファイル(名前：TableViewCellとします)を作ります。そしてStoryBoadですでに作っているTableView上にあるセルのclassを新しく作ったTableViewCell classとします。

簡単にLabelを設置してみました。これにファイルを紐ずけます。

import UIKit
class TableViewCell: UITableViewCell {
   
   @IBOutlet weak var label: 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
   }
}

こんな感じになっていると思います。

 @IBOutlet weak var label: UILabel!

はすでにStoryBoadと紐ずいていることを示しています。セルに設置したLabelから右クリックで引っ張ってコード上で離して名前をつけていきます。

そして最後に最重要キーワードです

まるで囲ったところ、Identifierです。ここを設定します。今回はCellとしています。この名前でtableViewと関連付けされますので忘れずに設定しておきます。ここが非常に大事です。やっておかないとうまくいきません。

あとは適当にデータを決めたコードを書いていきます。

import UIKit
class TableViewController: UITableViewController {
   
   var arr = ["apple","banana","orange"]
   override func viewDidLoad() {
       super.viewDidLoad()
   }
   // MARK: - Table view data source
   override func numberOfSections(in tableView: UITableView) -> Int {
       // #warning Incomplete implementation, return the number of sections
       return 1
   }
   override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       // #warning Incomplete implementation, return the number of rows
       return arr.count
   }
  
   override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {  
       let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! TableViewCell
       cell.label.text = arr[indexPath.row]
       return cell
   }
}

let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! TableViewCell

大事です。これでRUNするとうまく立ち上がります。

こんな感じでセルがカスタマイズできます。

最後にセルの高さですが

丸の部分を選択して数字を変えることで変えることができます。これで文字を大きくしても潰れずに表示されるようになりますね。