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

问题描述

我正在尝试为android创建一个自定义密码小工具，以作为仅使用具有密码inputType属性的 EditText 的替代方法.我想显示的是一排盒子，并在用户键入自己的图钉时将每个盒子填满.

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密码输入小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！