Benutzerdefinierte Android-pin-code-Eingabe-widget
Ich versuche zum erstellen einer benutzerdefinierten pin-code-widget für android als alternative zu nur mit einem EditText
mit einem Passwort inputType Attribut. Das, was ich möchte-display ist eine Reihe von Feldern, und jedes Feld ausgefüllt werden, während der Benutzer tippt seine pin.
Jemand so etwas Tat, aber es stellte sich heraus, dass eine Feste Anzahl von EditText
Ansichten und es war eine Menge hässlich code für das austauschen konzentrieren als Zeichen wurden eingegeben oder gelöscht. Dies ist NICHT der Ansatz, den ich nehmen will; vielmehr bin ich der Gestaltung meiner anpassbare Länge (einfach) und Verhalten sich wie ein einzelnes Isoliertes Ansicht (nicht so einfach).
Mein Konzept so weit ist eine Art hybrid zwischen einem LinearLayout
(halten Sie die "Boxen") und eine EditText
(zum speichern wird die Eingabe des Benutzers).
Dies ist der code so weit...
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;
}
}
Über diese überschreibungen: onCheckIsTextEditor() sollte true zurückgeben, und onCreateInputConnection(EditorInfo outAttrs) zurückkehren sollte, eine neue InputConnection
Objekt zum interagieren mit einem InputMethod (eine Tastatur), aber das ist alles was ich weiß.
Weiß jemand, ob ich auf dem richtigen Weg? Hat jemand gemacht der Arbeit mit InputConnection
vor oder Ihre eigene editierbare Ansichten können eine Orientierung geben?
(Edit 1)
Nach einem Blick auf das etwas mehr, es scheint, ich sollte Unterklasse BaseInputConnection und liefern TextView
oder EditText
als Ziel:
@Override
public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
if (!onCheckIsTextEditor()) {
return null;
}
return new BaseInputConnection(mText, true);
}
Vorausgesetzt, dieser speichert den text wie er eingegeben wurde, muss ich trotzdem in gewisser Weise zum aktualisieren der Ansichten zu reflektieren, die Inhalte zu ändern,...
(Edit 2)
Also ich habe diese benutzerdefinierte Ansicht, um einen Bildschirm für die Prüfung. Es zeigt die Anzahl der Boxen, und die ganze Ansicht ist Isoliertes, aber die Tastatur nie erscheint. Ich weiß, es gewinnt/verliert den Fokus, weil die Boxen zeigen die Hervorhebung angemessen und ich ein OnFocusChangedListener
zu schreiben logcat.
Was macht eine tatsächliche Tastatur angezeigt, wenn Sie eine editierbare Ansicht dauert Fokus?
InformationsquelleAutor Karakuri | 2012-05-10
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es scheint, wie Sie versuchen, erstellen Sie eine iOS-wie die pin-Eingabe Ansicht/widget.
Ist hier ein gutes Beispiel-code, den Sie nützlich finden können. Es ist jedoch fix Länge, aber dennoch vielleicht nützlich für einige Menschen.
https://github.com/chinloong/Android-PinView
http://madeveloper.blogspot.com/2013/02/android-ios-like-pin-entrychallenge.html
View
kapselt die gesamte Reihe von Feldern, Wechselwirkung mit der Android-Tastatur und führt die gesamte Logik selbst. Es erfordert nicht eine ganze Aktivität mit einem gesamten layout der buttons und textviews.Da Sie noch keinen source-code noch detaillierte Anweisungen, diese Antwort für pin-code-Eingabe, ist mehr relevant für mich.
InformationsquelleAutor ChinLoong
Ich weiß, das ist schon beantwortet worden, aber da seine Umsetzung nicht freigegeben ich habe ein ähnliches open-source-Bibliothek. Es sieht gut aus und für alle diejenigen, die Wandern können, zu geben es zu versuchen,
https://github.com/Philio/PinEntryView
InformationsquelleAutor Gaurav Sarma
Sieht ok für mich. Etwas, möchten Sie vielleicht zu tun ist, wenn ein Benutzer einen Charakter in einer
EditText
Feld, finden Sie einen Verweis auf den nächsten EditText-box und machen Sie einenrequestFocus()
. Damit wird die Eingabe von text auf die nächste box. Sehr einfach.Die einzelnen Boxen werden müssen, konzentriert, um zu geben. Darüber hinaus wird ein EditText, die im Fokus ist, wird eine Blaue Linie um und zeigt dem Benutzer an, dass es dauern kann-Eingang. Ohne, dass visual-cue-der Benutzer wird nicht wissen, wo seine typisierten Figuren.
Vielleicht war das nicht klar, aber ich bin NICHT mit einer Reihe von EditTexts und ich möchte NICHT jedes Feld einzeln fokussierbar. Wie ich schon erwähnt habe, habe ich gesehen-code, und es ist chaotisch und hässlich und blech. Dieser Ansatz ist das aufblasen ImageViews für die Boxen, und diese haben einen Selektor drawable als hintergrund und haben duplicateParentState="true", so dass diese in einen fokussierten Zustand, wenn das widget fokussiert ist. Bu der Schlüssel ist, dass das GESAMTE widget den Fokus erhält, nicht die einzelnen Boxen.
Ok, fair genug. Ich habe keine Ahnung, warum würden Sie wollen, zu tun. Für Android ich dachte, dass, wenn ein Elternteil hat ein Kind konzentriert (z.B. ein EditText Boxen hat einen Fokus), dann die Eltern, als auch fokussiert werden. Auch ich kann mir nicht vorstellen, dass der code, chaotisch, ich bin mir ziemlich sicher, würde es erfordern nur ein paar Zeilen. Viel Glück, obwohl, und ich denke, Sie sollten definieren Sie Ihre Frage, ein wenig mehr, um nicht zu verwirrend sein.
Teil der ästhetik, und ein Teil davon ist eine Funktion/Verhalten. Die Herstellung jeder Punkt bedeutet, dass der Benutzer springen können, um zu jedem Feld, aber es ist ein pin-code-widget, so dass Sie den eigentlichen Inhalt verdeckt ist sowieso. Wenn Sie möchten, könnte ich mit Ihnen teilen, den code, der verwendet die EditTexts.
InformationsquelleAutor James Cross
Habe ich erhebliche Fortschritte gemacht auf diese und benötigen keine Hilfe mehr mit der InputConnection. Kurz gesagt, Sie erweitern
BaseInputConnection
und überschreibengetEditable()
aus, um eine Editierbare. In diesem Fall, ich fahre eine privateTextView
intern durch diePinCodeView
.PinCodeView
ist auch überschreiben mehrere Methoden, wieonKey[foo]()
- und Weiterleitung von rufen an den internenTextView
. Der rest ist nur mit einemTextWatcher
zu aktualisieren das KindImageView
s, wenn der text ändert sich.Es funktioniert wirklich gut. Es gibt noch ein paar kleinere Probleme Links zu Polieren, aber ich werde diese Adresse als getrennte Fragen, und schließen Sie dieses hier.
Ich würde wirklich gerne, aber es ist im Einsatz in meinem Unternehmen die app, also ich weiß nicht, dass ich Quellcode freizugeben. Lassen Sie mich überprüfen Sie es heraus mit meinem manager.
Ein update auf die Freigabe dieses auf github oder wenn jemand anderes gemacht wie Fortschritte noch? Der hier gezeigte code sieht wirklich vielversprechend und ein guter Ausgangspunkt für andere, obwohl ich würde wirklich zu schätzen das Gesamtpaket. Vielleicht wird Android irgendwann implementieren Sie es als ein weiteres Feld geben 🙂
InformationsquelleAutor Karakuri