iOSではTableViewのリストを項目ごとにグループ化したいことがあります。その場合にはセルをまとめてセクションで分けることができます。
Xcode 13.4.1
UITableView Section の設定
前のセッションで作った>Table Viewを元にしてセクションを設定ます。
https://i-app-tec.com/ios/tableview.html
最初から、TableViewの設定でセクション数を決める箇所があったのですが、Sectionが必要ない場合つまりSctionが１個の場合は要素数全てを返していました。
それぞれのセクション毎に要素を返して、セクションのタイトルも設定します
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Section数 func numberOfSections(in tableView: UITableView) -> Int { } // Sectioのタイトル func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? { } // Table Viewのセルの数を指定 func tableView(_ table: UITableView, numberOfRowsInSection section: Int) -> Int { } |
まとめるとこうなります
ViewController.swift
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
import UIKit class ViewController: UIViewController , UITableViewDataSource, UITableViewDelegate{ @IBOutlet var table:UITableView! // section毎の画像配列 let imgArray1: NSArray = ["img0","img1"] let imgArray2: NSArray = ["img2","img3", "img4","img5","img6"] let imgArray3: NSArray = ["img7"] // section毎のラベルのarray let labelArray1: NSArray = ["8/23/ 16:04","8/23/ 16:15"] let labelArray2: NSArray = ["8/23/ 16:47","8/23/ 17:10", "8/23/ 17:15","8/23/ 17:21","8/23/ 17:33"] let labelArray3: NSArray = ["8/23/ 17:41"] // Sectionのタイトル let sectionTitle: NSArray = [ "SkyTree 快晴: 嵐の前の静けさ", "暴風雨: The storm is raging.", "嘘のような快晴: The storm has blown over."] override func viewDidLoad() { super.viewDidLoad() } // Section数 func numberOfSections(in tableView: UITableView) -> Int { return sectionTitle.count } // Sectioのタイトル func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? { return sectionTitle[section] as? String } // Table Viewのセルの数を指定 func tableView(_ table: UITableView, numberOfRowsInSection section: Int) -> Int { if section == 0 { return imgArray1.count } else if section == 1 { return imgArray2.count } else if section == 2 { return imgArray3.count } else{ return 0 } } //各セルの要素を設定する func tableView(_ table: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { // tableCell の ID で UITableViewCell のインスタンスを生成 let cell = table.dequeueReusableCell(withIdentifier: "tableCell", for: indexPath) // Section毎に処理を分ける、ちょっと冗長的です if indexPath.section == 0 { print("indexPath.section == 0") let img = UIImage(named:imgArray1[indexPath.row] as! String) // Tag番号 1 で UIImageView インスタンスの生成 let imageView = cell.viewWithTag(1) as! UIImageView imageView.image = img // Tag番号 ２ で UILabel インスタンスの生成 let label = cell.viewWithTag(2) as! UILabel label.text = String(describing: labelArray1[indexPath.row]) } else if indexPath.section == 1 { print("indexPath.section == 1") let img = UIImage(named:imgArray2[indexPath.row] as! String) // Tag番号 1 で UIImageView インスタンスの生成 let imageView = cell.viewWithTag(1) as! UIImageView imageView.image = img // Tag番号 ２ で UILabel インスタンスの生成 let label = cell.viewWithTag(2) as! UILabel label.text = String(describing: labelArray2[indexPath.row]) } else if indexPath.section == 2 { print("indexPath.section == 2") let img = UIImage(named:imgArray3[indexPath.row] as! String) // Tag番号 1 で UIImageView インスタンスの生成 let imageView = cell.viewWithTag(1) as! UIImageView imageView.image = img // Tag番号 ２ で UILabel インスタンスの生成 let label = cell.viewWithTag(2) as! UILabel label.text = String(describing: labelArray3[indexPath.row]) } return cell } func tableView(_ table: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return 120.0 } } |
画像が全て入るように多少サイズを変更しましたが、ストーリーボードでわからなくなったら
UITableView をストーリボードで作る を参照してください
References:
Table View Styles and Accessory Views
UITableView Class Reference