user21430614
user21430614

Reputation: 41

How do I add a custom button to the SystemKeyboard provided in the KeyboardKit library?

What I want to do is to replace the AutocompleteToolbar area of the keyboard with a custom button of my choice. The KeyboardKit library provides a SystemKeyboard that mimics the default iOS keyboard. I've tried reading the documentation provided here where the following code will use the SystemKeyboard the library provides and hide the AutocompleteToolbar:

class KeyboardViewController: KeyboardInputViewController {

    func viewWillSetupKeyboard() {
        super.viewWillSetupKeyboard()
        setup { controller in
            SystemKeyboard(
                controller: controller,
                autocompleteToolbar: .none
            )
        }
    }
}

But I don't understand how to replace that toolbar with my own custom button that does something I want. I only understand fragments of creating a button, but not how to insert it in the right place, nor do I understand how the views work. After Googling I only know that views are like the UI, but not how things are "injected" into a keyboard. It's so overwhelming that I do not know what smaller pieces to Google to find the answer.

I tried putting the documentation into GPT4 and have it give me some ideas. It started spitting out some obj-c code and some View classes. Obviously none worked. I understand I have to call viewWillSetupKeyboard to update the keyboard but that is about it. I tried Googling how to make an iOS keyboard and that didn't work because I would have to come up with the entire default system keyboard look myself. I tried reading the documentation but I am too newbie to understand it fully.

Upvotes: 4

Views: 731

Answers (3)

Shivbaba's son
Shivbaba's son

Reputation: 1369

class KeyboardViewController: KeyboardInputViewController {
    func viewWillSetupKeyboard() {
        super.viewWillSetupKeyboard()
        setup { controller in
            SystemKeyboard(
                controller: controller,
                autocompleteToolbar: .none
            )
        }
    }
}

Can you check some options in auto complete field

Upvotes: -1

Lễ Ngọc
Lễ Ngọc

Reputation: 31

You have to inherit the class KeyboardInputViewController. After that you can call the method viewWillSetupKeyboard and call method setup into viewWillSetupKeyboard => create class custom keyboard.

class KeyboardViewController: KeyboardInputViewController {
    override func viewWillSetupKeyboard() {
        super.viewWillSetupKeyboard()
        setup { controller in
            MyCustomKeyboard(controller: controller)
        }
    }
}

SystemKeyboard(
    state: controller.state,
    services: controller.services,
    buttonContent: { $0.view },
    buttonView: { $0.view },
    emojiKeyboard: { $0.view },
    toolbar: { _ in MyCustomToolbar() }
)

Upvotes: 0

Omair
Omair

Reputation: 7

You can do the following and where I've commented your buttons here create the buttons there.

class KeyboardViewController: KeyboardInputViewController {

    func viewWillSetupKeyboard() {
        super.viewWillSetupKeyboard()
        setup { controller in
            VStack(spacing: 0) {
                HStack(spacing: 0) {
                    AutocompleteToolbar(
                        ...
                    ).frame(maxWidth: .infinity)
                    // Your buttons here
                }
                SystemKeyboard(
                    controller: controller,
                    autocompleteToolbar: .none
                )
            }
        }
    }
}

Upvotes: 0

Related Questions