前提・実現したいこと
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) } } }
回答1件
あなたの回答
tips
プレビュー