如何在安卓系统中构建键盘提示布局

Question

目前我已经使用线性布局创建了一个键盘布局，每个键都是一张图片，例如“Q”，“W”，“E”等都是不同的图片。

问题是，如何添加上面的提示图片？想法是，提示图片默认情况下是隐藏的，当用户长按键时，提示图片会显示出来。

我已经有了一组提示图片。有什么想法可以将它们添加到键盘布局中吗？

非常感谢您的帮助。以下是键盘布局参考。

<LinearLayout
        android:id="@id/training_keyboard"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:padding="5dp"
        android:background="@color/colorBg">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:weightSum="10"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/key1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="手"
                android:src="@drawable/keyboard_letter_r1_1" />

            <ImageView
                android:id="@+id/key2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="田"
                android:src="@drawable/keyboard_letter_r1_2" />

            <ImageView
                android:id="@+id/key3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="水"
                android:src="@drawable/keyboard_letter_r1_3" />

            <ImageView
                android:id="@+id/key4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="口"
                android:src="@drawable/keyboard_letter_r1_4" />

            <ImageView
                android:id="@+id/key5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="廿"
                android:src="@drawable/keyboard_letter_r1_5" />

            <ImageView
                android:id="@+id/key6"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="卜"
                android:src="@drawable/keyboard_letter_r1_6" />

            <ImageView
                android:id="@+id/key7"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="山"
                android:src="@drawable/keyboard_letter_r1_7" />

            <ImageView
                android:id="@+id/key8"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="戈"
                android:src="@drawable/keyboard_letter_r1_8" />

            <ImageView
                android:id="@+id/key9"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="人"
                android:src="@drawable/keyboard_letter_r1_9" />

            <ImageView
                android:id="@+id/key10"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="心"
                android:src="@drawable/keyboard_letter_r1_10" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:weightSum="10"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/key11"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="日"
                android:src="@drawable/keyboard_letter_r2_1" />

            <ImageView
                android:id="@+id/key12"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="尸"
                android:src="@drawable/keyboard_letter_r2_2" />

            <ImageView
                android:id="@+id/key13"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="木"
                android:src="@drawable/keyboard_letter_r2_3" />

            <ImageView
                android:id="@+id/key14"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="火"
                android:src="@drawable/keyboard_letter_r2_4" />

            <ImageView
                android:id="@+id/key15"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="土"
                android:src="@drawable/keyboard_letter_r2_5" />

            <ImageView
                android:id="@+id/key16"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="竹"
                android:src="@drawable/keyboard_letter_r2_6" />

            <ImageView
                android:id="@+id/key17"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="十"
                android:src="@drawable/keyboard_letter_r2_7" />

            <ImageView
                android:id="@+id/key18"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="大"
                android:src="@drawable/keyboard_letter_r2_8" />

            <ImageView
                android:id="@+id/key19"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:tag="中"
                android:padding="2dp"
                android:src="@drawable/keyboard_letter_r2_9" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:weightSum="10"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/sound"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="2"
                android:padding="2dp"
                android:src="@drawable/sound_on" />

            <ImageView
                android:id="@+id/key20"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="難"
                android:src="@drawable/keyboard_letter_r3_1" />

            <ImageView
                android:id="@+id/key21"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="金"
                android:src="@drawable/keyboard_letter_r3_2" />

            <ImageView
                android:id="@+id/key22"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="女"
                android:src="@drawable/keyboard_letter_r3_3" />

            <ImageView
                android:id="@+id/key23"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="月"
                android:src="@drawable/keyboard_letter_r3_4" />

            <ImageView
                android:id="@+id/key24"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="弓"
                android:src="@drawable/keyboard_letter_r3_5" />

            <ImageView
                android:id="@+id/key25"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="一"
                android:src="@drawable/keyboard_letter_r3_6" />

            <ImageView
                android:id="@+id/reload"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="2"
                android:padding="2dp"
                android:src="@drawable/reload" />

        </LinearLayout>
</LinearLayout>

- user782104

---

自定义最外层布局，命名为KeyboardLayout，并覆盖onDraw方法，在super绘制后在画布上绘制动态布局。 - Qamar

你尝试过使用PopupWindow吗？https://developer.android.com/reference/android/widget/PopupWindow.html - Kishan Vaghela

Answer 1

使用PopupWindow，在您的关键视图上方显示弹出视图。

private void showPopUp(View v) {  
    LinearLayout layout = new LinearLayout(this);  
    layout.setBackgroundColor(Color.GRAY);  
    TextView tv = new TextView(this);  
    tv.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
    tv.setText("I'm a pop -----------------------------!");  
    tv.setTextColor(Color.WHITE);  
    layout.addView(tv);  

    popupWindow = new PopupWindow(layout,120,120);  

    popupWindow.setFocusable(true);  
    popupWindow.setOutsideTouchable(true);  
    popupWindow.setBackgroundDrawable(new BitmapDrawable());  

    int[] location = new int[2];  
    v.getLocationOnScreen(location);  

    popupWindow.showAtLocation(v, Gravity.NO_GRAVITY, location[0], location[1]-popupWindow.getHeight());  
}  

- peter zhang

---

谢谢您的回答，有没有办法在XML布局中实现？ - user782104

@user782104 视图布局 = View.inflate(v.getContext(), R.layout.xxx, null); 弹出窗口 = new PopupWindow(视图布局, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); - peter zhang