

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

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

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

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

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

■サンプルコード

[code]

    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])")
        }
    }
    
[/code]


CC BY-SA 3.0
2018-01-02T12:52:22.117
40669
2018-01-02T17:41:12.260
2018-01-02T12:59:43.453
20142
20142
question
swift
SpriteKitでUITableViewを利用しカスタムセル


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

[code]

    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])")
        }
    }
    
[/code]


CC BY-SA 3.0
2018-01-02T15:57:39.037
40675
2018-01-02T17:41:12.260
2018-01-02T17:41:12.260
20142
20142
40669
answer