質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.54%

画面を上下にスクロールすると文字化けが起こるバグを直したい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 775

reveco

score 11

前提・実現したいこと

現在swift3.0を学んで約1か月のプログラミング初心者です。
画面を上下にスクロールした時に文字化けするバグが発生しており、画面を上下にスクロールしても文字化けしないように修正したいです。

質問も初めてですので何を言っているのか分かりづらいかもしれませんが、アドバイスをお願い致します。

ことらはバグが発生した時のスクショになります。

イメージ説明

原因の調査

// セル属性のコードのところに print(leftTableViewList[indexPath.section][indexPath.row]) を加えてデバッグしました。配列から正しく文字列を取り出せていないと思うのですが、原因が理解できませんでした。(勉強不足です。すいません。)

Labelが重なって表示されているようにも見えたので、コメントアウトを行いシミュレーターを起動したりして試行錯誤してみたのですが、解決策が見つかりませんでした。

以下、デバッグの結果になります。

a
b
c
d
e
f
g
h
i
j
k
c ←ここがおかしいと思っています。

該当のソースコード

class myTableViewController: UITableViewController {

    // セクション
    var sections = ["11月28日"]

    // 配列
    let leftTableViewList:[[String]] = [["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"]]

    // 配列
    let rightTableViewList:[[String]] = [["", "l", "m", "n", "", "", "", "", "", "", ""]]

    // 初期表示
    override func viewDidLoad() {
        super.viewDidLoad()

    }


    // sectionの数
    override func numberOfSections(in tableView: UITableView) -> Int {
        return sections.count
    }

    // セクション属性
    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sections[section]
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return leftTableViewList[section].count
    }

    // セルの幅(69に設定)
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 69
    }

    // セル属性
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)


        // ラベルとスイッチボタンを配置する処理
        // 画面全体の幅を取得
        let screenX = Double(UIScreen.main.bounds.size.width)

        // ラベルを配置決定(左側の項目)
        let leftLabel : UILabel = UILabel(frame: CGRect(x: 15, y: 25, width:70, height:20))
        let leftLabel.text = leftTableViewList[indexPath.section][indexPath.row]
       // デバッグ用に配置 
        print(leftTableViewList[indexPath.section][indexPath.row])
        // 文字の位置設定(左寄せ)
        leftLabel.textAlignment = NSTextAlignment.left
        leftLabel.adjustsFontSizeToFitWidth = true
        // 文字のはみ出し防止
        leftLabel.minimumScaleFactor = 0.5
        cell.contentView.addSubview(leftLabel)


        // ラベルの配置決定(右側スイッチボタンの上の文字3つ)
        let rightLabel : UILabel = UILabel(frame: CGRect(x: screenX - 80, y:5, width: 70, height:20))
        rightLabel.text = rightTableViewList[(indexPath as NSIndexPath).section][(indexPath as NSIndexPath).row]
        rightLabel.textAlignment = NSTextAlignment.center
        rightLabel.adjustsFontSizeToFitWidth = true
        rightLabel.minimumScaleFactor = 0.1
        cell.contentView.addSubview(rightLabel)


        // スイッチボタンを宣言
        let swcBtn: UISwitch = UISwitch(frame: CGRect(x: screenX - 70, y:32, width: 70, height:20))
        swcBtn.isOn = false
        // swh.addTarget(self, action: Selector("onClick:"), for: UIControlEvents.valueChanged)

        // swcBtnを変数に格納
        let swb1 = swcBtn
        let swb2 = swcBtn
        let swb3 = swcBtn

        // rowが1 or 2 or 3の時にスイッチボタンを配置する
        switch indexPath {

        case [0, 1]:
            cell.contentView.addSubview(swb1)

        case [0, 2]:
            cell.contentView.addSubview(swb2)

        case [0, 3]:
            cell.contentView.addSubview(swb3)

        default:
            return cell


        }

        return cell



    }




    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()



    }



}

補足情報(言語/FW/ツール等のバージョンなど)

開発言語→swift3.0
開発ツール→xcode8

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

dequeueReusableCell(withIdentifier:for:)は、使用済みのセルをそのまま再利用します。
そのままというのは、前回使用時にaddSubviewしたもの(UILabel/UISwitch)が全てそのまま残っているということです。

ということは、cellForRow(at:)が呼ばれてセルが生成されるたびに、UILabelやUISwitchがaddSubviewされて積み重なっている、というのは理解出来るでしょうか?

とりあえずの解決策として、セル再利用時に、前回使用時のsubviewを全て剥がしてみます。

let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
//subviewを全て剥がす
cell.contentView.subviews.forEach {
    $0.removeFromSuperview()
}
:

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/28 17:16

    dequeueReusableCell(withIdentifier:for:)でセルを再利用するということは知っていましたが、LabelやSwitchも再利用されているとは知りませんでした。

    コードを追加したところ、文字化けしなくなりました。貴重なアドバイスとコードをありがとうございます!

    キャンセル

  • 2016/11/28 17:28

    このままだとセルの再利用をしている意味が全くありませんので、初回利用時のみLabel/Switchの生成を行うような修正にチャレンジしてみてはどうでしょうか。(初回かどうかの判定方法を考えてみて下さい)

    Storyboardを使っているなら、カスタムセルについて調べるのが良いと思います。

    キャンセル

  • 2016/11/29 15:31

    再びのアドバイスありがとうございます。LabelやswitchButtonなどの部品関係は全てコードのみで処理を行っています。

    初回かどうかの判定方法も少し難しそうですが、勉強しながら策を練っていきたいと思います。また壁に当たりましたら質問させていただきます。

    貴重なアドバイスありがとうございました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.54%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る