Custom Cells Using UITableView with SpriteKit

Thank you for your continuous support.

I would like to use UITableView with SpriteKit.
We would like to customize the cells by referring to the following site.
In the following source, the cell is composed of Image + Title + Price.

However, when I scrolled, the images and titles were created one after another on the existing cells.
Thank you for your encouragement.

I would appreciate it if you could let me know if there is any other good way.

Reference Site
https://stackoverflow.com/questions/41626348/using-a-uitableview-in-spritekit

■ Sample code

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

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

    private variableTitle= ["Cell1", "Cell2", "Cell3", "Cell4", "Cell5", "Cell6", "Cell7", "Cell8", "Cell9", "Cell0" ]

    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")
    }

    functableView(_tableView:UITableView, numberOfRowsInSection section:Int) - > Int{
        return itemTitle.count
    }

    functableView(_tableView:UITableView, cellForRowAtindexPath:IndexPath) - >UITableViewCell{

        letcell=tableView.dueReusableCell(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)!

        letimageView= 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)

        letlabel = 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
    }

    functableView(_tableView:UITableView, didSelectRowAtindexPath:IndexPath){
        print("Cell Value:\(itemTitle [indexPath.row]")")
    }
}

swift

2022-09-30 19:07

1 Answers

Now that it's self-resolved, I'll write down the source for your reference.

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

        lettableView = 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()
    }
...
classTableView:UITableView,UITableViewDelegate,UITableViewDataSource{

    private variableImage=["spaceship", "spaceship", "spaceship", "spaceship", "spaceship", "spaceship", "spaceship", "spaceship", "spaceship" ]
    private variableTitle= ["Cell1", "Cell2", "Cell3", "Cell4", "Cell5", "Cell6", "Cell7", "Cell8", "Cell9", "Cell0" ]
    private variablePrice=["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")
    }

    functableView(_tableView:UITableView, numberOfRowsInSection section:Int) - > Int{
        return itemTitle.count
    }

    functableView(_tableView:UITableView, cellForRowAtindexPath:IndexPath) - >UITableViewCell{

        // varcell: UITableViewCell=tableView.dequeueReusableCell (withIdentifier: "cell")!
        letcell=tableView.dueReusableCell(withIdentifier: "cell", for:indexPath)

        // Cell reuse measures (removes all nodes on the reused cell)
        ifcell.isHidden{
            let_=cell.subviews.map {$0.removeFromSuperview()}
        }

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

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

            let ratio=cellHeight/image.size.height

            letimageView= 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
    }

    functableView(_tableView:UITableView, didSelectRowAtindexPath:IndexPath){
        // print("Cell Value:\(itemTitle [indexPath.row]")")
    }
}

2022-09-30 19:07

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656