در طراحی برنامه های کاربردی بیشتر مواقع نیاز میشود تا کاربرد در برنامه مورد استفاده خود رمز عبور تعیین کند. طراحی و ساخت ویوهای مورد نظر برای رمز گزاری و یا دریافت رمز عبور برای برنامه نویسان مشکل و کاری زمان بر هست. با استفاده از این کتابخانه به راحتی می توانید رابط کاربری یه صفحه دریافت رمز را به بهترین شکل ممکن پیاده سازی کنید.

این کتابخانه با SDK 14 به بالا سازگار می باشد.

دستور زیر را به فایل build.gradle پروژه خود اضافه کنید و اجازه دهید اندروید استودیو کتابخانه را دانلود نماید.

dependencies {
    compile 'com.andrognito.pinlockview:pinlockview:1.0.1'
}

روش استفاده

برای پیاده کردن این کتابخانه دو ویوIndicatorDots و PinLockView استفاده خواهید کرد.

<com.andrognito.pinlockview.IndicatorDots // ویو نمایش رمز بصورت *
        android:id="@+id/indicator_dots"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/profile_name"
        android:layout_marginTop="36dp"
        android:gravity="center" />

    <com.andrognito.pinlockview.PinLockView // ویو دکمه های ورود رمز
        android:id="@+id/pin_lock_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:keypadButtonSize="72dp" // سایز دکمه شماره ها
        app:keypadShowDeleteButton="true" // نمایش دکمه حذف 
        app:keypadTextColor="@color/white" // رنگ نوشته های دکمه ها
        app:keypadTextSize="18dp" /> // سایز نوشته های دکمه ها

برای ربط دادن دو قسمت و کنترل نمایش ورودی از کدهای جاوای زیر استفاده می کنیم.

PinLockView mPinLockView = (PinLockView) findViewById(R.id.pin_lock_view); // اشاره گر دکمه های ورودی
IndicatorDots mIndicatorDots = (IndicatorDots) findViewById(R.id.indicator_dots); // اشاره گر نمایش رمز

private PinLockListener mPinLockListener = new PinLockListener() { // تعریف لیسنر برای دکمه های ورودی
        @Override
        public void onComplete(String pin) { // زمانی که تمامی کاراکتر ها وارد شد اتوماتیک این تابع فراخوانی می شود.
            if(pin.equals("123456")){
                Toast.makeText(getBaseContext(),"ok",Toast.LENGTH_LONG).show();
            }
        }

        @Override
        public void onEmpty() { // زمانی که رمزی وارد نشده فراخوانی می شود
        }

        @Override
        public void onPinChange(int pinLength, String intermediatePin) { // در حین وارد کردن کاراکتر های رمز فراخوانی می شود
        }
    };

mPinLockView.attachIndicatorDots(mIndicatorDots);  // دکمه های رمز رو به نمایشگر کاراکتر های ورودی وصل می کنیم
mPinLockView.setPinLockListener(mPinLockListener); // لیسنر تعریف شده را به دکمه ها وصل می کنیم
mPinLockView.setPinLength(6);  // طول رمز عبوری را ست می کنیم

خصوصیاتی قابل استفاده در xml هست که به شرح زیر می باشد.

  app:pinLength="6"                                       // Change the pin length
  app:keypadTextColor="#E6E6E6"                           // Change the color of the keypad text
  app:keypadTextSize="16dp"                               // Change the text size in the keypad
  app:keypadButtonSize="72dp"                             // Change the size of individual keys/buttons
  app:keypadVerticalSpacing="24dp"                        // Alters the vertical spacing between the keypad buttons
  app:keypadHorizontalSpacing="36dp"                      // Alters the horizontal spacing between the keypad buttons
  app:keypadButtonBackgroundDrawable="@drawable/bg"       // Set a custom background drawable for the buttons
  app:keypadDeleteButtonDrawable="@drawable/ic_back"      // Set a custom drawable for the delete button
  app:keypadDeleteButtonSize="16dp"                       // Change the size of the delete button icon in the keypad
  app:keypadShowDeleteButton="false"                      // Should show the delete button, default is true
  app:keypadDeleteButtonPressedColor="#C8C8C8"            // Change the pressed/focused state color of the delete button

  app:dotEmptyBackground="@drawable/empty"                // Customize the empty state of the dots
  app:dotFilledBackground"@drawable/filled"               // Customize the filled state of the dots
  app:dotDiameter="12dp"                                  // Change the diameter of the dots
  app:dotSpacing="16dp"                                   // Change the spacing between individual dots