如何在Android中创建类似键盘按键的按钮？

Question

这个问题看起来很琐碎。我想为我的应用程序创建一个像键盘按键一样的按钮。当我点击它时，弹出窗口会出现在该按钮上方，显示所按下的字母。到目前为止，一切都很好，除了一件事。当我将onFocusChangedListener添加到按钮时，什么也不发生。我需要让我的按钮像键盘按键一样操作，但我不知道如何做。

作为您可以看到的，在按钮获得焦点时会出现一个弹出窗口。我想实现这个效果，但是onFocusChangeListener无法工作。我知道可以使用KeyboardView来实现这一点，但由于其他问题（如将按钮居中和使用layout_weight设置键的高度），我不想使用它。因此，我需要使用普通按钮来实现它。

我的尝试：

第一次尝试：

button.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            popupWindow.showAtLocation(keyboardPopup, Gravity.NO_GRAVITY, location.left - 10, location.top - button.getHeight());
        } else {
            popupWindow.dismiss();
        }
    }
});

结果：什么都没有发生。弹出窗口根本没有出现。

编辑：在Ashley的建议下，我添加了button.setFocusableInTouchMode(true);后，onFocusChanged现在被调用了，但它的行为非常奇怪。弹出窗口有时会显示，但同时当它显示时，它永远不会消失...

我的第二次尝试：

button.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                popupWindow.showAtLocation(keyboardPopup, Gravity.NO_GRAVITY, location.left - 10, location.top - button.getHeight());
                break;
            case MotionEvent.ACTION_UP:
                popupWindow.dismiss();
                break;
        }
        return true;
    }
});

结果：这个表现得非常奇怪。有时弹出窗口会显示，有时不会，但当它显示时，按钮的状态也没有改变。它应该已经聚焦了，但是按钮什么也没发生，它的行为就像处于正常状态一样（在我的drawable xml中声明了state_focused，但按钮的背景并没有随之改变）。似乎onTouchListener覆盖了按钮的功能。

以下是我的布局的一部分：

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="3">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Q"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="W"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="E"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="R"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="T"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Y"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="U"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="I"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="O"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="P"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <View
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="0.5" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="A"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="S"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="D"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="F"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="G"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="H"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="J"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="K"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="L"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <View
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="0.5" />

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <View
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1.5" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Z"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="X"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="C"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="V"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="B"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="N"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="M"
            android:background="@drawable/keyboard_button"
            android:textColor="#FFFFFF"
            android:onClick="onKeyboardClick" />

        <View
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1.5" />

    </LinearLayout>

</LinearLayout>

在代码中：

public void onKeyboardClick(View view) {
    //The view pressed is a button.
    final Button button = (Button) view;

    //Create a PopupWindow.
    LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
    final View keyboardPopup = inflater.inflate(R.layout.keyboard_popup, null);
    final PopupWindow popupWindow = new PopupWindow(keyboardPopup, view.getWidth() + 20, view.getHeight());
    TextView keyboardKey = (TextView) keyboardPopup.findViewById(R.id.keyboard_key);
    keyboardKey.setText(button.getText().toString());

    //Get button location to show the popup above it.
    int[] keyLocation = new int[2];
    button.getLocationOnScreen(keyLocation);
    final Rect location = new Rect();
    location.left = keyLocation[0];
    location.top = keyLocation[1];
    location.right = location.left + button.getWidth();
    location.bottom = location.top + button.getHeight();

    //This is a temporary solution. I don't want to use that.
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //Show popup.
            popupWindow.showAtLocation(keyboardPopup, Gravity.NO_GRAVITY, location.left - 10, location.top - button.getHeight());
            Handler handler = new Handler();
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    //Dismiss popup.
                    popupWindow.dismiss();
                }
            }, 200);
        }
    });
}

任何帮助将不胜感激。谢谢。

- Hussein El Feky

---

你是否尝试添加Log.i以查看是否调用了onFocusChange？ - Bhargav

@Bhargav 是的，如果我使用Ashley Alvarado的答案，它会被调用，但如果我没有写他写的内容，它就不会被调用。然而，它仍然表现得很奇怪，无法正确显示弹出窗口。有时候会显示，但从来不会同时消失。 - Hussein El Feky

Answer 1

我建议您使用第二个尝试的onTouchListener！您有两个问题：

1. 按钮状态没有改变

确实，当您覆盖onTouchListener时，您必须自己模拟状态。请参阅此 SO 线程以了解如何完成此操作： "Press and hold" button on Android needs to change states (custom XML selector) using onTouchListener

2. 有时显示有时不显示

这不应该发生，特别是如果您正确处理了所有相关的触摸事件情况。您将希望在用户按下按钮时显示弹出窗口，并在用户移出按钮时隐藏该弹出窗口（通过滑动或将手指从屏幕上移开）。

请尝试以下代码示例：

button.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                v.setPressed(true);
                showPopupWindow(...);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_OUTSIDE:
            case MotionEvent.ACTION_CANCEL:
                v.setPressed(false);
                hidePopupWindow(...);
                break;
        }
        return true;
    }
});

• 注意使用getActionMasked而不是getAction来更好地处理多点触控。
• 注意v.setPressed(...); - 这将更新按钮状态。
• 注意隐藏弹出窗口的不同情况。

- Eyal Biran

Answer 2

我在你的代码中没有注意到，但有可能你遗漏了。

btn.setFocusableInTouchMode(true);
btn.setFocusable(true);

针对焦点变化监听器。

holder.sAttedenceList.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id)
            {
                if (!parent.hasFocus()) {
                    return;
                }

不是完整的代码，但这是对我有效的一般结构。

- Ashley Alvarado

---

我已经尝试过了，现在onFocusChanged被调用了，但仍然表现得很奇怪。它有时候会显示弹出窗口，如果它被显示出来，它就永远不会消失。 - Hussein El Feky

是的，我明白你的意思。我之前也遇到过这个问题。我想当时只是碰巧通过尝试获取父级元素解决了问题。之前对我有效的代码就是我刚刚添加在顶部的那段。不一定适用于你。 - Ashley Alvarado

如果您能帮助我，我已经添加了一份悬赏... :) - Hussein El Feky

Answer 3

不要设置一个 OnTouchListener，尝试子类化 Button 并重写 onTouchEvent 方法：

public class KeyboardButton extends Button
{
    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                popupWindow.showAtLocation(keyboardPopup, Gravity.NO_GRAVITY, location.left - 10, location.top - button.getHeight());
                break;
            case MotionEvent.ACTION_UP:
                popupWindow.dismiss();
                break;
        }
        return super.onTouchEvent(event);
    }
}

- Brendan Schaenzer

---

一切都一样，没有改变。 - Hussein El Feky

我已经添加了赏金，如果你能帮助我... :) - Hussein El Feky