0

いつもお世話になっております。

SpriteKitでUITableViewを利用したいと考えております。
以下のサイトを参考にし、さらにセルをカスタマイズしたいと考えております。
以下のソースではセル内を「画像+タイトル+値段」で構成しております。

ですが、スクロールさせると画像やタイトルなどが、既存のセル上に次々に重なって新規に作成されてしまいました。
ご教授ご鞭撻のほどよろしくお願い致します。

他に良い方法がありましたらご教授頂けると幸いです。

参考サイト
https://stackoverflow.com/questions/41626348/using-a-uitableview-in-spritekit

■サンプルコード

import SpriteKit
import UIKit
...
    override func didMove(to view: SKView) {

        let tableView = TableView()
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        tableView.frame = CGRect(x: 20, y: 50, width: 280, height: 200)
        self.view?.addSubview(tableView)
        tableView.reloadData()
    }
...
class TableView: UITableView, UITableViewDelegate, UITableViewDataSource {

    private var itemTitle = ["Cell 1", "Cell 2", "Cell 3", "Cell 4", "Cell 5", "Cell 6", "Cell 7", "Cell 8", "Cell 9", "Cell 0"]

    override init(frame: CGRect, style: UITableViewStyle) {

        super.init(frame: frame, style: style)

        self.delegate = self
        self.dataSource = self
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return itemTitle.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

        let padding: CGFloat = 5.0
        let cellWidth = tableView.frame.size.width - padding
        let cellHeight = cell.frame.size.height - padding

        let image = UIImage(named: "spaceship")

        let ratio = cellHeight / (image?.size.height)!

        let imageView = UIImageView(
            frame: CGRect(
                x: 0.0 + padding,
                y: 0.0 + padding,
                width: ((image?.size.width)! - (padding * 2)) * ratio,
                height: ((image?.size.height)! - (padding * 2)) * ratio))
        imageView.image = image
        cell.addSubview(imageView)

        let label = UILabel(
            frame: CGRect(
                x: imageView.frame.maxX,
                y: imageView.frame.minY,
                width: cellWidth - imageView.frame.maxX,
                height: cellHeight))
        label.text = self.itemTitle[indexPath.row]
        cell.addSubview(label)

        let price = UILabel(
            frame: CGRect(
                x: imageView.frame.maxX,
                y: imageView.frame.minY,
                width: cellWidth - imageView.frame.maxX,
                height: cellHeight))
        price.text = "100"
        price.textAlignment = .right
        cell.addSubview(price)

        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("Cell Value : \(itemTitle[indexPath.row])")
    }
}

1 件の回答 1

0

自己解決しましたので参考までにソースを記載します。

import SpriteKit
import UIKit
...
    override func didMove(to view: SKView) {

        let tableView = TableView(frame: CGRect(x: 20, y: 50, width: 280, height: 200), style: .plain)
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        self.view?.addSubview(tableView)
        tableView.reloadData()
    }
...
class TableView: UITableView, UITableViewDelegate, UITableViewDataSource {

    private var itemImage = ["spaceship", "spaceship", "spaceship", "spaceship", "spaceship", "spaceship", "spaceship", "spaceship", "spaceship", "spaceship"]
    private var itemTitle = ["Cell 1", "Cell 2", "Cell 3", "Cell 4", "Cell 5", "Cell 6", "Cell 7", "Cell 8", "Cell 9", "Cell 0"]
    private var itemPrice = ["100", "200", "300", "400", "500", "600", "700", "800", "900", "000"]

    override init(frame: CGRect, style: UITableViewStyle) {

        super.init(frame: frame, style: style)

        self.delegate = self
        self.dataSource = self
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return itemTitle.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        //var cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell")!
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

        // セルの再利用対策(再利用されたセル上のすべてのノードを削除)
        if cell.isHidden {
            let _ = cell.subviews.map { $0.removeFromSuperview() }
        }

        let padding: CGFloat = 5.0
        let cellWidth = tableView.frame.size.width
        let cellHeight = cell.frame.size.height

        if let image = UIImage(named: self.itemImage[indexPath.row]) {

            let ratio = cellHeight / image.size.height

            let imageView = UIImageView(
                frame: CGRect(
                    x: 0.0 + padding,
                    y: 0.0 + padding,
                    width: (image.size.width * ratio) - (padding * 2),
                    height: (image.size.height * ratio) - (padding * 2)))
            imageView.image = image
            cell.addSubview(imageView)

            let title = UILabel(
                frame: CGRect(
                    x: imageView.frame.maxX,
                    y: imageView.frame.minY,
                    width: (cellWidth - imageView.frame.maxX) - padding,
                    height: cellHeight - padding))
            title.text = self.itemTitle[indexPath.row]
            cell.addSubview(title)

            let price = UILabel(
                frame: CGRect(
                    x: imageView.frame.maxX,
                    y: imageView.frame.minY,
                    width: (cellWidth - imageView.frame.maxX) - padding,
                    height: cellHeight - padding))
            price.text = self.itemPrice[indexPath.row]
            price.textAlignment = .right
            cell.addSubview(price)
        }

        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        //print("Cell Value : \(itemTitle[indexPath.row])")
    }
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。