Adding a Color Picker

In this section, we are going to create a UICollectionView that will enable you to select different colors. Start with the code from the end of the Setting up Remodel-AR in UIKit tutorial. A link to the starting project is provided here for your convenience.

37KB

Setting up RemodelAR Code.zip

archive

Step 1

First, we need to create a source for our colors to pull from. Create a new folder called Model. Inside the folder, create a new file Model.swift and edit its contents as below.

import UIKit
impswort RemodelAR

//MARK: - Color picker
struct ColorPicker {
    let color: WallPaint
    
    static var colors: [ColorPicker] {
        [
            ColorPicker(color: WallPaint(id: "0", color: .orange)),
            ColorPicker(color: WallPaint(id: "1", color: .red)),
            ColorPicker(color: WallPaint(id: "2", color: .yellow)),
            ColorPicker(color: WallPaint(id: "3", color: .green)),
            ColorPicker(color: WallPaint(id: "4", color: .black)),
            ColorPicker(color: WallPaint(id: "5", color: .blue)),
            ColorPicker(color: WallPaint(id: "7", color: .brown)),
            ColorPicker(color: WallPaint(id: "8", color: .lightGray)),
            ColorPicker(color: WallPaint(id: "9", color: .darkGray)),
            ColorPicker(color: WallPaint(id: "10", color: .systemPink)),
            ColorPicker(color: WallPaint(id: "11", color: .purple)),
            ColorPicker(color: WallPaint(id: "12", color: .cyan)),
            ColorPicker(color: WallPaint(id: "14", color: .magenta)),
            ColorPicker(color: WallPaint(id: "15", color: .gray))
        ]
    }
}

Step 2

Create a new folder called CollectionView. Inside that folder, create another folder called Cells.

Step 3

Create a new file inside of the Cells folder. For Source, select Cocoa Touch Class. Make it a subclass of UICollectionViewCell, and check the "Also create XIB file" check box. Name it ColorPickerCell.

Step 4

Open ColorPickerCell.swift and update its code using the following.

import UIKit

final class ColorPickerCell: UICollectionViewCell {
    @IBOutlet weak var colorView: UIView!
}

extension ColorPickerCell {
    func configureCell(color: UIColor, indexPath: Int, selectedIndexPath: Int) {
        colorView.backgroundColor = color
        let borderWidth: CGFloat = indexPath == selectedIndexPath ? 5 : 0
        layer.borderColor = UIColor.white.cgColor
        layer.borderWidth = borderWidth
    }
}

Step 5

Open ColorPickerCell.xib and add a UIView and create constraints. Assign the view to the colorView variable in the cell. Change the identifier to ColorPickerCell.

Step 6

Create a new file in the CollectionView folder and name it ColorPickerCollectionView.swift. Edit its contents to match below.

import UIKit
import RemodelAR

final class ColorPickerCollectionView: UICollectionView {
    var colorPicker = [ColorPicker]() {
        didSet {
            reloadData()
        }
    }
    
    var arController: ARController?
    
    private let cellIdentidfier = "ColorPickerCell"
    private var selectedColor = 0
    
    override func awakeFromNib() {
        super.awakeFromNib()
        configure()
    }
}

extension ColorPickerCollectionView {
    private func configure() {
        delegate = self
        dataSource = self
        register(UINib(nibName: cellIdentidfier, bundle: nil), forCellWithReuseIdentifier: cellIdentidfier)
    }
}

extension ColorPickerCollectionView: UICollectionViewDataSource, UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return colorPicker.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if let colorPickerCell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentidfier, for: indexPath) as? ColorPickerCell {
            
            let color = colorPicker[indexPath.item].color
            colorPickerCell.configureCell(color: color.color, indexPath: indexPath.item, selectedIndexPath: selectedColor)
            
            return colorPickerCell
        }
        return UICollectionViewCell()
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        selectedColor = indexPath.item
        arController?.setColor(paint: colorPicker[indexPath.item].color)
        reloadData()
    }
}

Step 7

Open Main.storyboard and add a UICollectionView and setup its constraints. Delete the default cell that was created inside of it. Change the UICollectionView class type to ColorPickerCollectionView. Change the flow type to horizontal. Create an IBOutlet connected to the view in ViewController named colorPickerCollectionView.

Step 8

Open ViewController and modify configureView() as below.

private func configureView() {
    arController = RemodelARLib.makeFloorplanARController(with: arscnView)
    arController?.setColor(paint: ColorPicker.colors[0].color)
    arController?.startScene(reset: true)
    
    colorPickerCollectionView.colorPicker = ColorPicker.colors
    colorPickerCollectionView.arController = arController
}

Step 9

Add the following extension to ViewController to enable touches.

extension ViewController {
    public override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let touch = touches.first
        else { return }
        
        let point = touch.location(in: arscnView)
        arController?.handleTouch(point: point)
    }
}

Step 10

Build and run. You should be able to scroll through the list and select different colors. The border should change to indicate which color is selected. Next we'll add a texture picker so we can apply textures to the walls.

If at any point you need help from the Passio team, please reach out to us at [e-mail]