E2EHIRING Logo
Jobs
Jobs
courses
Courses
mentorship
Mentorship
more
Moredropdown
E2EHIRING Logo
more
Jobs
Jobs
courses
Courses
mentorship
Mentorship
HomeSepratorIconBlogsSepratorIconCustom numerical keyboard in SwiftUISepratorIcon

Custom numerical keyboard in SwiftUI

Han SoloBala Shiva Shankar
calendar22 Jul 2022
poster

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

  1.  Create an Xcode project with SWIFTUI interface
  2.  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


Thanks For Reading 



Recent Posts

Accelerate Your Career with e2eInternship Program June 2023: Fast Track your Coding Skills!

Accelerate Your Career with e2eInternship Program June 2023: Fast Track your Coding Skills!

Secure Your Future with e2eHiring: Apply for the Ideal Internship Today

Secure Your Future with e2eHiring: Apply for the Ideal Internship Today

Upskilling: Key to Survival and Career Advancement amid Layoffs

Upskilling: Key to Survival and Career Advancement amid Layoffs

Decoding Dream Job: What makes it so difficult to get a dream job?

Decoding Dream Job: What makes it so difficult to get a dream job?

Improving Training Impact Through Effective Presentations

Improving Training Impact Through Effective Presentations

copycopycopycopy

Han Solo

Recent Posts

Accelerate Your Career with e2eInternship Program June 2023: Fast Track your Coding Skills!

Accelerate Your Career with e2eInternship Program June 2023: Fast Track your Coding Skills!

Secure Your Future with e2eHiring: Apply for the Ideal Internship Today

Secure Your Future with e2eHiring: Apply for the Ideal Internship Today

Upskilling: Key to Survival and Career Advancement amid Layoffs

Upskilling: Key to Survival and Career Advancement amid Layoffs

Decoding Dream Job: What makes it so difficult to get a dream job?

Decoding Dream Job: What makes it so difficult to get a dream job?

Improving Training Impact Through Effective Presentations

Improving Training Impact Through Effective Presentations