آموزش EditCode در برنامه نویسی اندروید

سلام دوستان در این سری از آموزش EditCode در برنامه نویسی اندروید به آموزش EditCode در برنامه نویسی اندروید می پردازیم شاید کمی تعجب کرده باشید این نوع EditText برای وارد کردن کد استفاده در ادامه پیش نمایشی از آن را خواهید دید با ما همراه باشید.

همانطور که می بینید شکل بالا نوعی از ورودی کد است البته شاید بشه گفت همان EditText است که کمی تغییر پیدا کرده است از این آموزش برای ایجاد بخشی همانند کد ورودی تلگرام استفاده کنید.
برای اینکه از این کتاب خانه استفاده کنید
باید وارد فایل Build.gradle شده از نوع module سپس در بخش dependencies خط زیر را اضافه کنید.

compile 'com.bigbangbutton:editcodeview:1.0.3'

1	compile 'com.bigbangbutton:editcodeview:1.0.3'

سپس پروژه را sync کنید (علت خطاهای گریدل را قبلا بررسی کرده ایم)
برای اینکه آن را در Layout خود قرار دهید از کد زیر استفاده کنید.

<com.bigbangbutton.editcodeview.EditCodeView
            android:id="@+id/edit_code"
            android:layout_width="200dp"
            android:layout_height="56dp"
            android:layout_gravity="center"
            android:layout_marginBottom="40dp"
            app:underlineReductionScale="0.3"
            app:underlineStroke="5dp" />

<com.bigbangbutton.editcodeview.EditCodeView

android:id="@+id/edit_code"

android:layout_width="200dp"

android:layout_height="56dp"

android:layout_gravity="center"

android:layout_marginBottom="40dp"

app:underlineReductionScale="0.3"

app:underlineStroke="5dp" />

برای اینکه کد های آن را handle کنید در اکتیوتی خود از کد زیر استفاده کنید.

EditCodeView editCodeView = (EditCodeView) findViewById(R.id.edit_code);
        editCodeView.setEditCodeListener(new EditCodeListener() {
            @Override
            public void onCodeReady(String code) {
            }
        });
        editCodeView.setEditCodeWatcher(new EditCodeWatcher() {
            @Override
            public void onCodeChanged(String code) {
            }
        });

EditCodeView editCodeView = (EditCodeView) findViewById(R.id.edit_code);

editCodeView.setEditCodeListener(new EditCodeListener() {

@Override

public void onCodeReady(String code) {

}

});

editCodeView.setEditCodeWatcher(new EditCodeWatcher() {

@Override

public void onCodeChanged(String code) {

}

});

ما برای این نوع EditText یا EditCode می توانیم یک Listener و یک Watcher تعریف کنیم از setEditCodeListener زمانی که کاربر چهار فیلد را پر کرد به صورت اتوماتیک یک validation انجام می شود یعنی به طور مثال می خواهید کد رو به سرور بفرستید و از صحت آن مطمئن شوید می توانید از آن استفاده کنید وزمانی که چهار فیلد پر شد تمامی عدد هایی که کاربر وارد کرده در متغیر کد ذخیره می شود .
و از setEditCodeWatcher برای watch کردن مقدار های ورودی استفاده می شود و زمانی که کاربر بخواهد تغییری انجام دهد شما می توانید آن را کنترل کنید.
نوع بعدی سفارشی سازی EditCode
اگر می خواهید مقدار ورودی کاربر به صورت * باشد از کد زیر استفاده کنید.

<com.bigbangbutton.editcodeview.EditCodeView
            android:layout_width="300dp"
            android:layout_height="56dp"
            android:layout_gravity="center"
            android:layout_marginBottom="40dp"
            app:codeHiddenMode="true"
            app:underlineCursorEnabled="true"
            app:underlineStroke="10dp" />

<com.bigbangbutton.editcodeview.EditCodeView

android:layout_width="300dp"

android:layout_height="56dp"

android:layout_gravity="center"

android:layout_marginBottom="40dp"

app:codeHiddenMode="true"

app:underlineCursorEnabled="true"

app:underlineStroke="10dp" />

اگر می خواهید مقدار ورودی کاربر به صورت یک چیز خاص باشد می توانید از کد زیر استفاده کنید.

<com.bigbangbutton.editcodeview.EditCodeView
            android:layout_width="300dp"
            android:layout_height="56dp"
            android:layout_gravity="center"
            android:layout_marginBottom="40dp"
            app:codeHiddenMask="!"
            app:codeHiddenMode="true"
            app:underlineReductionScale="0.8" />

<com.bigbangbutton.editcodeview.EditCodeView

android:layout_width="300dp"

android:layout_height="56dp"

android:layout_gravity="center"

android:layout_marginBottom="40dp"

app:codeHiddenMask="!"

app:codeHiddenMode="true"

app:underlineReductionScale="0.8" />

در بالا الان ب جای اعدادی که کاربر وارد می کند علامت ! نشان داده می شود.

برای اینکه کاربر زمانی که وارد صفحه شد به EditCode ما focus کند می توانید از کد زیر استفاده کنید.