آموزش پیاده‌سازی Shared Element در اندروید

استاندارد

در اپلیکیشن‌های اندرویدی ، به صورت پیش‌فرض حرکت بین Activity یا Fragment هامون دارای انیمیشن ورود و خروج هستن . این انیمیشن‌ها شامل انیمیشن‌های پیشفرضی مثل fade in ، slide یا explode هست ، همینطور علاوه بر اینها ، شما میتونید از انیمیشن‌های دلخواه خودتون که ساختین استفاده کنید .
حالا گاهی پیش میاد که بین Activity یا Fragment هایی که قراره بین اونها حرکت کنیم کامپننت‌های گرافیکی مشابهی وجود داشته باشه . توی این حالت میتونیم با استفاده از Shared Element ، در حین حرکت بین دو activity (یا fragment) این کامپننت‌ها رو نگه داریم و فقط اونها رو از موقعیتی که در activiy (یا fragment) اول حضور دارن به موقعیت جدیدشون در activity (یا fragment) دوم منتقل کنیم . مثل زیر .

sharedelementgif

نکته : Shared Element فقط در اندروید ۵ ( api ۲۱) و بالاتر از اون پشتیبانی میشه .

حالا میریم سراغ سناریو مثالی که ما میخوایم اون رو پیاده‌سازی کنیم .  فرض کنید دوتا activity داریم ، activiy اول شامل یک لوگو با اندازه بزرگ در وسط صفحه‌ ، که نقش صفحه اسپلش رو برای ما بازی میکنه و activity دوم صفحه ثبت‌نام اپلیکیشن هست که باز هم شامل همون لوگو هست اما در اندازه کوچک‌تر . ما قراره با باز کردن اپلیکیشن با دیدن actitiy اسپلش ، بعد از ۲ ثانیه وارد activity ثبت‌نام بشیم . در حرکت بین این دو صفحه قراره لوگوی ما ( ImageView) از وسط صفحه‌ اسپلش با استفاده از Shared Element به جای جدیدش در activity ثبت‌نام منتقل بشه . دقیقا مثل روندی که کمی بالاتر در تصویر دیدیم . به خواندن ادامه دهید

معرفی Bottom navigation در متریال دیزاین

استاندارد

چند وقت قبل اندروید مدل جدیدی رو برای navigation در داخل اپلیکیشن‌ها معرفی کرد .مدلی به اسم Bottom navigation . چیزی خیلی شبیه به  مدل تب‌هایی( Tabs ) که از قبل در اندروید موجود بود ، ولی خیلی نزدیک‌تر به چیزی که توی IOS دیده بودیم  .bottom_nav توی این مدل تب‌ها از بالا به پایین صفحه منتقل شدند و کمی هم باید و نباید‌های جدید نسبت به مدل تب‌های سابق به اونها اضافه شده .
چیزی که توی این معرفی جالبه، اینه که قبلا بیشتر توسعه دهنده‌ها از جمله خودم وقتی کسی راجع‌به قرار دادن تب‌ها در پایین صفحه باهاشون حرف میزد ، یسری دلایل کاملا منطقی میاوردن که چرا پیاده کردن این مدل خیلی ایده خوبی نیست . یکی از مهم‌ترین این دلایل وجود ۳ دکمه اساسی هست که در پایین صفحه وجود داره و با قرار دادن تب‌ در اون ناحیه امکام وقوع اتفاق پیشبینی نشده (  مثلا کاربر دستش بخوره به یک دکمه که توقع‌ شو نداشته باشه ) بالا میره . با وجود معرفی رسمی این مدل ، من شخصا هنوز هم جزو طرفدار‌های این مدل نیستم و به نظرم ایراداتی که از قبل وجود داشته ، هنوز هم وجود داره . ولی با توجه به این موضوع که حالا این مدل توی Desing pattern های اندروید اومده و خیلی از اپلیکیشن‌های پر طرفدار دارن ارزش استفاده میکنن (مثل اینستاگرام ، کافه‌بازار و … ) گفتم شاید بد نباشه که درباره‌اش بنویسم .

چیزهایی که باید برای استفاده از Bottom navigation رعایت کنیم :
۱. تعداد تب‌های نمایش داده شده باید بین ۳ تا ۵ تب‌ باشه ، در صورتی احساس میکنید که کمتر یا بیشتر از این مقدار تب خواهید داشت بهتره سراغ این مدل نرید .
۲. برخلاف تب‌های معمول‌ ( بالای صفحه ) در این مدل نباید امکان scroll کردن ما بین تب‌ها وجود داشته باشه .
۳. همینطور برخلاف شیوه قدیمی نباید امکان تغییر بین تب‌ها بدون کلیک روی اونها (کشیدن انگشت به طرفین رو ) داشته باشیم .
۴. متن‌های استفاده شده در هر تب باید تا حد امکان کوتاه باشند ، همچنین استفاه از متن‌های چند خطی به هیچ وجه توصیعه نمیشه   .
۵. رنگ متن و ایکون‌های تب‌های مختلف نباید متفاوت باشن و فقط لازمه زنگ تب انتخاب شده تغییر کنه .
۶. اندازه‌ ایکون‌های استفاده شده باید ۲۴ در ۲۴ dp باشد .
موارد بالا خلاصه‌ای از مهم‌ترین موارد ذکر شده در صفحه مربوط به Bottom navigation بود . میتونید لیست کامل اون‌ها رو در اینجا بخونید .

چطور Bottom navigation رو توی پروژمون استفاده کنیم :
خب با توجه به اینکه توی نسخه‌های ‌کتابخونه‌های support گوگل فعلا خبری از پیاده‌‌سازی این مدل نیست ، یا باید خودمون این مدل رو پیاده‌سازی کنیم ، یا بگردیم دنبال کتابخونه‌هایی که آدم‌های باحال نوشتن و منتشر کردن . از اونجایی که توی این جور کارا این آدم‌های باحال همیشه فعال هستند بعد یه سرچ کوچیک میتونید چندتا کتابخونه برای پیاده کردن این مدل پیدا کنید . دو تا از بهترین کتابخونه‌ها برای انجام این کار AHBottomNavigation و BottomBar هستند که توضیحات و نحوه استفاده از هر کدومشون رو میتونید داخل صفحه گیت‌هابشون بخونید .
تو پست بعدی یه مثال از نحوه پیاده‌سازی Bottom navigation  با استفاده از کتابخونه AHBottomNavigation خواهم نوشت .

معرفی Snackbar در متریال دیزاین

استاندارد

Untitled

یکی از component های جالب و سبکی که گوگل توی متریال دیزان معرفیش کرد Snackbar بود . این component رو احتمالا توی اپ‌های خود گوگل مثل gmail و inbox  دیدید .
Snackbar دقیقا مثل Toast عمل میکنه ، با این تفاوت که به کاربر امکان انجام عملیات در داخل خودش رو میده ، مثلا اینکه درخواستی که توی پیام اومده رو رد یا قبول کنه .

در ادامه چگونگی ساخت snackbar رو برسی میکنیم .
برای قدم اول، فایل build.gradle پروژتون رو باز کنید و کد زیر رو بهش اضافه کنید .

کد زیر Snackbar ای میسازه که فقط یک متن رو نمایش میده .

sddsd تابع make سه پارامتر به عنوان ورودی میگیره ، پارامتر اول view پدر در layoutمونه که قراره توی اون Snackbar رو نمایش بدیم ، پارامتر دوم متنی هست که میخوایم نمایش بدیم و سومین پارامتر ،مدت زمانی هست که قراره snackbar به کاربرانمون نشون داده بشه .

نکته : برای پارامتر سوم بایستی از یکی از مقادیر LENGTH_SHORT, LENGTH_LONG  یا LENGTH_INDEFINITE استفاده کنیم و درصورتی که از LENGTH_INDEFINITE استفاده کنیم snackbar تا زمانی که به وسیله کشیدن از صفحه خارج نشه ، نشون داده خواهد شد .
نکته : در مستندات گوگل توصیه شده که برای view اصلی (پدر) که قراره snackbar در اون نمایش داده بشه  و به عنوان پارامتر اول به تابع make ارسال بشه از CoordinatorLayout استفاده کنید ، تا تمام قابلیت‌های پیش فرض snackbar مثل کشیدن برای از بین بردن ( swipe dissmiss ) و خارج شدن اتوماتیک از کنار صفحه قابل استفاده باشه .

خب حالا فرض کنید به وسیله snackbar میخوایم از کاربرامون یک تاییدیه بگیریم.

توی بالا با استفاده از تابع setAction یک عملیات رو برای snackbar مون تعیرف میکنیم . تابع setAction دوتا ورودی میگیره ، اولی اسمی هست که میخوایم برای عملیاتمون نمایش بدیم و دومی یک onClickListener .
و در آخر اگه بخوایم رنگ متن‌های نمایش داده شده رو تغییر بدیم میتونیم از کد زیر استفاده کنیم .

sdsdsds