拡張パスワード入力ビュー:パスワードの表示を切り替えます。 ねえ!私は遅れてブログ作成を進め、Android開発についてもっと多くのことを分かち合いました。今日は単純なものから始めましょう:パスワード入力フィールド。
拡張パスワード入力。 通常、サインインまたはサインアップのUIフォームには、パスワード用の入力フィールドがあります。アンドロイドSDKは、EditText
とinputType="textPassword"
の隠し文字の入力フィールドを持つ簡単な方法を提供します。非常に簡単です。しかし、長い複雑なパスワードを入力する必要がある場合は、ちょっと面倒なことがあります。タイプを作るのは非常に簡単で、パスワードの入力をやり直す必要があります。
解決策。 パスワード入力を簡単にするために、シンプルで非常に効果的なソリューションを実装することができます。入力フィールドの右端にアイコンを表示します。アイコンをタップすると、入力されたパスワードが表示され、指を持ち上げると再び表示されます隠された文字のみ。シンプルで効果的で安全です!
は、その達成するために、少なくとも3明らかに可能な方法があります:レイアウトの コンデフォルトのAndroid SDKのビューを親フラグメント/アクティビティに動作ロジックを置く のEditTextを作るレイアウトと動作のロジック をカプセル化する合成のViewGroupを作りますビューの右側にカスタムドロウアブルを管理するサブクラス
この3つの方法はすべてあなたに役立ちます。もともと私は次のような理由で第1の方法で作っています: 本当に必要のない余分なエンティティを作成したくありません。オッカムの校長のようなもの。 :) 私は1つの場所でそれを持っている必要があります
確かに、別の場所で複数回同じ強化されたパスワードのビューを持つ必要がある場合は、2番目または3番目(好ましくは、ビューの階層構造がフラット)のオプションを選択します。
実装。 ので、デフォルトのAndroid SDKの景色が強化され、パスワードビューの最も簡単な実装が唯一できることを次のようになります。
:XMLレイアウトの記号(パディングのような些細なおよび非トピック関連のparamsは省略されている)で
親フラグメント/活性の
<RelativeLayout
...>
<EditText
android:id="@+id/fragment_login_password"
android:inputType="textPassword"
.../>
<ImageView
android:id="@+id/fragment_login_password_visibility"
android:layout_alignRight="@+id/fragment_login_password"
android:clickable="true"
android:src="@drawable/ic_show_password"
.../>
</RelativeLayout>
:
2.1。
mPasswordView.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
mPasswordVisibilityView.setVisibility(s.length() > 0 ? View.VISIBLE : View.GONE);
}
});
2.2:良いUXのためのいくつかは、パスワードの値を入力し、空のパスワードの表示のためにそれを非表示にするがある場合、テキストは、パスワードの可視性を示すために、リスナーを変更追加してみましょう。指がアップしているか、離れたときに指が視界ビューの内側にダウンしている場合
mPasswordVisibilityView.setOnTouchListener(mPasswordVisibleTouchListener);
タッチリスナーが目に見える文字モードを適用するタッチに反応し、元のパスワードモードを適用するには、パスワードの可視性のビューのためのタッチリスナーを設定します。可視性ビュー。また、カーソル位置の維持にも注意を払います。したがって、現在の入力カーソル位置を失うことなく、いつでも表示モードを切り替えることができます。
private View.OnTouchListener mPasswordVisibleTouchListener = new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
final boolean isOutsideView = event.getX() < 0 ||
event.getX() > v.getWidth() ||
event.getY() < 0 ||
event.getY() > v.getHeight();
// change input type will reset cursor position, so we want to save it
final int cursor = mPasswordView.getSelectionStart();
if (isOutsideView || MotionEvent.ACTION_UP == event.getAction())
mPasswordView.setInputType(InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_PASSWORD);
else
mPasswordView.setInputType(InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
mPasswordView.setSelection(cursor);
return true;
}
};
これだけです!私が言ったように、実装するのは非常に簡単ですが、UXを大幅に改善します!
http://stackoverflow.com/questions/9892617/programmatically-change-input-typeパスワードの編集テキストからパスワードへの変更 – Rahul
[非表示と表示パスワードの切り替え方法]を参照してください(http://stackoverflow.com/questions/3685790/how-to-switch-between-hide - と - ビュー - パスワード) –