CODEWITHSUNDEEP
iosswiftuiview
Peter Pik
Peter Pik

Reputation: 11193

embedding custom keyboard into uiview

I've been researching on how to embed my own custom decimal keyboard into a UIView. i've found below image, which i would like to recreate. However i'm not sure on how and what is the best way to get started with such? is it just to create multiple UIButton and then handle it in a method or is there a smart way to recreate such ?

enter image description here

Upvotes: 0

Views: 217

Answers (2)

Senõr Ganso
Senõr Ganso

Reputation: 1734

A collectionView is a great way to do this. Create a new storyboard, put a UICollectionViewController in there. Then create a UICollectionViewCell with an UILabel (for digits and a dot) and an UIImage (for the delete button).

Here's my UICollectionViewController code for this:

import UIKit

    protocol KeypadDelegate: class {
    func did(tapOnKeypad key: KeypadKey)
}

enum KeypadKey {
    case number (value: Int)
    case backspace
}

class KeypadViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    // MARK: - Properties.

    weak var delegate: KeypadDelegate?

    // MARK: - Lifecycle.

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView?.register(cellReuseID: KeypadCVCell.reuseID)
    }

    // MARK: - UICollectionView DataSource.

    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 12
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "KeypadCVCell", for: indexPath) as! KeypadCVCell

        switch indexPath.row {
        case 0...8:
            cell.configure(number: String(indexPath.row + 1))
        case 9:
            cell.setBlank()
        case 10:
            cell.configure(number: "0")
        case 11:
            let image = UIImage(named: "btn_keypad_backspace")
            cell.configure(image: image)
        default:
            break
        }

        return cell
    }

    // MARK: - UICollectionView Delegate.

    override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        switch indexPath.row {
        case 0...8:
            let key: KeypadKey = .number(value: indexPath.row + 1)
            delegate?.did(tapOnKeypad: key)
        case 9:
            break
        case 10:
            let key: KeypadKey = .number(value: 0)
            delegate?.did(tapOnKeypad: key)
        case 11:
            delegate?.did(tapOnKeypad: .backspace)
        default:
            break
        }
    }

    // MARK: - UICollectionView Delegate FlowLayout.

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.bounds.width / 3
        let height = collectionView.bounds.height / 4
        return CGSize(width: width, height: height)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

}

class KeypadCVCell: UICollectionViewCell {

    // MARK: - Outlets.

    @IBOutlet weak var numberLabel: UILabel!
    @IBOutlet weak var backspaceImageView: UIImageView!

    // MARK: - Configuration.

    func configure(number: String) {
        self.numberLabel.text = number
        self.backspaceImageView.isHidden = true
    }

    func configure(image: UIImage?) {
        self.numberLabel.isHidden = true
        self.backspaceImageView.image = image
    }

    func setBlank() {
        self.numberLabel.isHidden = true
        self.backspaceImageView.isHidden = true
    }

}

Upvotes: 1

Sam Bing
Sam Bing

Reputation: 2872

Create a single UIButton action outlet, connect all the buttons to it, check the senders title value, convert it to Int, if not possible it's the comma or if title text is empty it's the backspace.Or create a separate function for the backspace. That would be a relatively easy, clutter free way to do it and wouldn't take much more than a dozen lines of code.

Upvotes: 0

Related Questions