Smooth Corner Transition

یکی از چالش هایی که تو پروژه اخیر داشتم این بود که توی یک صفحه ای ما یک دیزاینی داشتیم که Corner داشت و نیاز بود وقتی اسکرول میشه و به بالا میرسه Corner از بین بره و صاف بشه و tablayout که روز های هفته داخلش ست شده بود اون بالا pin بشه و فیکس بمونه , خب اینکار هم باعث دسترسی بهتر کاربر به روز های هفته میشه و هم تجربه بهتری و حس خوبی از اپ میگیره

بنظر من باید با کاربر مثل بچه های کوچیک رفتار کرد , همه چی اماده و جلو دستش باشه و زحمتی نکشه , نباید بهش سخت گرفت و پیچیدش کرد چون بچه ست و زود رنجه البته تا جایی که امکانش هست و واقعا بعضی جاها امکان ساده کردن راه وجود نداره

قبل از اینکه وارد دیزاین بشیم یک سری پیش نیاز ها برای دیزاین نیاز داریم !
خب ما میخوایم radius رو از مثلا به 25 به 0 تبدیل کنیم من اومدم دوتا shape ساختم که این دو حالت توش تعریف شده باشه یعنی :

این shape حالت ساده ما هست که هیچ radius نداره و وقتی کاربر صفحه رو اسکرول میکنه و tablayout ما به بالای صفحه میرسه باید تبدیل به این بشه

و برای حالت دیگمون همینه فقط بهش radius اضافه میکنیم

میخوام چیکار کنم !؟

میخوام با یک حالت انیمیشن این دوتا shape رو transition کنم که این حس القا بشه که داره تبدیل میشه به فلت پس میام یه فایل Drawable میسازم به صورت زیر و از این دوتا shape بالا استفاده میکنم

دیزاین اصلی

دیزاین اصلی رو بصورت زیر میزنم که یک حالت پارالکس بتونم ایجاد کنم

توجه داشته باشید که به Tablayout باید بکگراند بدیم , حالا کدوم بکگراند ؟ همون tansition که ساختیم با استفاده از اون دوتا shape ها

برسیم سر وقت اصل کار !

برای به ثمر رسوندن کارمون من کد رو به چند تا قسمت تبدیل کردم

از نظر من برای خوانایی کد هاتون هیچوقت بیش از یک کار رو داخل یک تابع انجام ندید و وظیفه هر تابع فقط یک کار باشه اینجوری هم دسترسی اسون تر میشه و هم کداتون تمیز تر میشه

به چند تا تابع نیاز داریم :

تابعی برای تغییر رنگ و محتویات Status Bar
چون من رنگ سرمه ای به دیزاین بالایی صفحه ام دادم و وقتی اسکرول میشه بگراند پایینی من سفیده پس Status Bar هم باید سفید بشه و اینکه بخوام بصورت ناگهانی و خیلی سریع Status Bar رو تغییر رنگ بدم حس خوبی رو القا نمیکنه و به نظرم اصلا حرفه ای نیست پس اومدم از Value Animator استفاده کردم و تو یه بازه زمانی مشخصی به صورت خیلی نرم تغییر رنگ دادم :

خب حالا اون changeStatusBarUiVisibility داخل تابع بالا چیه ؟ وقتی رنگ status bar رو تغییر میدید اون نوشته ها و یکون هایی که درونش قرار دارن بسته به نوع تم گوشی شما یک رنگی هستن و ممکنه با رنگ که شما دارید به status bar میدید تداخل داشته باشه و دیده نشه پس باید اونا هم بسته به نوع شرایطش تغییر بدید:

ولی خب حالا این تابع ها رو کجا استفاده کنیم ؟ اصل اصل کار !

وقتی که AppBarLayout ما وضعیتش تغییر کرد باید ما متوجه بشیم که ایا کامل بسته شده یا باز شده ( tab layout ما به صورت کامل چسبیده به بالاترین نقطه صفحه یا نه ؟ )
قبل از اینکه listener واسه appbar ایجاد کنیم اول بریم Transition رو درست کنیم
با استفاده از فانکشن هایی که بالا ایجاد کردیم یه تابع جدید میسازیم :

اینجا چیکار کردم !؟ خب خیلی سادست اومدم اول اون drawable که به Tablayout دادم رو ازش گرفتم و چک کردم که ایا appbar layout بسته ست یا بازه و از طریق اون فهمیدم که باید انیمیشن رو شروع کنم یا بازگردانی و بعدش status bar رو رنگش رو تغییر دادم , از طریق کد listener زیر هم میتونید متوجه بشید که app bar در چه وضعیتی قرار داره :