TextField in a Container - Keyboard hides Text

Question

I have a TextField in a container (VBox) in the bottom. When i select the TextField to enter some text it gets hidden behind the keyboard (iPhone). I put the VBox in ScrollPane but still the same.

Can i get the keyboard somehow to get its height? How do i place TextFields which are not covered from keyboard?

Thank you for your help.

Answer 1

At this moment, there is no built-in method in JavaFX or JavaFXPorts to get the (native) iOS soft keyboard.

The solution to get the keyboard and find out if any node, like a TextField will be covered by it, would require a Service from those available in the Gluon Charm Down library, but for now there is no such KeyboardService.

Based on native solutions like this, it's easy to get a notification when the keyboard is being shown or hidden. So we could make use of those listeners and send the height value back to the JavaFX layer.

So let's create the KeyboardService taking into account how the services are created in the Charm Down library.

Since this is a little bit out of scope here, I've created this gist with the required files.

Follow these steps to make it work:

1. Create a Gluon Project

Create a Gluon project (single view) with the latest version of the Gluon plugin for your IDE.

2. Add the KeyboardService interface

Add the package com.gluonhq.charm.down.plugins. Add the classes KeyboardService (link) and KeyboardServiceFactory (link).

public interface KeyboardService {
    public ReadOnlyFloatProperty visibleHeightProperty();
}

3. iOS implementation

Under the iOS package add the iOS implementation of the service IOSKeyboardService (link).

public class IOSKeyboardService implements KeyboardService {

    static {
        System.loadLibrary("Keyboard");
        initKeyboard();
    }

    private static ReadOnlyFloatWrapper height = new ReadOnlyFloatWrapper();

    @Override
    public ReadOnlyFloatProperty visibleHeightProperty() {
        return height.getReadOnlyProperty();
    }

    // native
    private static native void initKeyboard();

    private void notifyKeyboard(float height) {
        Platform.runLater(() -> this.height.setValue(height));
    }

}

4. Native code

Create a native folder under /src/ios and add the Keyboard.h (link) file:

#import <UIKit/UIKit.h>
#include "jni.h"

@interface Keyboard : UIViewController {}
@end

void sendKeyboard();

and the Keyboard.m (link) file:

static int KeyboardInited = 0;
jclass mat_jKeyboardServiceClass;
jmethodID mat_jKeyboardService_notifyKeyboard = 0;
Keyboard *_keyboard;
CGFloat currentKeyboardHeight = 0.0f;

JNIEXPORT void JNICALL Java_com_gluonhq_charm_down_plugins_ios_IOSKeyboardService_initKeyboard
(JNIEnv *env, jclass jClass)
{
    if (KeyboardInited)
    {
        return;
    }
    KeyboardInited = 1;

    mat_jKeyboardServiceClass = (*env)->NewGlobalRef(env, (*env)->FindClass(env, "com/gluonhq/charm/down/plugins/ios/IOSKeyboardService"));
    mat_jKeyboardService_notifyKeyboard = (*env)->GetMethodID(env, mat_jKeyboardServiceClass, "notifyKeyboard", "(F)V");
    GLASS_CHECK_EXCEPTION(env);

    _keyboard = [[Keyboard alloc] init];
}

void sendKeyboard() {
    GET_MAIN_JENV;
    (*env)->CallVoidMethod(env, mat_jKeyboardServiceClass, mat_jKeyboardService_notifyKeyboard, currentKeyboardHeight);
}

@implementation Keyboard 

- (void) startObserver 
{
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
}

- (void) stopObserver 
{
    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillShowNotification object:nil];
    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillHideNotification object:nil];
}

- (void)keyboardWillShow:(NSNotification*)notification {
    NSDictionary *info = [notification userInfo];
    CGSize kbSize = [[info objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue].size;
    currentKeyboardHeight = kbSize.height;
    sendKeyboard();
}

- (void)keyboardWillHide:(NSNotification*)notification {
    currentKeyboardHeight = 0.0f;
    sendKeyboard();
}

@end

5. Build the native library

On a Mac with a recent version of XCode, you can build the native library libKeyboard.a. For that you need to add the xcodebuild task to the build.gradle file of the project (link). It is based on the ios-build.gradle file from Charm Down.

task xcodebuild {
    doLast {
        xcodebuildIOS("$project.buildDir","$project.projectDir", "Keyboard")
    }
}

Save your project, and run ./gradlew clean build xcodebuild from command line under the project root.

If everything is in place you should find libKeyboard.a under build/native. Copy the file, create the folder jniLibs under src/ios, and paste it there.

6. Implement the service

Add a TextField to the BasicView, and change the alignment to BOTTOM-CENTER.

VBox controls = new VBox(15.0, label, button, new TextField());
controls.setAlignment(Pos.BOTTOM_CENTER);

Implement the service:

Services.get(KeyboardService.class).ifPresent(keyboard -> {
    keyboard.visibleHeightProperty().addListener((obs, ov, nv) -> 
        setTranslateY(-nv.doubleValue()));
});

7. Deploy and run

You should have everything in place. Plug your iPhone/iPad, and run ./gradlew --info launchIOSDevice.

When the textField gets the focus, the soft keyboard shows up, and the view is translated, so the textField is fully visible:

Hopefully this service will be included in Charm Down at some point. But this is also a good example of how you can add custom services. Also note the Charm Down project is open source, so any contribution is wellcome.