این مقاله به همراه دیگر مقالات این مجموعه ۱۶ قسمتی، بر اساس آموزش ویدیویی در 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 را میبینید:
همچنین در مثال های زیر وقتی یک ایمیل را دیلیت میکنید، مسیجی در پایین صفحه میبینید که به آن snackbar میگویند.
این مسیج به شکل خودکار بعد از چند ثانیه ناپدید میشود.
در اپ های مختلف این ویجت وجود دارد. درتصویر زیر هم اکشن باتن و هم اسنک بار را میبینید.
حالا یک مثال ساده را طراحی میکنیم.
در mainActivity خود رویداد دکمه ای را تعریف میکنیم که با کلیک روی آن Snackbar نمایش دهد:
در لی اوت اگر ظاهر «اکشن باتن» به هم ریخته بود یکبار پروژه را ریبیلد میکنیم:
همانطورکه میبینید یک فریم لی اوت داریم که درونش یک دکمه با گراویتی به شکل center و یک fab به شکل bottom|end تعریف شده.
با کلیک روی دکمه، متد نوشته شده صدا زده میشود.
با اجرای برنامه و کلیک روی دکمه مشکلی که پیش می آید snackbar روی اکشن باتن می افتد
میخواهیم این مشکل رابرطرف کنیم.
ویوی ما به این شکل است :
با کلیک روی دکمه اینبار اسنک بار روی دکمه FAB نمی افتد و آنرا به سمت بالا هول میدهد
با کلیک روی دکمه اینبار اسنک بار روی دکمهFAB نمی افتد و آنرا به سمت بالا هُل میدهد:
به همین دلیل است که Coordinatorlayout را یک فریم لی اوت قدرتمند مینامند.
اما چطور این snackbar به این شکل عمل میکند؟
آرگومان اول view است.
مهم نیست چه ویویی به این آرگومان پاس داده میشود، فقط باید مطمئن باشید ویویی که پاس داده میشود هرگز null نباشد و مقداری بر اساس لی اوت شما داشته باشد.
اگر کد پشتِ متد make را ببینیم :
خواهیم دید که از روی این ویوی پاس داده شده، پرنت آن پیدا میشود.
اگر باز هم داخل تر برویم و پیاده سازی متد findsuitableParent را نگاه کنیم:
یک لوپ میبینیم در سلسله مراتب پرنت میچرخد و اگر یک CoordinateLayout پیدا کند که مثلا روت باشد آن را برمیگرداند.
در حقیقت همان اول این لی اوت را پیدا میکند:
در کد به بخش else میرسد
و اتفاقی که باید بیفتد می افتد.
اگر CoordinateLayout نداشته باشیم در کد زیر به بخشی که نشان داده شده میرود:
برنامه به دنبال فریم لی اوت میگردد و شناسه آن را بررسی میکند. در حقیقت این فریم لی اوت پیش فرض موجود در ویوی اصلی است که ریشه ویوهای ماست (نه فریم لی اوت ما) در حقیقت این شرط این معنی را دارد که CoordinateLayout یافت نشده است.
پس نتیحه میگیریم مکانیزم make در Snackbar این است که در سلسله مراتب ویو دنبال یک پرنت از جنس CooredinateLayout میگردد و اگر پیدا نکرد با فرض فریم لی اوت کار میکند.
سوال : آیا میتوان خود آبجکت CoordinateLayout را به عنوان نمونه به این make پاس داد؟
بله.
یک نام برای المان ویوی آن انتخاب میکنیم.
دیگر نمونه‌ی این المان در سمت کد در دسترس خواهد بود.
میتوانید 200 درصد مطمئن باشید که این روش درست و خوب و طبق میل شما کار میکند!
براحتی به کمک Coordinatelayout دیدیم که چطور یک «اکشن باتن» و یک «اسنک بار» با هم تعامل دارند.
مثال دیگر برای اینکار زمانیست که لیست را به بالا اسکرول میکنیم و اکشن بار حذف میشود
قانونی که برای انجام اینکار باید رعایت کنید این است که لی اوت اصلی شما از نوع CoordinateLayout باشد.
این لی اوت میتواند اینترکشن بین ویوهای زیر را فعال کند اگر به شکل چایلد استفاده شوند.
مثال زیر را ببینید:
با بالا کشیدن لیست، تصویر بالای لیست محو میشود. این افکت بر مبنای لی اوت Coordinate و اجزایی هست که در بالا به عنوان ویو معرفی شده است. به علاوه اینها به یک لی اوت ویژه به نام CollapsingToolbarLayout نیاز داریم.
در این مقاله وارد جزئیات نشدیم و ایجاد انیمیشن و کارهای پیشرفته را بررسی نکردیم. امیدواریم مقداری با این لی اوت مهم آشنا شده باشید و با کمی سرچ و مطالعه به آنچه می‌خواهید دست یابید.
