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

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

新規登録して質問してみよう
ただいま回答率
85.50%
TableView

TableView(UITableView)とは、リスト形式で表示するコントロールで、ほとんどのアプリに使用されています。画面を「行」に分けて管理し、一般的には各行をタップした際に詳細画面に移動します。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

1回答

740閲覧

【Swift】TableViewのCellに、配列のindexPath.rowの値に対応したデータが反映されません

OGT_kumi

総合スコア13

TableView

TableView(UITableView)とは、リスト形式で表示するコントロールで、ほとんどのアプリに使用されています。画面を「行」に分けて管理し、一般的には各行をタップした際に詳細画面に移動します。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

0クリップ

投稿2019/01/12 11:19

編集2019/01/14 13:03

前提・実現したいこと

swiftで、tableviewを使ったアプリを開発しています。
APIから取得したデータを配列に格納し、
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { }
で、cellごとに配列のindexPath.rowのデータを反映させています(一般的な処理方法かと思います)。
配列の一つに、cellの背景色を指定する文字列を定義しています。
配列の中身は、red、blue、yellowの3色が定義されており、その値に応じてcellの背景色が変わるよう処理を記載しています。

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

配列の中身に対応した色がcellの背景色に設定されず、関係ない色がセットされてしまいます。
下に該当する箇所のコードを記載しています。
配列に正しい順序でデータが格納されていることは、print()を使って確認しています。
背景色に正しく反映されていないという状況です。

なんとなく、tableviewの描写タイミングのルールを理解しきれていないのかな、、、という所感はあり色々調べてみたものの、これという解決方法が見つかっていません。

不足情報などあればご指摘ください。

該当のソースコード

viewcontoller側

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell") as! PeopleListCell cell.selectionStyle = UITableViewCell.SelectionStyle.none cell.BGcolor=self.peopleColor[indexPath.row] // 背景色データをcellに設定 cell.backgroundColorSet() // cellに定義したfuncを使用し、背景色データ毎に背景色を指定 print(self.peopleColor[indexPath.row]) // 配列に格納されているデータを確認 return cell }

cell側で背景色を設定するメソッド

func backgroundColorSet(){ // background Redの設定 let colorRed1 = UIColor(red: 255/256.0, green: 82/256.0, blue: 119/256.0, alpha: 1).cgColor // 左上 let colorRed2 = UIColor(red: 253/256.0, green: 10/256.0, blue: 61/256.0, alpha: 1).cgColor // 右下 gradientLayerRed.colors = [colorRed1, colorRed2] gradientLayerRed.startPoint = CGPoint.init(x: 0, y: 0) gradientLayerRed.endPoint = CGPoint.init(x: 1 , y:1) // background Yellowの設定 let colorYellow1 = UIColor(red: 249/256.0, green: 193/256.0, blue: 0/256.0, alpha: 1).cgColor // 左上 let colorYellow2 = UIColor(red: 245/256.0, green: 127/256.0, blue: 0/256.0, alpha: 1).cgColor // 右下 gradientLayerYellow.colors = [colorYellow1, colorYellow2] gradientLayerYellow.startPoint = CGPoint.init(x: 0, y: 0) gradientLayerYellow.endPoint = CGPoint.init(x: 1 , y:1) //background Greenの設定 let colorGreen1 = UIColor(red: 73/256.0, green: 253/256.0, blue: 223/256.0, alpha: 1).cgColor // 左上 let colorGreen2 = UIColor(red: 0/256.0, green: 170/256.0, blue: 147/256.0, alpha: 1).cgColor // 右下 gradientLayerGreen.colors = [colorGreen1, colorGreen2] gradientLayerGreen.startPoint = CGPoint.init(x: 0, y: 0) gradientLayerGreen.endPoint = CGPoint.init(x: 1 , y:1) if BGcolor=="red"{ gradientLayerRed.frame = tagView.bounds tagView.layer.insertSublayer(gradientLayerRed, at:0) } else if BGcolor=="yellow"{ gradientLayerYellow.frame = tagView.bounds tagView.layer.insertSublayer(gradientLayerYellow, at:0) } else { gradientLayerGreen.frame = tagView.bounds tagView.layer.insertSublayer(gradientLayerGreen, at:0) } }

print(self.peopleColor[indexPath.row])の中身

初期画面での出力内容を①
そこから少しスクロールした状態での出力内容を②
最後までスクロールした状態での出力内容を③
として記載しています。

red red red red red →少しスクロールすると、ここから先が繰り返される blue blue red blue red red yellow blue yellow ———————↑①ここまでが、初期画面状態でのprint red blue blue red blue red red yellow blue yellow ———————↑②少しスクロールすると、ここまで表示される yellow blue yellow red red yellow red red red blue blue blue blue blue ———————↑③最後までスクロールすると、ここまで表示される(規則性不明)

PeopleListCell.swiftの中身

import UIKit class PeopleListCell: UITableViewCell { @IBOutlet weak var tagView: CustomView! @IBOutlet weak var ownerImage: UIImageView! @IBOutlet weak var peopleName: UILabel! @IBOutlet weak var memberCount: UILabel! var BGcolor: String? var gradientLayerRed = CAGradientLayer() var gradientLayerYellow = CAGradientLayer() var gradientLayerGreen = CAGradientLayer() override func awakeFromNib() { super.awakeFromNib() tagView.roundCorners(corners: [.topRight, .bottomRight], radius: 15) self.layer.shadowColor = UIColor.black.cgColor self.layer.shadowOpacity = 0.5 // 透明度 self.layer.shadowOffset = CGSize(width: 3, height: 3) // 距離 self.layer.shadowRadius = 3 // ぼかし量 // backgroundColorSet() } override func setSelected(_ selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) } func backgroundColorSet(){ // background Redの設定 let colorRed1 = UIColor(red: 255/256.0, green: 82/256.0, blue: 119/256.0, alpha: 1).cgColor // 左上 let colorRed2 = UIColor(red: 253/256.0, green: 10/256.0, blue: 61/256.0, alpha: 1).cgColor // 右下 gradientLayerRed.colors = [colorRed1, colorRed2] gradientLayerRed.startPoint = CGPoint.init(x: 0, y: 0) gradientLayerRed.endPoint = CGPoint.init(x: 1 , y:1) // background Yellowの設定 let colorYellow1 = UIColor(red: 249/256.0, green: 193/256.0, blue: 0/256.0, alpha: 1).cgColor // 左上 let colorYellow2 = UIColor(red: 245/256.0, green: 127/256.0, blue: 0/256.0, alpha: 1).cgColor // 右下 gradientLayerYellow.colors = [colorYellow1, colorYellow2] gradientLayerYellow.startPoint = CGPoint.init(x: 0, y: 0) gradientLayerYellow.endPoint = CGPoint.init(x: 1 , y:1) //background Greenの設定 let colorGreen1 = UIColor(red: 73/256.0, green: 253/256.0, blue: 223/256.0, alpha: 1).cgColor // 左上 let colorGreen2 = UIColor(red: 0/256.0, green: 170/256.0, blue: 147/256.0, alpha: 1).cgColor // 右下 gradientLayerGreen.colors = [colorGreen1, colorGreen2] gradientLayerGreen.startPoint = CGPoint.init(x: 0, y: 0) gradientLayerGreen.endPoint = CGPoint.init(x: 1 , y:1) if BGcolor=="red"{ gradientLayerRed.frame = tagView.bounds tagView.layer.insertSublayer(gradientLayerRed, at:0) } else if BGcolor=="yellow"{ gradientLayerYellow.frame = tagView.bounds tagView.layer.insertSublayer(gradientLayerYellow, at:0) } else { gradientLayerGreen.frame = tagView.bounds tagView.layer.insertSublayer(gradientLayerGreen, at:0) } } }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hameji001

2019/01/12 15:05

peopleColorの配列の中身のprintとPeopleListCellのファイルのコード を載せていただけないでしょうか?
OGT_kumi

2019/01/14 13:03

ご連絡遅れてしまい申し訳ありません。上記2点、追記したのでご確認ください。
guest

回答1

0

ベストアンサー

回答遅くなりました。試してみました。
元データの形がわからなかったので、「仮形式」で答えさせていただきます。

うまくしっくりと説明できませんが、

swift

1func backgroundColorSet(){ }

自体にindexPathとの繋がりがないので、
cellがreuseされる際に、以前のセットの値BGcolorが残ってるものが存在し、
そのために色がめちゃくちゃになってしまっていると思います。

以下のようにbackgroundColorとindexPathを一対にして表示する必要があります。

Swift

1 2// TableViewController.swift 3// 仮データ形式 4self.data = ["yellow", "red", "yellow", 5 "green", "red", "yellow", 6 "green", "red", "yellow", 7 "green", "red", "yellow", 8 "green", "red", "yellow", 9 "green", "red", "yellow", 10 "green", "red", "yellow", 11 "green", "red", "yellow", 12 "green", "red", "yellow", 13 "green", "red", "yellow", 14 "green", "red", "yellow", 15 "green", "red", "yellow", "green"] 16 17 18func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 19 let cell = tableView.dequeueReusableCell(withIdentifier: "customCell") as! CustomCell 20 cell.selectionStyle = UITableViewCell.SelectionStyle.none 21 22 cell.setCell(indexPath: indexPath, data: self.data) 23 cell.peopleName.text = String(indexPath.row) // 確認用 24 print("(indexPath.row), = (self.data[indexPath.row])") // これで、配列の番号と表示色の確認を 25 return cell 26} 27 28// CustomCell.swift 29@IBOutlet weak var tagView: CustomView! 30@IBOutlet weak var ownerImage: UIImageView! 31@IBOutlet weak var peopleName: UILabel! 32@IBOutlet weak var memberCount: UILabel! 33var gradientLayer = CAGradientLayer() 34 35func setCell(indexPath: IndexPath, data: [String]) { 36 self.gradientLayer.frame = tagView.bounds 37 gradientLayer.startPoint = CGPoint.init(x: 0, y: 0) 38 gradientLayer.endPoint = CGPoint.init(x: 1 , y:1) 39 let color = data[indexPath.row] 40 switch color { 41 case "red": 42 let colorRed1 = UIColor(red: 255/256.0, green: 82/256.0, blue: 119/256.0, alpha: 1).cgColor // 左上 43 let colorRed2 = UIColor(red: 253/256.0, green: 10/256.0, blue: 61/256.0, alpha: 1).cgColor // 右下 44 gradientLayer.colors = [colorRed1, colorRed2] 45 case "yellow": 46 let colorYellow1 = UIColor(red: 249/256.0, green: 193/256.0, blue: 0/256.0, alpha: 1).cgColor // 左上 47 let colorYellow2 = UIColor(red: 245/256.0, green: 127/256.0, blue: 0/256.0, alpha: 1).cgColor // 右 48 gradientLayer.colors = [colorYellow1, colorYellow2] 49 default: 50 let colorGreen1 = UIColor(red: 73/256.0, green: 253/256.0, blue: 223/256.0, alpha: 1).cgColor // 左上 51 let colorGreen2 = UIColor(red: 0/256.0, green: 170/256.0, blue: 147/256.0, alpha: 1).cgColor // 右下 52 gradientLayer.colors = [colorGreen1, colorGreen2] 53 } 54 tagView.layer.insertSublayer(gradientLayer, at:0) 55 // ちなみに、他のデータもここでセットすべきです。データの形に合わせて取り出してくださいね。 56 ownerImage.image = UIImage(named: /* self.data.name[indexPath.row] */) 57 peopleName.text = /* self.data.....等 */ 58} 59

これでずれないはずです。
自分もこのsetCellの方法どこかのサイトからのコピーですけどね。
OGT_kumiさんようにカスタムしました。
赤のみを表示する時に緑や黄色を読み込む必要ないですよね。
メモリの節約でswitch以下に移動しました。

投稿2019/01/17 16:09

編集2019/01/17 16:20
hameji001

総合スコア639

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

OGT_kumi

2019/01/19 04:20

すごい!見事直りました!こんな丁寧に書いてくださりありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問