動態顯示隱藏密碼

一般作登入畫面, 都會輸入使用者名稱跟密碼.
但是有時為了方便使用者檢查密碼是否打錯, 會多一個 checkbox 讓使用者顯示所輸入的密碼,
避免密碼不小心輸入錯誤.
Android 達成方式很簡單, 以下提出兩種方式.

這是我使用的 Layout, 很簡單, 一個使用者名稱, 一個密碼, 兩個 checkbox 分別用不同方式顯示隱藏密碼

<?xml version="1.0" encoding="utf-8"?>
<Linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:gravity="center_vertical"
android:text="@string/username"
android:textSize="18sp" ></TextView>

<EditText
android:id="@+id/user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center_vertical"
android:inputType="text"
android:padding="3dp"
android:singleLine="true"
android:textSize="20sp" ></EditText>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:gravity="center_vertical"
android:text="@string/password"
android:textSize="18sp" ></TextView>

<EditText
android:id="@+id/pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center_vertical"
android:inputType="textPassword"
android:singleLine="true"
android:textSize="20sp" ></EditText>

<CheckBox
android:id="@+id/show_pass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/show_password" ></CheckBox>

<CheckBox
android:id="@+id/show_pass2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/show_password2" ></CheckBox>

</LinearLayout>

主要程式部份很簡單

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  final EditText pass = (EditText)findViewById(R.id.pass);
  
  CheckBox b = (CheckBox)findViewById(R.id.show_pass);
  b.setOnCheckedChangeListener(new OnCheckedChangeListener() {

   @Override
   public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    if (isChecked) {
     pass.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_NORMAL);
    } else {
     pass.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
    }
   }
  }); 
  
  b = (CheckBox)findViewById(R.id.show_pass2);
  b.setOnCheckedChangeListener(new OnCheckedChangeListener() {

   @Override
   public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    if (isChecked) {
     pass.setTransformationMethod(new PasswordTransformationMethod());
    } else {
     pass.setTransformationMethod(new HideReturnsTransformationMethod());
    }
   }
  });
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

}

程式應該一看就懂, 效果如下,





範例程式碼下載點: https://www.box.com/s/0xdlxjqojaqlb6fxi0gx