Chip، از اجزای متریال دیزاین اندروید (ایجاد chips layout در اندروید)

Chip، از اجزای متریال دیزاین اندروید (ایجاد chips layout در اندروید)Reviewed by آریانا on Jan 10Rating: 5.0نحوه ایجاد Chip، از اجزای متریال دیزاین اندروید (ایجاد chips layout در اندروید)نحوه ایجاد Chip، از اجزای متریال دیزاین اندروید (ایجاد chips layout در اندروید)

Chip یکی از کامپوننت های متریال دیزاین است که برای توسعه دهندگان گوگل ارائه شده است. Chip در واقع هویت های بزرگ را در قالب بلوک های کوچک مانند مخاطب نشان می دهد.

طبق دستورالعمل گوگل دیزاین، Chip ممکن است:

  • شامل ورودی هایی مثل عکس، متن، قوانین، آیکون و یا یک مخاطب باشد.
  • اطلاعات مخاطب را در قالب یک بسته ی کوچک نشان دهد.

اگر بخواهیم یک مثال محبوب از استفاده از این کامپوننت بزنیم، باید به استفاده از chips layout در Google Play اشاره کنیم. تصویر زیر را ببینید:

در SDK آندروید و کتابخانه پشتیبانی طراحی، هیچ ویجت رسمی برای ایجاد chips layout وجود ندارد ، بنابراین ما باید خودمان به صورت سفارشی آن را ایجاد کنیم. علاوه بر این، هزاران کتابخانه ی third-party  وجود دارد که می توانند برای مقابله با این مشکل به ما کمک کنند.

در این پست من میخواهم به شما یک راه حل برای ایجاد برخی استایل های chip توسط فایل های xml  ارائه دهم.

اعلام برخی از اندازه های منابع

با یک نگاه اجمالی به مشخصات موجود در دستورالعمل chip ، متوجه برخی ابعاد و اندازه های لازم برای ایجاد یک chip layout می شویم. پس قبل از شروع من برخی اندازه های منابع را اعلام می کنم.

dimens.xml

 

ایجاد یک   chip layout ساده (فقط برچسب متنی یا  text label )

هیچ چیز ناآشنایی اینجا وجود ندارد، ما فقط یک بک گراند یا پس زمینه با گوشه های گرد برای TextView ایجاد می کنیم که بتوانیم یک chip را بسازیم. ابتدا یک فایل جدید drawable resource با یک shape به عنوان root attribute ایجاد می کنیم.

res\drawable\shape_chip_simple_drawable.xml

 

در فایل لایه اکتیویتی خود، فقط این فایل drawable resource را به عنوان یک TextView background تعریف کنید :

activity_main.xml

 

حالا اکتیویتی را اجرا کنید، می بینید که یک chip layout ساده دارید:

ایجاد یک chip قابل حذف

یک chip قابل حذف شامل یک آیکون حذف در سمت راستش می شود. وقتی روی این آیکون حذف کلیک کنید، chip هم حذف می شود. به منظور طراحی این نوع layout ، باید یک TextView و یک ImageView را در یک RelativeLayout ایجاد کنید:

activity_cross_chips.xml

 

و این یک فایل drawable resource برای تنظیم کردن بک گراند TextView می باشد:

shape_chip_drawable.xml

 

نکته: شما باید از این طراحی به جای تعریف یک TextView با یک drawableRight استفاده کنید چون شما باید به مسئولیت رویداد کلیک روی آیکون حذف در کد برنامه نویسی خود رسیدگی کنید:

DeleteChipActivity.java

 

اکتیویتی خود را اجرا کنید، خروجی زیر را به شما می دهد:

وقتی روی آیکون حذف کلیک کنید:

ایجاد Chip با متن و آیکون

این ممکن است contact chip نامیده شود وقتی که ما یک آیکون در سمت چپ label داشته باشیم. علاوه بر این ممکن است یک آیکون حذف هم سمت راست داشته باشیم. این آیکون همیشه یک round ImageView است که باید آنها را در یک RelativeLayout مثل کد زیر دسته بندی نمایید:

activity_icon_chip.xml

 

round ImageView می تواند توسط یک کتابخانه third-party ایجاد شود. در این مثال من از یک CircleImageView استفاده می کنم بنابراین لطفا dependency را به dependencies scope  در سطح build.gradle  اپلیکیشن خود اضافه کنید :

 

سخت ترین کار تثبیت اندازه ها برای هر ویجت است. من از منابع اندازه ای که در بالا توضیح دادم استفاده می کنم و یک خروجی مثل تصویر زیر خواهیم داشت:

نتیجه گیری

کامپوننت Chip می تواند به راحتی و با اعمال برخی تنظیمات در منابع و فایل های layout ایجاد شود. از حالا به بعد شما می توانید از ScrollView افقی برای نمایش ردیفی از  Chip ها (مثل اپلیکیشن های GooglePlay) و یا از StaggeredGridLayoutManager برای ساخت یک شبکه تناوبی از chips layout (که tag layout نامیده می شود) استفاده کنید.

 

 

 

 

 

 

پاسخ دهید