tableViewでスクロールすると、レイアウトがされいないcellが出てくる場合がある

Question

発生している問題・エラーメッセージ

TableViewを使用したSNSアプリを作ろうとしており、機能としてタグボタンを作っています。

カスタムcell内にカスタムビューを4つaddSubView()しています。
①ユーザーの画像と名前を表示するview
②アーティストの画像と名前、曲名を表示するView
③タグを表示するView
④良いね数を表示するView

問題が発生しているのは③です。
③には、さらにUIButtonがaddSubView()されています。
そのUIButtonのレイアウトを、カスタムView内で以下のように決めているのですが、
TableViewをスクロールすると、そのレイアウトが効かなかったり、効いたりという状況が発生してしまいます。

また、激しくスクロールすると、アプリが落ちてしまいます。

どのように解決したら良いのでしょうか、教えていただけると幸いです。

//ここでは、タグのボタンの大きさを調整しています。
    func adjustSize (tag : UIButton, height: CGFloat) {
//adjustBoldFontSizeForHeight(height:)は、heightに適したフォントサイズを自身に設定します。
        tag.adjustBoldFontSizeForHeight(height: height)
//設定されたフォントサイズ、テキストの長さをもとにtag: UIButton の横幅を決定します。
//こうすることで、UIButtonのタイトルが省略されることなく表示されます。
        let attributes = [NSAttributedString.Key.font: tag.titleLabel?.font]
        let textWidth = tag.titleLabel!.text!.size(withAttributes: attributes).width
        tag.frame.size = .init(width: textWidth, height: height)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

//tagは0~4つまで作成されます。
//ここで実現したいレイアウトは、タグ(UIButton)が親ビューの左端から順に設定されていく感じです。
//自身の横幅を超えた際に、2段目に行くようにUIButtonの高さは自身の高さの40%に設定。
//また、自身の横幅を超える可能性のある3つめからは、Bool値を使って判断しています。
        let tagButtonHeight = self.frame.height * 0.4
        let tagViewWidth = self.frame.width * 0.9
        let margin = self.frame.width * 0.05
        var previousWidth: CGFloat = 0
        
        guard let first = firstTag else {
            return
        }
        adjustSize(tag: first, height: tagViewHeight)
        first.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
        first.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        
        previousWidth += first.frame.width + margin
        
        
        guard let second = secondTag else {
            return
        }
        adjustSize(tag: second, height: tagViewHeight)
        second.leadingAnchor.constraint(equalTo: first.trailingAnchor, constant: margin).isActive = true
        second.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        previousWidth += second.frame.width + margin
        
        guard let third = thirdTag else {
            return
        }
        adjustSize(tag: third, height: tagViewHeight)
        if previousWidth + third.frame.width < tagViewWidth {
            third.leadingAnchor.constraint(equalTo: second.trailingAnchor, constant: margin).isActive = true
            third.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
            previousWidth += third.frame.width + margin
            thirdIsOver = false
        } else {
            third.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
            third.topAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
            previousWidth += third.frame.width + margin
            thirdIsOver = true
        }
        
        guard let fourth = fourthTag else {
            return
        }
        adjustSize(tag: fourth, height: tagViewHeight)
        if thirdIsOver! {
            fourth.leadingAnchor.constraint(equalTo: third.trailingAnchor, constant: margin).isActive = true
            fourth.topAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
        } else if previousWidth + fourth.frame.width < tagViewWidth {
            fourth.leadingAnchor.constraint(equalTo: third.trailingAnchor, constant: margin).isActive = true
        } else {
            fourth.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
            fourth.topAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
        }
    }

Answer 1

よくコードが見辛くて、意味が理解できていないのですが、
CustomCellのクラスを作成したのですか？
(class ***Cell: UITableViewCell {} とういコードが見当たらない)
Storyboardを利用していますか？？？
(40%などあるけど、実際にどうなっているのか、不明)

おそらくですが、override func layoutSubviews() {}
はViewControllerが作成された1回しか読みこまれないので、
func tableView cellForRowAt indexPath: を利用して、
位置を調整するようにコードを書き直さないと
使いまわされたcellに違うcellの設定がそのまま適用され、
表示が合ってたり、合ってなかったりするのが原因だと思います。
そして、それが無理のある設定になってしまった時に落ちることになります。

下記に例と注意点

// Data
struct CDData {
    let rank: Int
    let title: String
    let artist: String
}


// Custom cell
import UIKit

class CustomCell: UITableViewCell {
    @IBOutlet weak var titleLabel: UILabel
    @IBOutlet weak var artistLabel: UILabel

    override func layoutSubviews() {
        super.layoutSubviews()
        print("CustomCell, layoutSubviews")
        self.label.textColor = UIColor.red  // <-これもprintで見てもらえればわかると思いますが、、1回しか呼ばれない(再利用時は呼ばれない)
    }

    func bind1(data: CDData) {
        self.titleLabel.text = data.title
        self.artistLabel.text = data.artist
        if data.rank == 1 {
           self.titleLabel.textColor = UIColor.red
        } else {
           self.titleLabel.textColor = UIColor.black  // <-こういうのを忘れると、予期しないところ(再利用されたところ)で色が赤になってしまう。
        }
    }

    // ちなみに自分なら、下記のように切り分けてどこを変更する時はどこを見ればいいかわかるようにします。
    func bind2(data:CDData) {
        makeUserItems()
        makeArtistItems(cdData: data)
        makeTag()
        makeGood()
    }

    private func makeUserItem() {
    }
    
    ...続く
}



// TableView

import UIKit

class TableViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    var cDDataList: [CDData] = []

    override func viewDidLoad() {
        self.cDDataList = [
            CDData(rank:1, title:"Turning up", artist:"嵐"),
            CDData(rank:2, title:"馬と鹿", artist:"米津玄師"),
            CDData(rank:3, title:"Pretender", artist:"official髭男dism")
        ]
    }

    // めんどくさいので間、省略

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell") as! CustomCell
        cell.bind(data: self.cDDataList[indexPath.row])
        return cell
    }

}

Comments

[yoshiSwift]

見辛いコード、説明不足で申し訳ありませんでした。
hamejiさんが指摘して下さった通り、cellForRowAt 内で位置を調整したところ、上手くいきました。
ご回答ありがとうございました。
また、コードを直していたところ疑問が出てきましたので、質問させていただいてもよろしいでしょうか？
例えば、hamejiさんのコード：func bind2()を使用し、makeTag()でレイアウトを更新させたいとき、
makeTag() 内でlayoutIfNeede()を呼ぶという方法はいかがでしょうか？

[hameji]

できなくはないと思いますが、循環？している点、
システムで呼び出されるタイミングがあるので、
予期しない挙動などにつながると困るので、おすすめは出来ませんね。

どうしてもやりたいというなら、そもそも逆にmakeTag()内に書いて、
layoutIfNeeded()で逆にmakeTag()を呼び出せばいいのではないですか？
ですが、layoutIfNeededは再利用では呼び出されないし、
書く意味がそもそもない気もします。