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

این مقاله به همراه دیگر مقالات این مجموعه ۱۶ قسمتی، بر اساس آموزش ویدیویی در pluralsight به نام Android Fundamental : Layout تهیه شده است. تاریخ تولید این دوره ۲۰۱۹ است.روند منبع فوق در فهرست و محتوای مقالات، بطور کلی حفظ شده است ولی در جزئیات یک ترجمه کلمه به کلمه نیست؛ نگارش فهرست و محتوا با افزودن و دخالت همراه بوده است.بطور کلی هر جا حس شده توضیح بیشتر به درک مطلب کمک می‌کند دریغ نشده است.لی اوت در اندروید ۱ : مفاهیم اولیهلی اوت در اندروید ۲ : آشنایی با اتریبیوت های width و height لی اوت در اندروید ۳ : آشنایی با اتریبیوت های margin و padding لی اوت در اندروید ۴ : آشنایی با اتریبیوت gravity لی اوت در اندروید ۵ : آشنایی با لی اوت های پایهلی اوت در اندروید ۶ : آشنایی با LinearLayout لی اوت در اندروید ۷ : اتریبیوت weightلی اوت در اندروید ۸ : آشنایی با FrameLayoutلی اوت در اندروید ۹ : آشنایی با RelativeLayout لی اوت در اندروید ۱۰: آشنایی با CoordinateLayout لی اوت در اندروید ۱۱ : آشنایی با ConstraintLayout(در حال خواندن این مقاله هستید) لی اوت در اندروید ۱۲ : آشنایی با Layout Inspectorلی اوت در اندروید ۱۳ : بهینه سازی رابط کاربری لی اوت در اندروید ۱۴ : استفاده از تگ includeلی اوت در اندروید ۱۵ : استفاده از تگ mergeلی اوت در اندروید ۱۶ : استفاده از ViewStubپیش از این گفتیم که RelativeLayout قدیمی شده است. نمایی از لی اوت های مختلفما میتوانیم از ConstraintLayout به جای آن استفاده کنیم که قدرت و توانایی بیشتری دارد.همچنین در نظر داشته باشید که از ConstraintLayout به جای LinearLayout و FrameLayout میتوانید استفاده کنید و به نتیجه یکسان و حتا بهتری برسید.این لی اوت در سال 2016 در کنفرانس google i/o معرفی شد و با اندروید Api 9 به بعد مطابقت دارد.ویژگی مثبت این لی اوت این است که مکانیزم های ساده و کاملی برای انیمیشن در لی اوت ها فراهم میکند.مزایای ConstraintLayoutاما این لی اوت دقیقا چه کاربردی دارد؟به زبان ساده ایجاد لی اوت های بزرگ و پیجیده با یک سلسله مراتب 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 میگذاریم:برای et_password هم همینکار را میکنیم یعنی ابتدا نود بالایی آن را به نود پایینet_email مقید میکنیم.سپس layout_width را match_constraint میکنیممارجین بالا را هم 16میکنیم.برای btn_login هم همینکار را میکنیمبرای لینک های txv_signup و txv_forgot هم باید در کنار هم باشند.کافیست اولی را درگ کنیم و نود بالای آن را به نود زیرین دکمه login وصل کنیم و در ادامه نود چپ را به دیواره چپ بچسباتیم. مارجین بالا هم 32 میکنیم.برای آخرین المان هم همینکار را برای سمت راست میکنیم حالا باید دو تکست ویوی نهایی رو جوری تنظیم کنیم که هر کدام وسط ِ نصف هر بخش باشند. یعنی باید یکجور بفهمیم که نصف طول صفحه کجاست.از یک ابزار به نام vertical guildeline استفاده میکنیم.این ابزار در حقیقت یک ویوی غیر قابل مشاهده است که میتواند صفحه را به شکل افقی یا عمودی تقسیم کند.این ویو یا المان یا ابزار از دید کاربر مخفی است و تنها وسیله ای برای تسهیل جاگذاری است و فقط در ویژوال ادیتور قابل مشاهده است. روی لی اوت رایت کلیک کنید و از آیتم ها helpers و سپس نوع guideline که میخواهید انتخاب کنیدما میخواهیم از vertical guideline استفاده کنیم.در لیست کامپوننت ها آیتم فوق را میبینید.با جابجایی خط مارجین از سمت راست افزایش می یابد و واحد آن dp استاگر روی دایره موجود روی این خط کلیک کنیم جهت اندازه گیری فاصله عوض میشود:اگر یکبار دیگر روی دایره کلیک کنیم بر اساس درصد میشود:درصد از سمت چپ سنجیده میشود و ما برای این بخش آن را به 50 درصد منتقل میکنیمحالا بر اساس این محور محل دو تکست ویوی پایین را به آن مقید میکنیم.حالا layout_width آن را match_constraint میکنیم (یا همان 0dp)برای تکست ویوی دوم یعنی forgot password هم همینکار را میکنیم.این دو ویو الان به شکل برابر نسبت به guideline وسط صفحه قرار دارنداستفاده از constraint layout باعث میشود لی اوت های پیچیده را خیلی ساده تولید کنیم:همچنین ایجاد انیمیشن تحت این لی اوت بسیار ساده است.