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

این مقاله به همراه دیگر مقالات این مجموعه ۱۶ قسمتی، بر اساس آموزش ویدیویی در pluralsight به نام Android Fundamental : Layout تهیه شده است. تاریخ تولید این دوره ۲۰۱۹ است.
روند منبع فوق در فهرست و محتوای مقالات، بطور کلی حفظ شده است ولی در جزئیات یک ترجمه کلمه به کلمه نیست؛ نگارش فهرست و محتوا با افزودن و دخالت همراه بوده است.
بطور کلی هر جا حس شده توضیح بیشتر به درک مطلب کمک می‌کند دریغ نشده است.

پیش از این گفتیم که RelativeLayout قدیمی شده است.

ما میتوانیم از ConstraintLayout به جای آن استفاده کنیم که قدرت و توانایی بیشتری دارد.

همچنین در نظر داشته باشید که از ConstraintLayout به جای LinearLayout و FrameLayout میتوانید استفاده کنید و به نتیجه یکسان و حتا بهتری برسید.

این لی اوت در سال 2016 در کنفرانس google i/o معرفی شد و با اندروید Api 9 به بعد مطابقت دارد.

ویژگی مثبت این لی اوت این است که مکانیزم های ساده و کاملی برای انیمیشن در لی اوت ها فراهم میکند.

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

به زبان ساده ایجاد لی اوت های بزرگ و پیجیده با یک سلسله مراتب flat که نیازی به لی اوت های nested ندارد از ویژگی های این لی اوت است.

این یعنی هر چقدر ویوی شما پیجیده باشد نیازی به استفاده از nested layout نخواهید داشت.

نداشتن لی اوت های تو در تو باعث افزایش پرفورمنس برنامه شما میشود چون پراسس کمتری در اندروید نیاز دارد.

البته Relativelayout هم چیزی شبیه همین بود اما این لی اوت انعطاف پذیرتر است. به کمک مفهوم قیود که یک نوع اتصال خاص است، میتوانید پوزیشن نسبی داشته باشید.

نکته دیگر اینکه تمامی قدرت این لی اوت بر مبنای ویرایشگر لی اوت اندروید استودیو و با ابزار ویژوال است. یعنی کل لی اوت را با درگ اند دراپ به جای ویرایش کردن xml تولید کنید و این مزیت بزرگی است.

برای مثال یک لی اوت جدید میسازیم.

از لایبرری androidX اضافه میشود، اگر این لایبرری را داشته باشید،نیازی به اضافه کردن کتابخانه های اضافی ندارید.

یک دکمه به صفحه درگ میکنیم.

و خطایی میبینیم که میگوید این ویو مقید نشده است یعنی این button که در وسط صفحه قرار گرفته تنها در یک وضعیت موقتی design time است. معنی این حرف این است که اگر برنامه را روی دیوایس واقعی اجرا کنیم این دکمه به سمت بالا سمت چپ صفحه منتقل میشود چون هیچ قیدی ندارد.

روی نود بالای این ویو کلیک میکنیم تا سبز شود که یعنی شما میخواهیددر این قسمت قیدی بگذارید:

حالا این نود را درگ میکنیم با بالای لی اوت

با رها کردن کلیک، قید این ویو با بالای صفحه برقرار میشود:

در بخش layout کنار صفحه میتوانیم ببینیم که بخش بالای کادر را طوسی نشان میدهد.در سمت هایی که قید نداریم با علامت مثبت آبی نشان داده میشود. دراپ دان بالای کادر میزان مارجین از بالای صفحه را نشان میدهد.

مثلا این مقدار را به 10 تغییر میدهیم.

در xml این لی اوت خواهیم دید :

به اتریبیوت جدید ویوی دکمه دقت کنید

این اتریبیوت قید بالا را مشخص میکند.

خوبی طراحی با ویژوال ادیتور در اندروید استودیو این است که لازم نیست نگران این اتریبیوت باشیم و همه چیز در سمت بخش طراحی انجام میشود و به شکل خودکار کد آن اضافه میشود.

پایین ویوی دکمه را هم به پایین صفحه لی اوت مقید میکنیم:

سمت چپ و راست را هم به جهت خودشان مقید میکنیم.

اگر سمت بالا و سمت راست را فقط مقید میکردیم انگار دو جهت دیگر هم مقید شده اند. به کمک نوار لغزان موجود در تب layout در سمت راست صفحه میتوان مارجین از جهت ها را دستکاری کرد.

همچنین در این حالت match_parent نداریم و به جایش match_constraint داریم:

با اینکار این ویو در طول صفحه پخش میشود و این بخش صفر میشود:

اگر ماوس را روی قیویدی که قبلا گذاشتیم ببریم به رنگ قرمز میشود یعنی میتوانید الان این قید را حذف کنید:

از سمت راست صفحه هم میتوان قیود را حذف کرد:

مثال دیگری ببینید، لی اوت زیر را قبلا با LinearLayout ساختیم

در اندروید به راحتی میتوان لی اوت های دیگر را به ConstraintLayout تبدیل کرد:

سوال زیر را میپرسد که آیا میخواهید لی اوت ها را فلت کند؟ یعنی از حالت nested خارج کند:

همانطور که گفتیم هدف اصلی در استفاده از این لی اوت این است که ویوها در سلسله مراتب به شکل فلت باشند.

در گزینه دوم اجازه فلت نشدن لایه هایی که در بخش کد به آنها اشاره شده را نمیدهید چون در سمت کد مشکل ایجاد میکند.

اتفاق زیر می افتد:

معمولا این کانورت به شکل صد درصدی آنچیزی که میخواهید نمیشود. اما میتوانید مشکل را رفع کنید.

اول شناسه لی اوت روت را که الان constraint شده عوض کنید:

همچنین چون گراویتی برای این لی اوت بلااستفاده است آنرا حذف میکنیم:

به سراغ ویوهای داخلی میرویم،برای img_logo طول و عرض انتخاب میکنیم :

برای سه جهت بالا و چپ و راست قید تعریف میکنیم:

اندازه مارجین از بالا را مثلا 75 میگذاریم.

حالا بخش بالایی et_email را میگیریم و به پایین img_logo مقید میکنیم

پس از اینکه به پایین عکس منتقل شد چند کار انجام میدهیم. اول از همه قید چپ و راست را به سمت دیواره ها برقرار میکنیم. سپس در layout_width مقدار صفر یا match_constraint میگذاریم.

مارجین بالایی هم 24 میگذاریم: