Chip کامپوننت متریال دیزاین قسمت دوم  – ایجاد AutoCompleteTextView با Chip (مانند جیمیل)

Chip کامپوننت متریال دیزاین قسمت دوم  - ایجاد AutoCompleteTextView با Chip (مانند جیمیل)Reviewed by آریانا on Jan 14Rating: 5.0Chip کامپوننت متریال دیزاین قسمت دوم  - ایجاد AutoCompleteTextView با Chip (مانند جیمیل)

در قسمت اول شما یاد گرفتید که چگونه یک chip layout با استفاده از سفارشی کردن سورس های XML ایجاد نمایید. واقعیت این است که محبوبترین بخش اعمال این کامپوننت این است که یک AutoCompleteTextview را برای اجرا در اطلاعات  hint/selected  قرار دهید. به عنوان مثال، ما می توانیم این  طراحی را در برنامه Gmail مشاهده کنیم:

در این پست من یک راه برای این طراحی، با استفاده از کتابخانه های سه جزئی ارائه می دهم.

افزودن library dependencies

همانطوری که در بالا اشاره کردیم، از آنجایی که این طراحی بسیار محبوب است، بنابراین کتابخانه های زیادی در Github در دسترس هستند که می توانند به ما کمک کنند تا این کار را به راحتی انجام دهیم. من از TokenAutoComplete استفاده می کنم. به نظر من، یک کتابخانه ی خوب است و یک داکیومنت واضح دارد. بنابراین برای استفاده از آن در پروژه تان، ابتدا لطفا این dependency را به سطح build.gradle پروژه تان اضافه کنید:

 

نحوه سفارشی کردن AutoCompleteTextView

اول از همه فرض کنید که ما یک کلاس (POJO (contact data ساده مثل کد زیر داریم:

SimpleContact.java

 

حالا باید یک زیرکلاس برای <TokenCompleteTextView<T برای ایجاد یک لایه ی “chips item” در کنار EditText بسازیم. برای راحت شدن کار فقط کلاس مثل ContactsCompletionView.java در ماژول library sample  ایجاد کنید. در این پروژه T ، یک SimpleContact است:

ContactsCompletionView.java

 

و این هر فایل  (chip layout (XML است:

item_autocomplete_contact.xml

 

همانطور که می بینید، یک کلاس به نام TokenTextView وجود دارد، که یک زیرکلاس TextView که متد onSelected() آن را برای تنظیمش هنگام انتخاب و کلیک کردن کاربر، بازنویسی کرده  است.

TokenTextView.java

 

من این کلاس را به عنوان فایل اصلی در ماژول library sample گرفته ام. این یک پس زمینه ی قابل ترسیم برای نمایش ریشه فایل item_autocomplete_contact.xml می باشد.

res/drawable/chip_drawable.xml

 

قراردادن AutoCompleteTextView در لایه ی اکتیویتی

تا اینجا ما یک آبجکت تمام اتوماتیک  قابل نمایش به نام ContactsCompletionView ایجاد کردیم، بنابراین یک نمونه در فایل main activity layout  مثل کد زیر قرار دهید:

activity_main.xml

 

ایجاد کلاس adapter برای AutoCompleteTextView

کار بعدی این است که یک filter adapter برای ContactsCompletionView ، با ایجاد یک زیرکلاس برای FilteredArrayAdapter بسازید. من کلاس adapter خودم را توسط متدهای overriding getView() و keepObject() انجام می دهم.

FilterAdapter.java

 

همانطوری که در کد کلاس adapter می بینید، هر “hint row” از لایه نمایشی تمام اتوماتیک item_contact (XML) شناور است. این کد را ببینید:

item_contact.xml

 

پیکربندی کد برنامه نویسی اکتیویتی

به منظور ایجاد یک پاسخ برای انتخاب های کاربر در آیتم های auto completion view (chip object) ، اکتیویتی شما باید TokenListener interface را اجرا کند. با این کار شما دو متد را باید نادیده بگیرید:

onTokenAdded() : وقتی یک آیتم chip اضافه می شود.

onTokenRemoved : وقتی کاربر یک آیتم chip را از auto completion view پاک می کند.

این یک کد سورس ساده برای main activity می باشد:

MainActivity.java

 

اجرای اپلییکشن- برخی عکس های صفحه نمایش (اسکرین شات)

یک chip  در auto completion view مثل تصویر زیر است:

وقتی که شما در  auto completion view تایپ می کنید، نتیجه مثل تصویر زیر است:

وقتی کاربر انتخاب می کند و یک آیتم chip  را حذف می کند:

پس از کلیک روی دکمه ی “Get Input Data” :

نتیجه گیری

حالا ما به وسیله ی کتابخانه های سه جزئی می توانیم auto completion view با chip  ایجاد کنیم. یک طراحی خوب که مشا می توانید نمونه ی آن را در اپلیکیشن اندرویدی Gmail ببینید. با سرچ روی اینترنت شما می توانید تعداد زیادی کتابخانه پیدا کنید که می توانند به شما برای حل مشکلاتتان کمک کنند. برای مثال:

 

 

 

پاسخ دهید