آموزش floating label edittext بصورت متریال دیزاین در اندروید

آموزش اندروید floating label edittext متریال دیزاین - طراحی متریال

سطح آموزش: #مبتدی

حتما edittextهایی رو دیدید که وقتی روش کلیک میشه متنِ داخل به صورت کوچیک بالایِ edittext نمایش داده میشه. اسمِ این قابلیت floating label هست که یکی از مواردی هست که برای طراحی متریال باید رعایت بشه.

در نهایت برنامه‌ای که در طیِ آموزش‌های متریال تا به الان تکمیل کرده‌ایم به شکلِ زیر در خواهد آمد:

 

 

آموزش اندروید: ایجادِ floating label edittext متریال دیزاین

طبق معمول برای اضافه کردنِ قابلیت‌ها ابتدا عبارات زیر رو به build.gradle اضافه کنید.

توجه کنید که من از آخرین نسخه اندروید استودیو استفاده میکنم اگر فعلا امکان آپدیت ندارید میتونید از ورژن‌های قدیمی‌ترِ کتابخونه‌ها استفاده کنید.

خب حالا باید تمِ متریال رو به برنامه‌تون اضافه کنید. اگر قبلا آموزش‌ها رو مطالعه نکردید به این لینک مراجعه کنید. اگر از ورژنِ جدید استفاده میکنید به طورِ خودکار تم اعمال شده.

بسیار خب. حالا به acitivity_main.xml برید و کدهایی که در ادامه میاد رو به لایه‌ی اصلی اضافه کنید. توجه کنید که ما دو سری xml طراحی میکنیم. یکی برای api 21 و بالاتر دیگری برای ورژن‌های قدیمی‌تر. در حالِ حاضر خیلی به این مساله نپرداختیم و فرقِ این دو ورژن تنها elevation است.

کد

حال برای دسترسی به edittextها در کدِ جاوا به شکلِ عادی عمل می‌کنیم:

کد

بسیار خب. تا اینجا کار ساده بود. حالا قصد داریم کمی حرفه‌ای‌تر عمل کنیم. میخوایم وقتی کاربر ایمیلش رو وارد میکنه چک کنیم که آیا ایمیل معتبر هست یا نه. برای این کار از کلاسِ TextWatcher استفاده می‌کنیم. شیوه کار به این صورته که ابتدا برایِ edittextهامون یک Text Watcher تعریف میکنیم. کارِ این tw اینه که بعد از اینکه text عوض شد تابعی رو اجرا میکنه که بررسی میکنه این text که الان وارد شده از نظر ما معتبر هست یا نه؟

TextWatcher در اندروید کاربردهای زیادی داره. مثلا فرض کنید بخواید عددهایی رو که کاربر وارد میکنه در همان لحظه سه تا سه تا و با ویرگول جدا کنید. برای اینکه کار باید کدهاتون رو داخلِ متدِ onTextChanged وارد کنید. من متدهای این کلاس رو براتون خالی میذارم که تست کنید و باهاشون آشنا شید.

تابعی که قرار هست ایمیل رو بررسی کنه دو تا مورد رو چک میکنه. یکی اینکه فیلدِ ایمیل خالی نباشه. دوم اینکه استایلِ ایمیل استاندارد باشه. یعنی مثلا dasdas نباشه. برای اینکار هم کافیه از کدِ زیر استفاده کنیم.

این متد یه boolean بر میگردونه که میگه آیا myEmail که با پترنِ استاندارد همخونی داره یا نه.

برای چک کردنِ اسم هم فقط بررسی میکنیم که خالی نباشه.

با کلیک شدن روی submit هم یک تابع اجرا میشه که اگر هر دو ورودی valid بودن یک toast نشون میده.

بریم کد رو ببینیم:

کد

داخلِ کد برای متدها توضیحاتِ مختصری هم گذاشتم که لازم شد مطالعه کنید.

فراموش نکنیم تمامِ رشته‌های متنی رو در string.xml تعریف کنیم تا بعدا تغییرشون ساده بشه.

 

 

نکته آخر

من خودم دوست ندارم از اول که کاربر وارد میشه کنارِ edittext خطایِ قرمز باشه و دوست دارم بررسی موقعِ زدنِ submit انجام بشه. ولی برای اینکه شما با Text Watcher آشنا بشید (و چون در آموزش گوگل و سایت‌های دیگه هم هست) به کد اضافه کردم.

 

 

یک دیدگاه برای “آموزش floating label edittext بصورت متریال دیزاین در اندروید

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

پاسخ دهید

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