Be simple

”当たり前”が誰かのためになる

AndroidでPasswordをコードから表示・非表示切り替えするときのメモ

はじめに

今日はAndroidでEditTextにてパスワードを表示非表示切り替えするときのメモです。

TextInputLayout使えばいいと思うけど、特殊な要件があったときのため忘れやすいので書き残しておきたい。

 

まずはレイアウトを用意

パスワード用のレイアウト入力はEditTextで次のようにする。

<EditText
android:id="@+id/password_form"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>

inputTypeでtextPasswordを指定すると入力後に文字を伏せてくれるようになる

 

今回紹介するサンプルのレイアウト全体はこっち

DataBinding使ってるのでlayoutタグでくくる

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto">

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<EditText
android:id="@+id/password_form"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>

<TextView
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Show"
app:layout_constraintEnd_toEndOf="@+id/password_form"
app:layout_constraintBottom_toBottomOf="@+id/password_form"
app:layout_constraintTop_toTopOf="@+id/password_form"
/>

</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

次にFragment側のソースコード

ボタンをクリックした時に、EditTextのsetTransformationMethodでTransformationMethodを設定すれば表示非表示の切り替えをコードからできる

 

具体的には次のようにする

with(binding) {
button.setOnClickListener {
if (passwordForm.transformationMethod is PasswordTransformationMethod) {
passwordForm.transformationMethod = HideReturnsTransformationMethod()
button.text = "Hide"
} else {
passwordForm.transformationMethod = PasswordTransformationMethod()
button.text = "Show"
}
     passwordForm.setSelection(passwordForm.text.lastIndex + 1)
}
}

 

TextViewをフラットボタンとしており、クリックした際にEditTextのtransformationMethodが何を指定されているかによって処理を変える。

 

PasswordTransformationMethodは、パスワードが表示状態である時に設定されるTransformationMethodで、逆に、HideReturnsTransformationMethodは、パスワードが表示状態である時に設定されるTransformationMethodになる。

 

今のEditTextに設定されているTransformationMethodが何かをみて、逆のものを指定してやれば良い。

ただし、このままだと切り替えた際にカーソルが一番はじめに戻ってしまうので、サンプルではカーソルを右端の最後に設定するようにしている。

passwordForm.setSelection(passwordForm.text.lastIndex + 1)

lastIndexだけだと、最後の文字の前にカーソルが来てしまうため、+1して右端にカーソルを合わせれば良い。

 

これで実行すると次のようになる。

f:id:rozkey59:20190720115022g:plain

サンプル

こんなかんじ。要件的なこととかないならTextInputLayout使うのが良いと思う。

 

おわりに

久々の投稿でした。結構リアルが忙しかったので、忘れずに定期的にやっていきたい。Navigationの知見が溜まってきたので近々投稿しようと思う。

今回のサンプルの全体を見たい人は下記リンクからどうぞ。PasswordFragmentってところを見てください。

github.com

 

少しでも誰かの役に立てたら嬉しいです。それではまたの機会に。