لی اوت در اندروید ۱۰ : آشنایی با CoordinateLayout

این مقاله به همراه دیگر مقالات این مجموعه ۱۶ قسمتی، بر اساس آموزش ویدیویی در pluralsight به نام Android Fundamental : Layout تهیه شده است. تاریخ تولید این دوره ۲۰۱۹ است.روند منبع فوق در فهرست و محتوای مقالات، بطور کلی حفظ شده است ولی در جزئیات یک ترجمه کلمه به کلمه نیست؛ نگارش فهرست و محتوا با افزودن و دخالت همراه بوده است.بطور کلی هر جا حس شده توضیح بیشتر به درک مطلب کمک می‌کند دریغ نشده است.لی اوت در اندروید ۱ : مفاهیم اولیهلی اوت در اندروید ۲ : آشنایی با اتریبیوت های width و height لی اوت در اندروید ۳ : آشنایی با اتریبیوت های margin و padding لی اوت در اندروید ۴ : آشنایی با اتریبیوت gravity لی اوت در اندروید ۵ : آشنایی با لی اوت های پایهلی اوت در اندروید ۶ : آشنایی با LinearLayout لی اوت در اندروید ۷ : اتریبیوت weightلی اوت در اندروید ۸ : آشنایی با FrameLayoutلی اوت در اندروید ۹ : آشنایی با RelativeLayout لی اوت در اندروید ۱۰: آشنایی با CoordinateLayout (در حال خواندن این مقاله هستید) لی اوت در اندروید ۱۱ : آشنایی با ConstrantLayoutلی اوت در اندروید ۱۲ : آشنایی با Layout Inspectorلی اوت در اندروید ۱۳ : بهینه سازی رابط کاربری لی اوت در اندروید ۱۴ : استفاده از تگ includeلی اوت در اندروید ۱۵ : استفاده از تگ mergeلی اوت در اندروید ۱۶ : استفاده از ViewStubتا حالا در مورد سه لی اوت صحبت کردیم:لی اوت ها یا ویوگروپ های پایه ایاین سه لی اوت را میتوان قدیمی ترین وپایه ای ترین لی اوت های اندروید نامید.اما CoordiantorLayout چیست؟ چرا آن را یک نوع فریم لی اوت قدرتمندتر میدانند؟در یک مثال میبینیم که یک FAB یا Floating action button و یک Snackbar وجود دارند، میخواهیم مشکلی که با فریم لی اوت بوجود می آید را رفع کنیم.در تصاویر زیر FAB را می‌بینید:آنچه به عنوان FAB میشناسیم.همچنین در مثال های زیر وقتی یک ایمیل را دیلیت میکنید، مسیجی در پایین صفحه میبینید که به آن snackbar میگویند.نوار موقتیِ مشکی رنگ پایین صفحه را snackbar میگویند.این مسیج به شکل خودکار بعد از چند ثانیه ناپدید میشود.در اپ های مختلف این ویجت وجود دارد. درتصویر زیر هم اکشن باتن و هم اسنک بار را میبینید.نمایی بزرگ از snackbarحالا یک مثال ساده را طراحی میکنیم.در mainActivity خود رویداد دکمه ای را تعریف میکنیم که با کلیک روی آن Snackbar نمایش دهد:متد make مسئول ساخت snackbar است. همچنین با متد show این المان نمایش داده میشود.در لی اوت اگر ظاهر «اکشن باتن» به هم ریخته بود یکبار پروژه را ریبیلد میکنیم:ریبیلد کردن پروژههمانطورکه میبینید یک فریم لی اوت داریم که درونش یک دکمه با گراویتی به شکل center و یک fab به شکل bottom|end تعریف شده.با کلیک روی دکمه، متد نوشته شده صدا زده میشود.با اجرای برنامه و کلیک روی دکمه مشکلی که پیش می آید snackbar روی اکشن باتن می افتدبعد از فشردن دکمه، اسنک بار روی FAB ظاهر میشود.میخواهیم این مشکل رابرطرف کنیم.ویوی ما به این شکل است :با کلیک روی دکمه اینبار اسنک بار روی دکمه FAB نمی افتد و آنرا به سمت بالا هول میدهدتعویض لی اوت به Coordinateبا کلیک روی دکمه اینبار اسنک بار روی دکمهFAB نمی افتد و آنرا به سمت بالا هُل میدهد:پس از فشردن دکمه، اسنک بار دکمه FAB را به بالا حرکت میدهد.به همین دلیل است که Coordinatorlayout را یک فریم لی اوت قدرتمند مینامند.اما چطور این snackbar به این شکل عمل میکند؟آرگومان اول view است.مهم نیست چه ویویی به این آرگومان پاس داده میشود، فقط باید مطمئن باشید ویویی که پاس داده میشود هرگز null نباشد و مقداری بر اساس لی اوت شما داشته باشد.اگر کد پشتِ متد make را ببینیم :خواهیم دید که از روی این ویوی پاس داده شده، پرنت آن پیدا میشود.اگر باز هم داخل تر برویم و پیاده سازی متد findsuitableParent را نگاه کنیم:یک لوپ میبینیم در سلسله مراتب پرنت میچرخد و اگر یک CoordinateLayout پیدا کند که مثلا روت باشد آن را برمیگرداند.در حقیقت همان اول این لی اوت را پیدا میکند:در کد به بخش else میرسدو اتفاقی که باید بیفتد می افتد.اگر CoordinateLayout نداشته باشیم در کد زیر به بخشی که نشان داده شده میرود:برنامه به دنبال فریم لی اوت میگردد و شناسه آن را بررسی میکند. در حقیقت این فریم لی اوت پیش فرض موجود در ویوی اصلی است که ریشه ویوهای ماست (نه فریم لی اوت ما) در حقیقت این شرط این معنی را دارد که CoordinateLayout یافت نشده است.پس نتیحه میگیریم مکانیزم make در Snackbar این است که در سلسله مراتب ویو دنبال یک پرنت از جنس CooredinateLayout میگردد و اگر پیدا نکرد با فرض فریم لی اوت کار میکند.سوال : آیا میتوان خود آبجکت CoordinateLayout را به عنوان نمونه به این make پاس داد؟بله.یک نام برای المان ویوی آن انتخاب میکنیم.‌دیگر نمونه‌ی این المان در سمت کد در دسترس خواهد بود.میتوانید 200 درصد مطمئن باشید که این روش درست و خوب و طبق میل شما کار میکند!براحتی به کمک Coordinatelayout دیدیم که چطور یک «اکشن باتن» و یک «اسنک بار» با هم تعامل دارند.مثال دیگر برای اینکار زمانیست که لیست را به بالا اسکرول میکنیم و اکشن بار حذف میشودقانونی که برای انجام اینکار باید رعایت کنید این است که لی اوت اصلی شما از نوع CoordinateLayout باشد.این لی اوت میتواند اینترکشن بین ویوهای زیر را فعال کند اگر به شکل چایلد استفاده شوند.مجموعه ای که با هم کار میکنند.مثال زیر را ببینید:مراحل بالا کشیدن لیست با درگ کردن صفحه به بالا (از چپ به راست)با بالا کشیدن لیست، تصویر بالای لیست محو میشود. این افکت بر مبنای لی اوت Coordinate و اجزایی هست که در بالا به عنوان ویو معرفی شده است. به علاوه اینها به یک لی اوت ویژه به نام CollapsingToolbarLayout نیاز داریم.مواد لازم!در این مقاله وارد جزئیات نشدیم و ایجاد انیمیشن و کارهای پیشرفته را بررسی نکردیم. امیدواریم مقداری با این لی اوت مهم آشنا شده باشید و با کمی سرچ و مطالعه به آنچه می‌خواهید دست یابید.