web-dev-qa-db-fra.com

Comment implémenter un PIN écran de code

Comment coder ce type de conception d'écran de mot de passe, alors qu'après la saisie du mot de passe, les cercles devraient changer ou ImageView devrait changer .. ??

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>

 enter image description here

androidxmlandroid-layoutandroid-studioandroid-shape
5
shrishyl47

Utilisez LolliPin

Une bibliothèque de code secret Android de conception matérielle. Prend en charge les empreintes digitales.

 enter image description here 

<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"/>
12
Amit Vaghela

En utilisant ce code dans TextWatcher:

            @Override
            public void afterTextChanged(Editable s) {
                switch (s.length()) {
                    case 4:
                        i4.setImageResource(R.drawable.circle2);
                        break;
                    case 3:
                        i4.setImageResource(R.drawable.circle);
                        i3.setImageResource(R.drawable.circle2);
                        break;
                    case 2:
                        i3.setImageResource(R.drawable.circle);
                        i2.setImageResource(R.drawable.circle2);
                        break;
                    case 1:
                        i2.setImageResource(R.drawable.circle);
                        i1.setImageResource(R.drawable.circle2);
                        break;
                    default:
                        i1.setImageResource(R.drawable.circle);
                }
            }
2
Muzafferus

Quand j'ai ajouté la sucette dans mon projet, j'ai eu quelques erreurs.
Ensuite, j'ai trouvé d'autres liraires géniaux aussi.
Vérifiez ces:

  1. PinLockView
  2. BlurLockView

Rappelez-vous qu'il s'agit de vues afin qu'elles soient un peu plus personnalisables ... Bon codage :)

2
Ishaan Kumar