[Swift]辞書をソートしてTableViewに値を棒グラフのように表したい

Question

アプリの概要

月別の出費額をソートして棒グラフみたいに表したい．

これまでの流れ

写真1のように，Cell__に__Label（青色のやつ）を配置して，コード2の__TableViewCell__に接続した．
そして，コード1のようにコードを書き足し，実行すると写真2のようになった．
（この時，写真4のように__Cell__の高さを高くして，全ての__Cell__が1度に画面に入りきらないようになっている．）
（ソートされているので，上から12月，11月，・・・，2月，1月）

わからないこと

実行した後に，__TableView__をスライドさせたり__更新ボタン__を何回か押すとログ1がログに表示され，写真3のように__Label__の長さが正しく表示されない．
（ソートはされていて，上から12月，11月，・・・，2月，1月　になっている）

考えられること

コード3の部分が多分悪さをしていると思うが，解決方法がわからない．
力をお貸しください．よろしくお願いします．
（実際に試していただければわかりやすいかと思います．）

写真1

写真2

写真3

写真4

コード1

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var tableView: UITableView!
    
    //月別の出費額
    var array1: [String: Int] = ["1月":10,"2月":20,"3月":30,"4月":40,"5月":50,"6月":60,"7月":70,"8月":80,"9月":90,"10月":100,"11月":110,"12月":120]
    //ソートした後の月別の出費額
    var rank = [(key: String, value: Int)]()
    //最も出費が多かった月の出費額
    var rank1Value = Int()

    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        reloadData()
    }

    //TableViewを更新する
    func reloadData() {
        //ソート
        self.rank = self.array1.sorted {$0.value > $1.value}
        //最も出費が多かった月の出費額を取得
        self.rank1Value = self.rank[0].value
        self.tableView.reloadData()
    }
    
    
    @IBAction func refreshButton(_ sender: Any) {
        reloadData()
    }
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.rank.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? TableViewCell else {
            return UITableViewCell()
        }
        //月の出費額を取得
        let value: Int = self.rank[indexPath.row].value
        //最も出費が多かった月の出費額で割ることで，それに対する割合を求める
        let ratio = Double(value) / Double(self.rank1Value)
        let multiplier = CGFloat(ratio)
        //TabelViewにLabelが収まるように幅を調節
        let constant = CGFloat(ratio * -70.0)

        DispatchQueue.main.async {
            //Labelの幅に関する制約（multiplierとconstant）を設定する
            cell.label.widthAnchor.constraint(equalTo: self.tableView.widthAnchor, multiplier: multiplier, constant: constant).isActive = true
        }
        return cell
    }
}

コード2

import UIKit

class TableViewCell: UITableViewCell {
    
    @IBOutlet weak var label: UILabel!
    

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

ログ1

2019-09-08 19:45:42.235064+0900 a[10964:357303] [LayoutConstraints] Unable to simultaneously satisfy constraints.
	Probably at least one of the constraints in the following list is one you don't want. 
	Try this: 
		(1) look at each constraint and try to figure out which you don't expect; 
		(2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x600003929090 UITableView:0x7fe57f86ee00.leading == UILayoutGuide:0x600002376d80'UIViewSafeAreaLayoutGuide'.leading   (active)>",
    "<NSLayoutConstraint:0x600003929270 UITableView:0x7fe57f86ee00.trailing == UILayoutGuide:0x600002376d80'UIViewSafeAreaLayoutGuide'.trailing   (active)>",
    "<NSLayoutConstraint:0x6000039058b0 UILabel:0x7fe57ec17540.width == 0.0833333*UITableView:0x7fe57f86ee00.width - 5.83333   (active)>",
    "<NSLayoutConstraint:0x60000392cff0 UILabel:0x7fe57ec17540.width == 0.333333*UITableView:0x7fe57f86ee00.width - 23.3333   (active)>",
    "<NSLayoutConstraint:0x60000392b070 'UIView-Encapsulated-Layout-Width' UIView:0x7fe57ed27f00.width == 320   (active)>",
    "<NSLayoutConstraint:0x600003929130 'UIViewSafeAreaLayoutGuide-left' H:|-(0)-[UILayoutGuide:0x600002376d80'UIViewSafeAreaLayoutGuide'](LTR)   (active, names: '|':UIView:0x7fe57ed27f00 )>",
    "<NSLayoutConstraint:0x6000039291d0 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide:0x600002376d80'UIViewSafeAreaLayoutGuide']-(0)-|(LTR)   (active, names: '|':UIView:0x7fe57ed27f00 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x6000039058b0 UILabel:0x7fe57ec17540.width == 0.0833333*UITableView:0x7fe57f86ee00.width - 5.83333   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

コード3

cell.label.widthAnchor.constraint(equalTo: self.tableView.widthAnchor, multiplier: multiplier, constant: constant).isActive = true

コード４

cell.widthConstraint.constant = cell.bounds.size.width * multiplier + constant

解決方法

k2moonsのアンサーにより解決することができました．

__Label__に__width__に関する制約を設け(Main.Stroybord__上で)，@IBOutlet__で__TableViewCell__クラスに接続し，コード３をコード４に書き換えることで解決しました．

Answer 1

Xcode10.3, Swift5.1の環境で試してみました。

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self       // 抜けてました
        tableView.dataSource = self     // 抜けてました
        reloadData()
    }

上記の設定が抜けているくらいで、特に問題はないようでした。ログも出ませんでした。

func dequeueReusableCell(withIdentifier identifier: String, for indexPath: IndexPath) -> UITableViewCell

が

func dequeueReusableCell(withIdentifier identifier: String) -> UITableViewCell?

であれば起こりそうですが、ソースコードはそうはなっていません。

問題は２つあって、並び替え順の問題と、ログ１の問題は別のように思われますが、再現しませんでしたので、下記は参考までに書きます。

ログ１は、一度付加したConstraintを何度も上書きしようとして出ているように思います。
例えば、事前にwidthのConstraintを設定し、Constraintの値のみを変更するやり方であれば、ログ１のようにはならないと思います。

        DispatchQueue.main.async {
            //Labelの幅に関する制約（multiplierとconstant）を設定する
            cell.widthConstraint.constant = cell.bounds.size.width * multiplier
        }

Comments

[vlb]

返信ありがとうございます．
言葉足らずでうまく伝えられていませんでした．

tableView.delegate = self
tableView.dataSource = self
につきましては，Main.Storybordでcontrolキーを使用して繋いでいました．

問題のログにつきましては，写真4のようにCellの高さを高くして，全てのCellが1度に画面に入りきらないようになっている状態で下にスクロールし，更新ボタンを押すと写真3のような現象と問題のログが表示されるようになると思います．

質問の方も訂正させていただきましてので，お手数をおかけしますが，以上の内容でお願いできますでしょうか．

DispatchQueue.main.async {
//Labelの幅に関する制約（multiplierとconstant）を設定する
cell.widthConstraint.constant = cell.bounds.size.width * multiplier
}
の部分につきましては，今から試させていただきます．

よろしくお願いします．

[k2moons]

widthConstraintはセルにセットしたConstraintの@IBOutletです。念のため。

[k2moons]

再現しました。
```
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? TableViewCell else {
return UITableViewCell()
}
if cell.tag == 0 {
cell.tag = indexPath.row + 100
}
print("index.row=(indexPath.row), tag=(cell.tag)")
```
というようなコードを入れてみると何が起こっているのかが分かりやすいです。

func dequeueReusableCell(withIdentifier identifier: String, for indexPath: IndexPath) -> UITableViewCell
も
func dequeueReusableCell(withIdentifier identifier: String) -> UITableViewCell?
も
同じ仕様なので、やはり最初に書いたようにConstraintと上記の仕様で発生すると思われます。

UITableViewは隠れたセルを使い回しています。これはメモリーをセル分だけ確保することでテーブルリストが巨大になった場合のメモリー消費を抑制するためです。
print文を見ると消えたセルを使い回していることが分かります。でもなぜ使い回したセルの設定がうまくいかないか。これも最初に書いたように、既に昔のセルにはConstraintがセットされていてそれが有効なためです。
お知らせた方法を使うと、使い回したセルに対して、必要な情報を再セットできるので、うまく行くはずです。

[vlb]

k2moonsさん
貴方の方法を試したところ解決することができました！
最後までお付き合いありがとうございました．
今後ともよろしくお願いします．

[vlb]

コード３をコード４に書き換えることで解決できました．