自定义 Android PIN 码输入小部件 [英] Custom Android pin code entry widget

问题描述

我正在尝试为 android 创建一个自定义 pin 代码小部件，以替代仅使用带有密码 inputType 属性的 EditText.我想显示的是一排框，并在用户键入他的 pin 时填充每个框.

I am trying to create a custom pin code widget for android as an alternative to just using an EditText with a password inputType attribute. What I'd like to display is a row of boxes, and have each box be filled as the user types his pin.

其他人做了类似的事情，但结果是固定数量的 EditText 视图，并且有很多 ugly 代码用于在键入字符时交换焦点或删除.这不是我想要采取的方法；相反，我将我的设计设计为具有可自定义的长度(简单)并表现为单焦点视图(不太容易).

Someone else did something like this but it turned out to be a fixed number of EditText views and there was a lot of ugly code for swapping focus as characters were typed or deleted. This is NOT the approach I want to take; rather, I'm designing mine to have customizable length (easy) and behave as a single focusable view (not so easy).

到目前为止，我的概念是 LinearLayout(用于保存框")和 EditText(用于存储用户的输入)之间的某种混合.

My concept thus far is some kind of hybrid between a LinearLayout (to hold the "boxes") and an EditText (to store the user's input).

这是目前为止的代码...

This is the code so far...

public class PinCodeView extends LinearLayout {
    protected static final int MAX_PIN_LENGTH = 10;
    protected static final int MIN_PIN_LENGTH = 1;

    protected int pinLength;
    protected EditText mText;

    public PinCodeView(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.PinCodeView);
        try {
            pinLength = a.getInt(R.styleable.PinCodeView_pinLength, 0);
        } finally {
            a.recycle();
        }

        pinLength = Math.min(pinLength, MAX_PIN_LENGTH);
        pinLength = Math.max(pinLength, MIN_PIN_LENGTH);

        setupViews();

        Log.d(TAG, "PinCodeView initialized with pinLength = " + pinLength);
    }

    private void setupViews() {
        LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(
                Context.LAYOUT_INFLATER_SERVICE);
        for (int i = 0; i < pinLength; i++) {
            // inflate an ImageView and add it
            View child = inflater.inflate(R.layout.pin_box, null, false);
            addView(child);
        }
    }

    public CharSequence getText() {
        // TODO return pin code text instead
        return null;
    }

    public int length() {
        // TODO return length of typed pin instead
        return pinLength;
    }

    @Override
    public boolean onCheckIsTextEditor() {
        return true;
    }

    @Override
    public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
        // TODO return an InputConnection
        return null;
    }
}

关于这些覆盖:onCheckIsTextEditor() 应该返回 true 并且 onCreateInputConnection(EditorInfo outAttrs) 应该返回一个新的 InputConnection 对象以与 InputMethod(键盘)进行交互，但这就是我所知道的.

About those overrides: onCheckIsTextEditor() should return true and onCreateInputConnection(EditorInfo outAttrs) should return a new InputConnection object to interact with an InputMethod (a keyboard), but that's all I know.

有人知道我是否走在正确的轨道上吗?有没有人使用过 InputConnection 或让他们自己的可编辑视图能够提供指导?

Does anyone know if I'm on the right track? Has anyone done work with InputConnection before or made their own editable views able to give guidance?

(编辑 1)在看了这个之后，似乎我应该继承 BaseInputConnection 并提供一个 TextView 或 EditText 作为它的目标:

(Edit 1) After looking at this some more, it seems I should subclass BaseInputConnection and supply a TextView or EditText as its target:

    @Override
    public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
        if (!onCheckIsTextEditor()) {
            return null;
        }
        return new BaseInputConnection(mText, true);
    }

假设这确实存储了键入的文本，我仍然需要一些方法来更新视图以反映内容更改...

Assuming this does store the text as it is typed, I still need some way to update the views to reflect the content change...

(编辑 2)所以我将此自定义视图添加到屏幕进行测试.它显示框的数量，并且整个视图是可聚焦的，但键盘永远不会弹出.我知道它获得/失去焦点，因为这些框适当地显示突出显示，并且我设置了一个 OnFocusChangedListener 来写入 logcat.

(Edit 2) So I added this custom view to a screen for testing. It shows the number of boxes, and the whole view is focusable, but the keyboard never pops up. I know it gains/loses focus because the boxes show highlighting appropriately and I set an OnFocusChangedListener to write to logcat.

当可编辑视图获得焦点时，是什么让实际的键盘出现?

What makes an actual keyboard appear when an editable view takes focus?

推荐答案

我在这方面取得了长足的进步，不再需要 InputConnection 方面的帮助.简而言之，您扩展 BaseInputConnection 并覆盖 getEditable() 以返回一个 Editable.在这种情况下，我将返回 PinCodeView 内部使用的私有 TextView.PinCodeView 还覆盖了几个方法，如 onKey[foo]() 并将调用转发到内部 TextView.其余的只是使用 TextWatcher 在文本更改时更新其中一个子 ImageView.

I've made considerable progress on this and no longer need help with the InputConnection. In short, you extend BaseInputConnection and override getEditable() to return an Editable. In this case, I'm returning a private TextView used internally by the PinCodeView. PinCodeView is also overriding several methods like onKey[foo]() and forwarding the call to the internal TextView. The rest is just using a TextWatcher to update one of the child ImageViews whenever the text changes.

效果很好.还有一些小问题需要完善，但我会将这些问题作为单独的问题解决并在此处结束.

It works really well. There are still a few minor issues left to polish it up, but I'll address those as separate questions and close this here.

这篇关于自定义 Android PIN 码输入小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！