【徒然iOS】気ままにUIKit24〜TableViewCellカスタム〜

M_Kaku堂

2023年1月16日 14:18

概要

このマガジンは四十を過ぎたおっさんが、

を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。

今回

前々回から引き続き

のカスタムからやる〜〜〜

前準備

念の為、バックアップ
新しいクラス
ビューコントローラの追加
イニシャルビューの変更

をいつも通りやってから本題へ💃

本題

⒈前回までと同じ操作を済ます

こんな感じで、dataSourceと、identifierの設定まで終わったところ

⒉ラベルを配置

⒊UITableViewDataSourceプロトコルを適用して、stubs追加

⒋コードを追加

今回追加する部分

    //データ
    var dataList = ["青山,一塁手","阿部,捕手","加藤,二塁手","神田,三塁手","佐藤,遊撃手","坂田,外野手"]
    
    
    //データを返すメソッド
    func tableView(tableView:UITableView, cellForRowAtIndexPath indexPath:NSIndexPath) -> UITableViewCell {
        
        //セルを取得する。
        let cell = tableView.dequeueReusableCellWithIdentifier("TestCell", forIndexPath:indexPath) as UITableViewCell
 
        //Tag番号でセルに含まれるラベルを取得する。
        let label1 = cell.viewWithTag(1) as! UILabel
        let label2 = cell.viewWithTag(2) as! UILabel
        let label3 = cell.viewWithTag(3) as! UILabel
        
        //データをカンマで分割する。
        let arr = dataList[indexPath.row].componentsSeparatedByString(",")
        
        //ラベルに値を設定する。
        label1.text = String(indexPath.row)
        label2.text = arr[0]
        label3.text = arr[1]
        
        return cell
    }
    
    
    //データの個数を返す
    func tableView(tableView:UITableView, numberOfRowsInSection section:Int) -> Int {
        return dataList.count
    }

各stubsの処理コードをはめ込んでいく感じで〜〜〜

⒌シミュレータで実行

一旦ここまでのコード

class TableCellCustomViewController: UIViewController, UITableViewDataSource {
    
    //データ
    var dataList = ["青山,一塁手","阿部,捕手","加藤,二塁手","神田,三塁手","佐藤,遊撃手","坂田,外野手"]
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //セルを取得する。
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for:indexPath) as UITableViewCell
        
        //Tag番号でセルに含まれるラベルを取得する。
        let label1 = cell.viewWithTag(1) as! UILabel
        let label2 = cell.viewWithTag(2) as! UILabel
        let label3 = cell.viewWithTag(3) as! UILabel
        
        //データをカンマで分割する。
        let arr = dataList[indexPath.row].components(separatedBy: ",")
        
        //ラベルに値を設定する。
        label1.text = String(indexPath.row)
        label2.text = arr[0]
        label3.text = arr[1]
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataList.count
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

⒍セルをクリックしたときの背景〜〜をやってみる

⒎ブラッシュアップ

今回もAutoLayoutくらいかな

おかしなところはないね👀

今回のコード

class TableCellCustomViewController: UIViewController, UITableViewDataSource {
    
    //データ
    var dataList = ["青山,一塁手","阿部,捕手","加藤,二塁手","神田,三塁手","佐藤,遊撃手","坂田,外野手"]
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //セルを取得する。
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for:indexPath) as UITableViewCell
        
        //Tag番号でセルに含まれるラベルを取得する。
        let label1 = cell.viewWithTag(1) as! UILabel
        let label2 = cell.viewWithTag(2) as! UILabel
        let label3 = cell.viewWithTag(3) as! UILabel
        
        //データをカンマで分割する。
        let arr = dataList[indexPath.row].components(separatedBy: ",")
        
        //ラベルに値を設定する。
        label1.text = String(indexPath.row)
        label2.text = arr[0]
        label3.text = arr[1]
        
        //セルを選択したときの色を指定する。
        let colorView = UIView()
        colorView.backgroundColor = UIColor(red:0.8, green:0.7, blue:0.6, alpha:1.0)
        cell.selectedBackgroundView = colorView
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataList.count
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

まとめ

いや〜〜〜TableViewCellはいきなり
２つ配置→１つ配置に話が変わっているのと、
色々な設定がたくさんあったので長かった〜〜〜！
でも本当によく使うので、しっかり３回に分けてやってみた🕺

Apple公式

さて次回は、

いよいよDelegateが出てくるね〜〜
佳境だね〜〜〜！