اولین نکاتی که می خواهیم یاد بگیریم نحوه تعین مکان و همچنین تعیین ابعاد ویووها در Constrain Layout هست .علاوه بر اینها ما این توانایی رو داریم که یک ویو موجود در ConstraintLayout رو به سایر ویوها یا به ویوگروپ والد (حتی خود ConstraintLayout) متصل (مقیّد ) کنیم.نگران نباشید مبحث خیلی ساده هست در ادامه با این مباحث آشنا می شیم .

 

یک Button و یک TextView رو داخل لیوت بکشید.(مطابق تصویر زیر)

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

اگر که به خاصیت های این دو ویو دقت کرده باشید دو تا خاصیت جدید میبینید :

این دو خاصیت مشخص کننده مکان ویو ما هستند. ( در صورتی که دوتاشون صفر باشند ویو میره گوشه بالا سمت چپ)
برای مثال در اینجا ما مقدار صفر رو به این خاصیت ها (برای تکست  ویو ) دادیم که همون جور که در تصویر زیر می بینید موقعیت اون به گوشه سمت چپ بالای صفحه تغییر کرد..

 

 

 

تعیین طول و عرض برای ویو های موجود در ConstraintLayout

به حالت Design  رفته و بر روی Button کلیک کنید.حالا روی آیکون فلش دو طرفه  کلیک کنید تا پنجره مربوط به مشاهده و تغییر خصوصیات دکمه به حالت زیر نمایش داده شه

مربعی که در سمت راست میبینید نمادی از ویووی هست که روش کلیک کردیم (Button).حالا اگر روی  فلش های موجود در مربع که بطور پیش فرض >>>  <<< هستند کلیک کنید شکل اونها عوض میشه که هرکدوم از این اشکال ، نماد یکی  حالات ابعاد دهی به ویو ها در ConstraintLayout هست.
در تصویر زیر حالت های مختلف مربوطه رو مشاهده می کنید

لیوت ConstraintLayout

 

 

 

۱-نماد اول  

اگر نماد بالا رو برای width انتخاب کنید به معنی این هست که میخواهیم مقدار عرض ویو ما برابر wrap_content قرار بگیره.دادن مقدار wrap_content به  این معنی است که عرض ویو ما رو به اندازه ای که برای نمایش محتویات درونش کافی باشد عریض کن.همین قضیه برای height نیز صدق می کند.(به تصویر زیر دقت کنید)

 

 

 

۲- نماد دوم
اگر نماد دوم رو برای width انتخاب کنید به معنی این هست که می خواهیم  عرض ویو ما برابر یک مقدار ثابت باشد.(مثلاً ۲۰dp) .همین قضیه برای height نیز صدق می کند.(به تصویر زیر دقت کنید)

 

 

 

۳- نماد سوم 
اگر نماد بالا  رو برای width انتخاب کنید به معنی این هست که میخواهیم مقدار عرض ویو ما برابر match_Constraint قرار بگیره.با انتخاب این مقدار برای width یا height بطور پخودکار مقدار ۰dp جایگزین می شود.این ویژگی تقریبا مثل match_parent (نکته : مقدار match_parent در این لیوت پشتیبانی نمی شود)است.برای مثال اگر با استفاده از اتصالات(با اتصالات در ادامه مطلب آشنا می شیم.) موجود در constrainLayout یک ویو از سمت چپ و راست به والدش(ConstraintLayout) وصل کنیم و این مقدار رو برای width انتخاب کنیم عرض ویو ما به اندازه عرض والدش عریض می شود. (به تصویر زیر دقت کنید)
نکته  : مقادیر Margin نیز حساب می شوند.

 

 

 

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

اگر روی یک ویو کلیک کنید چهار دایره سفید رنگ در وسط هر چهار ضلع ویو مطابق شکل ظاهر میشه

در صورتی که نشانه گر موس رو روی یکی از دایره ها ببرید پیامی مبنی بر ایجاد اتصال به شما نمایش داده میشود.حالا اگه روی  یکی از این دایره ها  کلیک چپ کرده  بعدش و اون رو به یکی از کنار های لیوت برده و رها کنیم ویو ما به اون سمت متصل میشه (همچنین اگه اون روی دایره ای کلیک چپ رو نگه داشته و روی یکی از دایره های ظاهر شده روی سایر ویو  کلیک رو رها کنیم ، ویو ما به ویو مقصد متصل میشه .از این به بعد هر وقت ویو مقصد رو جابجا کنیم ویو ما بهمراه اون جابجا میشه)
به تصاویر زیر دقت کنید.

همان طور که مشاهده می کنید اتصالات ما در نمای BluePrint (بخش آبی سمت راست ) قابل مشاهده هستند.

 

در مورد متصل کردن ویوها مفصل تر صحبت می خواهیم کرد.
امیدوارم خوشتون اومده باشه.

موفق باشید.