android - WhatsApp のようなソフトキーボードの上にビューを描画する方法は?

Question

ViewWhatsApp やハングアウトなどのキーボードの上に追加する方法を知りたいです。チャット画面で、開いたソフトキーボードの上に絵文字ビューを挿入します。

サンプル画像

この動作を達成する方法を知っている人はいますか?

score 20 · Accepted Answer

さて、ここでチャット用のサンプルキーボードを作成しました...

ここでは、ポップアップウィンドウを表示するためにポップアップウィンドウを使用し、ポップアップの高さはキーボードの高さによって動的に計算されます

// Initially defining default height of keyboard which is equal to 230 dip
        final float popUpheight = getResources().getDimension(
                R.dimen.keyboard_height);
        changeKeyboardHeight((int) popUpheight);

// Creating a pop window for emoticons keyboard
    popupWindow = new PopupWindow(popUpView, LayoutParams.MATCH_PARENT,
            (int) keyboardHeight, false);

高さは次の関数を使用して計算されます。

/**
 * Checking keyboard height and keyboard visibility
 */
int previousHeightDiffrence = 0;
private void checkKeyboardHeight(final View parentLayout) {

    parentLayout.getViewTreeObserver().addOnGlobalLayoutListener(
            new ViewTreeObserver.OnGlobalLayoutListener() {

                @Override
                public void onGlobalLayout() {

                    Rect r = new Rect();
                    parentLayout.getWindowVisibleDisplayFrame(r);

                    int screenHeight = parentLayout.getRootView()
                            .getHeight();
                    int heightDifference = screenHeight - (r.bottom);

                    if (previousHeightDiffrence - heightDifference > 50) {                          
                        popupWindow.dismiss();
                    }

                    previousHeightDiffrence = heightDifference;
                    if (heightDifference > 100) {

                        isKeyBoardVisible = true;
                        changeKeyboardHeight(heightDifference);

                    } else {

                        isKeyBoardVisible = false;

                    }

                }
            });

}

これらすべてのものを使用して、完璧なオーバーラップキーボードを作成できます....

次に、顔文字のビューページャーとグリッドビューでポップアップウィンドウを膨らませます。

また、これらの絵文字をリストビューとチャットウィンドウに表示するためにスパン可能な文字列を使用します

score 13 · Accepted Answer

かなりの時間をかけて調査と試行錯誤を重ねた結果、上記のChirag Jainのものに似た別の解決策を見つけましたが、カスタムダイアログを使用しています。

    mDialogKeyboard = new Dialog(this,android.R.style.Theme_NoTitleBar);
    mDialogKeyboard.setContentView(R.layout.your_custom_layout);
    mDialogKeyboard.getWindow().setFlags(WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL,WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL);
    mDialogKeyboard.getWindow().setFlags(WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH,WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH);
    mDialogKeyboard.getWindow().setFlags(WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM,WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM);
    mDialogKeyboard.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);

    WindowManager.LayoutParams lp=mDialogKeyboard.getWindow().getAttributes();    
    lp.width=WindowManager.LayoutParams.MATCH_PARENT;
    lp.height=mSoftKeyboardHeight;
    lp.gravity=Gravity.BOTTOM | Gravity.LEFT;
    lp.dimAmount=0;

Chirag Jainの答えはよりきれいに見えるという事実にもかかわらず、別の方法があるためにこれをここに投稿します。

score 3 · Accepted Answer

私の知る限り、他のアプリケーションを利用することはできます。私自身がそのようなアプリを設計しました。キーボードやその他の特定のアプリケーションなどのアプリケーションでの描画に関しては、キーボードとまったく同じ高さのレイアウトを定義する必要があると思います。したがって、それはデバイスによって異なります。だから、これは不可能です。

私は今でも、WhatsApp がスマイリーボタンを押すとソフトキーボードを閉じて、それを独自のフラグメントと呼ぶという考えに固執しています。

これをさらに追求したい場合は、他のアプリケーションの上に「ウィンドウ」を描画する方法を次に示します。これらは、レイアウトパラメータである必要があります。

params = new WindowManager.LayoutParams(
                WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY,
                WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN,
                PixelFormat.TRANSLUCENT);

とはいえ、アクティビティをキーボード上のみにしたいので、幅は絶対ピクセル値に変更されます。

質問を誤解している場合は、訂正してください。

score 0 · Accepted Answer

最近、ソフトキーボードの上にあるビューを実装する必要がありました。@Chirag Jainの解決策はほぼ正しいですが、画面の下部にあるシステムボタンではカウントされません! これにより、NEXUS 6 などの一部のデバイスでキーボードの高さが正しくなくなります。この解決策は、すべてのデバイスで機能するはずです。

1）ビューを含むレイアウトを作成します

<RelativeLayout
        android:id="@+id/keyboard_info_container"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:background="@color/C12"
        android:padding="10dp"
        android:visibility="invisible">

           ....

    </RelativeLayout>

2) ビューのバインド

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View rootview = inflater.inflate(R.layout.notifications_email_settings_fragment, container, false);

    ButterKnife.bind(this, rootview);

    checkKeyboardHeight(rootview);

3) キーボードチェックと表示余白の設定

private void checkKeyboardHeight(final View parentLayout) {

    parentLayout.getViewTreeObserver().addOnGlobalLayoutListener(
            new ViewTreeObserver.OnGlobalLayoutListener() {

                int previousHeightDiffrence = 0;
                int systemBarHigh = 999999;

                @Override
                public void onGlobalLayout() {


                    Rect r = new Rect();
                    parentLayout.getWindowVisibleDisplayFrame(r);

                    int screenHeight = parentLayout.getRootView()
                            .getHeight();
                    int keyboardHeight = screenHeight - (r.bottom);

                    if(systemBarHigh > keyboardHeight) {
                        systemBarHigh = keyboardHeight;
                    }

                    if (keyboardHeight > 250) {

                        int keyboardHightWithoutSystemBar = keyboardHeight - systemBarHigh;
                        // no need to update when the keyboard goes down
                        if (previousHeightDiffrence != keyboardHightWithoutSystemBar) { // if (Math.abs(previousHeightDiffrence - keyboardHeight) > 10) {
                            adjustKeyboard(keyboardHightWithoutSystemBar);
                        }

                        keyboardInfoContainer.setVisibility(View.VISIBLE);
                        isKeyBoardVisible = true;
                        previousHeightDiffrence = keyboardHightWithoutSystemBar;

                    } else {
                        isKeyBoardVisible = false;
                        if (keyboardInfoContainer != null) {
                            keyboardInfoContainer.setVisibility(View.INVISIBLE);
                        }
                    }
                }
            });
}

private void adjustKeyboard(int keyboardHeight) {
    RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) keyboardInfoContainer.getLayoutParams();
    lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
    lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
    lp.bottomMargin = keyboardHeight;
    keyboardInfoContainer.requestLayout();
}

score 0 · Accepted Answer

私の考えでは、彼らは笑顔用の独自のキーパッドを作成し、笑顔のアイコンまたはキーパッドのアイコンをクリックすると、笑顔のキーパッドが非表示になり、通常のキーパッドが表示されます。whats app ケースには 2 つのシナリオがあります。1) editext の最初の時間にフォーカスしないと、キーパッドの表示ボタンが表示されず、スマイルキーパッドの高さが通常のキーパッドとまったく同じで、キーパッドの高さのみが取得されます。ビューのレイアウトが変更された後、キーパッドが表示された後にのみ、つまり独自のキーパッドを作成していることを意味します。2) edittext にフォーカスしてスマイルボタンをクリックすると、キーパッドボタンを表示するオプションが表示されます私がこれについて正しくない場合

android - WhatsApp のようなソフト キーボードの上にビューを描画する方法は?

7 に答える 7

Related

Reference

android - WhatsApp のようなソフトキーボードの上にビューを描画する方法は?