ساختن OTP EditText در اندروید

ساختن OTP EditText در اندروید

امروز میخوام بهتون یاد بدم چطوری یه OTPEditText درست کنید. https://aparat.com/v/Wc4xU برای اینکه این مقاله رو بهتر درک کنید توصیه می‌کنم مقاله قبلی من راجع به Masked Input رو مطالعه کنید. یک کلاس جدید می‌سازیم که از AppCompatEditText ارث بری می‌کنه و استایل‌های اولیه رو براش مشخص می‌کنیم مثل اندازه فونت و نوع ورودی و … .یه فیلد otpCount هم برای کلاس در نظر می‌گیریم و توی متد set اون ماکسیمم طول EditText رو مجددا مقدار دهی می‌کنیم. Creating Custom EditTextتوجه داشته باشید که فونتی که قرار هست استفاده کنید باید monospace باشه. (اعدادش مونو باشن کافیه). دلیلش هم اینه که اندازه کاراکترها پارامتر مهمیه برای ما و باید همه یکسان باشن.اگر به تصویر توجه کنید هر دو فونت IranSans هستن اما فونت پایینی مونو اسپیس هست که اندازه همه کاراکتر هاش یکسان هستش.mono space vs normal fontخروجی کار ما تا اینجا یه EditText معمولیه 🙂 تو این مرحله طبق آموزشی که قبلا در مورد Masked Input داده بودم بین کاراکترها به اندازه 2 تا کاراکتر فاصله قرار می‌دیم. تغییرات کلاس ما به صورت زیر هست. کلاس PaddingRightSpan هم به صورت زیر هست.خب تا اینجای کار تونستیم فاصله بین کاراکتر ها رو به کمک TextWatcher و کلاس PaddingRightSpan درست کنیم. این قسمت رو چون توی مقاله قبلی مفصل راجع بهش حرف زده بودیم اینجا زیاد توضیح ندادم. خروجی کار تا اینجا : https://www.aparat.com/v/S9wQY تو این قسمت باید با استفاده از عرض هر کاراکتر ( که با paint می‌تونیم به دستش بیاریم) عرض کل ویو رو محاسبه کنیم. پس متد onMeasure رو باید Override کنیم. برای چپ و راست ویو هم به اندازه‌ی فاصله بین کاراکتر ها Padding در نظر می گیگیریم. 🙂 به صورت زیر.Overriding onMeasureهمونطور که توی عکس زیر می‌بینید عرض ویو دقیقا به اندازه تعداد کاراکترها به علاوه‌ی Padding هاییه که براش در نظر گرفتیم. Overriding onMeasureبا توجه به داده‌هایی که داریم، مثل اندازه هر کاراکتر، فاصله بین کاراکترها و مقدار padding ویو، دقیقا میشه حساب کرد که draw کردن کاراکتر ها از کدوم مختصات شروع میشه. بنا براین میشه با Override کردن متد onDraw، خطوطی رو که نیازه رو در جای مناسب ترسیم کرد. برای اینکه مختصات خطوط رو به دست بیاریم می‌تونیم با override کردن متد onSizeChanged و استفاده از پارامترهایی که از قبل به دست اوردیم، مختصات خطوط رو به دست بیاریم. برای این کار یک Array از Rectها ایجاد می‌کنیم که اندازه این آرایه به اندازه تعداد کاراکترهای OTP است. (فیلد otpCount). در ضمن چون ما داریم زیر اعداد خط ترسیم می‌کنیم پس نیازی به خط پیش فرض زیر EditText نداریم. پس باید background اون رو برداریم. ترسیم خطوط زیر اعدادیه مشکل کوچیک که EditText ما داره اینه که نباید به کاربر اجازه بدیم Cursor رو جابجا کنه. برای این کار هم می‌تونید متد ionChanged رو به صورت زیر Override کنید.جلوگیری از تغییر مکان Cursorسورس‌های استفاده شده در این مقاله رو می‌تونید از اینجا مشاهده کنید.ممنون که وقتتون رو برای مطالعه این مقاله صرف کردید. اگر نکته یا نظری هست از شنیدنش خوشحال میشم. 🙂

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *