Custom numerical keyboard in SwiftUI

Bala Shiva Shankar

22 Jul 2022

Why do we need a Custom numerical keyboard ?
While i was working with one of my projects, i landed into a situation where i should recognise back space in an empty Textview. However our default keyboard in iOS cannot recognise backspace in empty TextFields/TextViews. To overcome this situation i would like to create a custom key board where i can recognise the usage of back button.

Steps To Create Custom Numerical Keyboard in SwiftUI

Note: Code will be explained in the form of comments

Create an Xcode project with SWIFTUI interface
Create a view with name CustomNumericalKeyboard and design the keyboard view as mention below
//
//  CustomNumericalKeyboardView.swift
//  CustomNumericalKeyboard
//
//  Created by Bala Shiva Shankar on 22/07/22.
//

import SwiftUI

struct CustomNumericalKeyboardView: View {
  // variable data is the data model
  @ObservedObject var data : CustomKeyboardModel
  // rows are the array of values that can be used in numerical kayboard
  var rows = ["1","2","3","4","5","6","7","8","9","","0","delete.left",]
  var keyboardColor = Color(red: 235/255, green: 235/255, blue: 235/255)
  var body: some View {
  // MARK: - MainVStack
  VStack{
  VStack{
  Spacer().frame( height: UIScreen.main.bounds.size.height/1.8)
  }
  // GeometryReader for allining width and height of the keyboardview
  GeometryReader{reader in
  VStack{
  LazyVGrid(columns: Array(repeating: GridItem(.flexible(),spacing: UIScreen.main.bounds.size.width/18.75), count: 3),spacing:UIScreen.main.bounds.size.width/25){
  ForEach(rows,id:\.self){value in
  // Below Button is for keyboard Button and functionality
  Button(action: {
  //keyboard Button Action
  buttonAction(value:value)})
  {
  ZStack{
  //"delete.left" is the default available image for back button in iOS
  if value == "delete.left"{
  Image(systemName:value)
  .font(.title2)
  .foregroundColor(.black)
  }
  else{
  //keyboard Button Text
  Text(value)
  .font(.title2)
  .fontWeight(.bold)
  .foregroundColor(.black)
  }
  }
  //CustomNumericalKeyboard Frame
  .frame(width: getWidth(frame: reader.frame(in: .global)), height: getHeight(frame: reader.frame(in: .global)))
  .background(value == "" ? keyboardColor:Color.white)
  .cornerRadius(10)
  }

  }
  }

  }

  }
  .padding()
  //CustomNumericalKeyboard background Color
  .background(keyboardColor)
  }
  //MainVstack
  }
  //To get the width of CustomNumericalKeyboard
  func getWidth(frame:CGRect)->CGFloat{
  let width = frame.width
  let actualWidth = width - (UIScreen.main.bounds.size.width/9.375)
  return actualWidth / 3
  }
  //To get the Height of CustomNumericalKeyboard
  func getHeight(frame:CGRect)->CGFloat{
  let height = frame.height
  let actualHeight = height - ((UIScreen.main.bounds.size.height < 800) ? (UIScreen.main.bounds.size.height/14.72):(UIScreen.main.bounds.size.height/27.0666667))
  return actualHeight / 4
  }
  //CustomNumericalKeyboard Button Action
  func buttonAction(value:String){
  //CustomNumericalKeyboard Button Action when delete is pressed
  if value == "delete.left" && data.code != ""{
  data.code.removeLast()
  }
  //CustomNumericalKeyboard Button Action when pressing numerical
  if value != "delete.left"{
  if data.code.count < 10{
  data.code.append(contentsOf: value)
  }
  }
  }
}

3. Create a data model to observe the changes as shown below

class CustomKeyboardModel: ObservableObject {

@Published var code = ""

}

4. where functions getWidth is To get the width of CustomNumericalKeyboard,getHeight is To get the Height of CustomNumericalKeyboard and buttonAction is CustomNumericalKeyboard Button Action respectively

5. Now Our CustomNumericalKeyboard is ready with design and functionality.

6. Create text in ContentView to test the functionality of CustomNumericalKeyboard as shown below

struct ContentView: View {

@StateObject var data = CustomKeyboardModel()

var body: some View {

ZStack{

VStack{

Text(data.code)

}

CustomNumericalKeyboardView(data:data)

}

7. On Execution of above code you can experience CustomNumericalKeyboard functionality