PINコード画面の実装方法

Question

パスワードの入力後、円を変更するか、画像ビューを変更する必要がありますか？

Login.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools 
android:orientation="vertical" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_margin="20dp" 
    android:orientation="vertical"> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:background="@color/light_grey" 
    > 
    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Enter MPIN" 
     android:textStyle="bold" 
     android:textSize="18dp" 
     android:layout_margin="10dp" 
     android:layout_gravity="center_horizontal" 
     /> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:layout_gravity="center_horizontal" 
     > 
     <ImageView 
      android:id="@+id/imageview_circle1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="6dp" 
      android:src="@drawable/circle" 
      /> 
     <ImageView 
      android:id="@+id/imageview_circle2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="6dp" 
      android:src="@drawable/circle" 
      /> 
     <ImageView 
      android:id="@+id/imageview_circle3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="6dp" 
      android:src="@drawable/circle" 
      /> 
     <ImageView 
      android:id="@+id/imageview_circle4" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="6dp" 
      android:src="@drawable/circle" 
      /> 
    </LinearLayout> 
</LinearLayout> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:background="@color/light_grey2" 
    > 
    <EditText 
     android:id="@+id/editText_enter_mpin" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:inputType="number" 
     android:maxLength="4" 
     android:visibility="visible" > 
    </EditText> 
</LinearLayout> 
</LinearLayout> 
</LinearLayout> 

LoginActivity.java

public class LoginActivity extends AppCompatActivity { 

private static final String TAG = "LoginActivity"; 
EditText enter_mpin; 
ImageView i1, i2, i3, i4; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_login); 

    i1 = (ImageView) findViewById(R.id.imageview_circle1); 
    i2 = (ImageView) findViewById(R.id.imageview_circle2); 
    i3 = (ImageView) findViewById(R.id.imageview_circle3); 
    i4 = (ImageView) findViewById(R.id.imageview_circle4); 

    enter_mpin = (EditText) findViewById(R.id.editText_enter_mpin); 
    enter_mpin.requestFocus(); 
    enter_mpin.setInputType(InputType.TYPE_CLASS_NUMBER); 
    enter_mpin.setFocusableInTouchMode(true); 

    enter_mpin.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) { 
      Log.d(TAG, "onKey: screen key pressed"); 
      i1.setImageResource(R.drawable.circle2); 
     } 
    }); 
} 
} 

circle.xml

<shape 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"> 
<stroke 
    android:width="2dp" 
    android:color="#6ab17b" /> 
<size 
    android:width="25dp" 
    android:height="25dp" /> 
</shape> 

circle2.xml

<shape 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"> 
<solid 
    android:color="#505253"/> 
<size 
    android:width="25dp" 
    android:height="25dp" /> 
</shape> 

Answer 1

使用LolliPin

マテリアルデザインのAndroid PINコードライブラリ。指紋をサポートします。

<com.github.orangegangsters.lollipin.lib.views.PinCodeRoundView 
       android:id="@+id/pin_code_round_view" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="@dimen/pin_code_round_top_margin" 
       android:layout_marginBottom="@dimen/pin_code_elements_margin" 
       app:lp_empty_pin_dot="@drawable/pin_empty_dot" 
       app:lp_full_pin_dot="@drawable/pin_full_dot"/> 

Answer 2

私は私のプロジェクトでlollipinを追加したとき、私はいくつかのerrosを得ました。
それから、私は素晴らしいものもいくつか見つけました。
はこれらをチェックアウト：

1. PinLockView
2. BlurLockView

は、彼らがもう少しカスタマイズしているように、これらは図で覚えておいてください。 ハッピーコーディング:)