Swift Custom keyboard - show extra letters pop-up on keyboard long press?

Question

I have a custom keyboard extension in my app which is developed using swift. They keyboard works fine. I wanted to add the functionality of showing a pop-up with extra characters when long-press on a keyboard button like the default iOS keyboard. Something like this:

I searched a lot, but most of them are un-answered and the answered ones are in Obj-C. I don't know much about Obj-C and am fairly new to swift programming also.

I have already looked at this, this and this. But these are not of much help.

Any help would be really appreciated.

Anjelicaanjou

are you using Custom KeyBoard View or using defuilt keyboard ? – Roldan

I am using a custom keyboard extension – Anjelicaanjou

answer Updated with bug fix, please check and let me know if this solved your porob @Anjelicaanjou – Roldan

if want to make same Appearance like ios pop View have , i can make it ,,you need to contact me personally ,,,i'll send you the project file , chat.stackoverflow.com/rooms/144892/ios-dev-expert – Roldan

this questions has beed answered below and not accepted yet , you can accept the answer which helped you , accepting answer helps other. @Anjelicaanjou – Roldan

I know, But none of the answers helped me. – Anjelicaanjou

Did u manage to solve this? If yes, would you mind putting the solution here? – Alansen

Answer 1

1. Add Button on your View
(This is just to show you)

let btn: UIButton=UIButton(frame: CGRect(x: 5, y: 70, width: 30, height: 30))
     btn.setTitle("A", for: .normal)
    btn.setTitleColor(UIColor.black, for: .normal);
     self.view.addSubview(btn)

2. Add Long PressGesture on your button

     let longGesture = UILongPressGestureRecognizer(target: self, action: #selector(longPress(sender:)))
longGesture.minimumPressDuration = 1.2
        btn.addGestureRecognizer(longGesture)

3. Handle Long press Gesture ,

You can Add PopUpView and add Some button on it ,

⚠️ Note: You have Multiple buttons so you have to check From CGPoint on Which Button it was tapped on

  func longPress( sender: Any) {
            
            let longPressGesture = sender as! UILongPressGestureRecognizer

//Only run this code When State Begain
if longPressGesture.state != UIGestureRecognizerState.Began {
            return
     }
// if PopUpView is Already in added than remove and than  add
 if let checkView = self.view.viewWithTag(1001) as? UIView {
         // remove popView
        popUpView .removeFromSuperview()
   }
            
            let tapLocation = longPressGesture.location(in: self.view)
            
            
            popUpView=UIView(frame: CGRect(x: tapLocation.x-10, y: tapLocation.y-65, width: 150, height: 60))
            popUpView.backgroundColor=UIColor.orange
            popUpView.layer.cornerRadius=5
            popUpView.layer.borderWidth=2
            popUpView.tag=1001
            popUpView.layer.borderColor=UIColor.black.cgColor
            
            let btn0: UIButton=UIButton(frame: CGRect(x: 5, y: 5, width: 30, height: 30))
            btn0.setTitle("A1", for: .normal)
            btn0.setTitleColor(UIColor.black, for: .normal);
            btn0.layer.borderWidth=0.5
            btn0.layer.borderColor=UIColor.lightGray.cgColor
            
            popUpView.addSubview(btn0)
            
            let btn1: UIButton=UIButton(frame: CGRect(x: 35, y: 5, width: 30, height: 30))
            btn1.setTitle("A2", for: .normal)
            btn1.setTitleColor(UIColor.black, for: .normal);
            btn1.layer.borderWidth=0.5
            btn1.layer.borderColor=UIColor.lightGray.cgColor
            
            popUpView.addSubview(btn1)
            
            let btn2: UIButton=UIButton(frame: CGRect(x: 70, y: 5, width: 30, height: 30))
            btn2.setTitle("A2", for: .normal)
            btn2.setTitleColor(UIColor.black, for: .normal);
            btn2.layer.borderWidth=0.5
            btn2.layer.borderColor=UIColor.lightGray.cgColor
            
            popUpView.addSubview(btn2)
            
            btn0.addTarget(self, action: #selector(self.buttonAction(sender:)),
                             for: UIControlEvents.touchUpInside)
            btn1.addTarget(self, action: #selector(self.buttonAction(sender:)),
                           for: UIControlEvents.touchUpInside)
            btn2.addTarget(self, action: #selector(self.buttonAction(sender:)),
                           for: UIControlEvents.touchUpInside)
     
             self.view.addSubview(popUpView)
            
           
        }

4. Handle The extra Button Press

(Do your Stuff here add remove popUpView from SuperView)

      func buttonAction( sender: Any) {
            
            // Do your Stuff Here
            
            
            //Than remove popView
            popUpView .removeFromSuperview()
        }

Result ✅

✅ Note: You can Draw custom Shape of PopUpView Using UIBezierPath

Roldan

Answer 2

You should use LongPress Recognizer. Please check this for more detail. Long press delete key of a custom keyboard in swift

Kb

I am not looking for how to use LongPressGestureRecogniser. I am looking for how to show the pop-up for the extra characters. – Anjelicaanjou

Answer 3

This is very simple follow this step for achieve that task

• Open your main story board
• Select your TextField where you want multiple letter want's to show.
• Open Attribute inspector from the right of your screen
• Scroll it up and looks for capitalization just below of Min font size
• Set capitalization as Words
• Set all other Default and mainly keyboard type Now build and run that and check with letter s, e and etc.

Barretter

I dont have a particular TextField for which I want to show multiple letters. As i mentioned in the question, I am making a custom keyboard extension. Meaning I am making a keyboard that can be used in any app. – Anjelicaanjou

So you want's your own key board and want to show multiple character as shown in your figure. if yes then i'll get back to you with my answer as soon as possible. – Barretter

yes. I have build my own keyboard using the chrome keyboard extension. Now want to implement the above shown functionality – Anjelicaanjou