LoginSignup
0
2

More than 3 years have passed since last update.

Swift UITableViewで三つの選択肢から一つのみ選択できるように

Posted at

三つの選択肢のなか、一つしか選択できないようなデモを作ってみて
computed propertiesとTableViewの理解を深めたと思うのでメモしておきます。

1.三つのアイテムの選択状態のcomputed propertiesを作ります
選択するとチェックマークを付与して、選択していないアイテムはチェックマークが付与されていない状態にするには、選択状態が変わるたびにTableViewを更新してほしいので、tableView.reloadDataを呼び出します。

var aSelected: Bool = true{
    didSet{
        tableView.reloadData()
    }
}
var bSelected: Bool = false{
    didSet{
        tableView.reloadData()
    }
}
var cSelected: Bool = false{
    didSet{
        tableView.reloadData()
    }
}
var selectedStatus:[Bool]{
    return [aSelected, bSelected, cSelected]
}

画面に入る時(無操作の状態で)デフォルト一番目が選択状態、二番目と三番目は未選択状態にするため、
最初に表示するTableViewのCellを設定するところではこのように書きます。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    cell.textLabel!.text = listContentOne[indexPath.row]

    if selectedStatus[indexPath.row]{
        cell.accessoryType = .checkmark
    }
    return cell
}

2.TableViewのCellがタップする時の処理

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    if indexPath.row == 0{
        self.aSelected = true
        self.bSelected = false
        self.cSelected = false
    }else if indexPath.row == 1{
        self.aSelected = false
        self.bSelected = true
        self.cSelected = false
    }else if indexPath.row == 2{
        self.aSelected = false
        self.bSelected = false
        self.cSelected = true
    }
}

3.TableView.reloadDataが呼び出された後、以下が実行されるためUI更新に必要な処理を書きます。

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    if selectedStatus[indexPath.row]{
        cell.accessoryType = .checkmark
    }else{
        cell.accessoryType = .none
    }
}

まとめると、
computed propertiesを作っておいて、値が変わったらtableView.reloadDataを呼び出すように。
値が変わるたびに実行してほしい処理をtableViewの「willDisplay cell」の中で書く。
UITableViewとcomputed propertiesへの理解が深まりました!

出来上がりはこんなイメージです。
スクリーンショット 2021-02-22 22.57.47.png

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2