diff --git a/src/ko/posts/vue3+quasar/app-keyboard.md b/src/ko/posts/vue3+quasar/app-keyboard.md index ed21f3af..ed38fbe1 100644 --- a/src/ko/posts/vue3+quasar/app-keyboard.md +++ b/src/ko/posts/vue3+quasar/app-keyboard.md @@ -158,13 +158,86 @@ export const controlKeyboardMain = ( ### Android 자동 화면 조절 -Android에서 Keyboard가 올라올때 화면이 조절되는 것을 방지하려면 다음 문구를 추가해주세요. +Android에서 Keyboard가 올라올때 화면이 조절되는 것을 제어하려면 다음 문구를 추가해주세요. ```xml ``` + +```java +// MainActivity.java +package org.capacitor.quasar.app; + +import android.graphics.Rect; +import android.os.Bundle; +import android.view.View; +import android.view.ViewTreeObserver; + +import com.getcapacitor.BridgeActivity; +import com.getcapacitor.Plugin; + +public class MainActivity extends BridgeActivity { + private ViewTreeObserver.OnGlobalLayoutListener keyboardLayoutListener = new ViewTreeObserver.OnGlobalLayoutListener() { + @Override + public void onGlobalLayout() { + Rect r = new Rect(); + View view = getWindow().getDecorView(); + view.getWindowVisibleDisplayFrame(r); + + onKeyboardVisibilityChanged(); + } + }; + + private void onKeyboardVisibilityChanged() { + bridge.getWebView().evaluateJavascript("blurInput();", null); + } + + @Override + public void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + + getWindow().getDecorView().getViewTreeObserver().addOnGlobalLayoutListener(keyboardLayoutListener); + } + + @Override + public void onDestroy() { + super.onDestroy(); + + getWindow().getDecorView().getViewTreeObserver().removeOnGlobalLayoutListener(keyboardLayoutListener); + } +} +``` + +
+
+ +`App.vue`에는 다음을 추가해주세요. + +```ts +// App.vue +App.addListener("backButton", () => { + router.back(); +}); + +window.controlKeyboard = () => { + if (useCommonStore().isKeyboardUp) { + const elem: any = document.activeElement; + + elem?.blur(); + } +}; +``` + +```ts +// global.d.ts +declare global { + interface Window { + blurInput: () => void; + } +} +```