ساخت یک رابط کاربری واکنش‌گرا با استفاده از بخش ConstraintLayout از Android Jetpack

شکل ۱. ویرایشگر نمای C را زیر A نشان می‌دهد، اما هیچ محدودیت عمودی ندارد.

شکل ۲. نمای C اکنون به صورت عمودی در زیر نمای A محدود شده است.

اگرچه فقدان قید باعث خطای کامپایل نمی‌شود، ویرایشگر طرح‌بندی، قیدهای فقدان‌شده را به عنوان خطا در نوار ابزار نشان می‌دهد. برای مشاهده خطاها و سایر هشدارها، روی نمایش هشدارها و خطاها کلیک کنید. برای کمک به شما در جلوگیری از از دست دادن قیدها، ویرایشگر طرح‌بندی به طور خودکار قیدهایی را با ویژگی‌های Autoconnect و infer constraints برای شما اضافه می‌کند.

ConstraintLayout را به پروژه خود اضافه کنید

برای استفاده از ConstraintLayout در پروژه خود، به صورت زیر عمل کنید:

1. مطمئن شوید که مخزن maven.google.com را در فایل settings.gradle خود اعلان کرده‌اید:

   گرووی

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   کاتلین

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. کتابخانه را به عنوان یک وابستگی در فایل build.gradle در سطح ماژول، همانطور که در مثال زیر نشان داده شده است، اضافه کنید. آخرین نسخه ممکن است با آنچه در مثال نشان داده شده است متفاوت باشد.

   شیار

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.1"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1"
   }

   کاتلین

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.1")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.1")
   }

3. در نوار ابزار یا اعلان همگام‌سازی، روی «همگام‌سازی پروژه با فایل‌های Gradle» کلیک کنید.

حالا آماده‌اید تا طرح‌بندی خود را با ConstraintLayout بسازید.

تبدیل یک طرح‌بندی

شکل ۳. منوی تبدیل یک طرح‌بندی به ConstraintLayout .

برای تبدیل یک طرح موجود به یک طرح محدودیت، این مراحل را دنبال کنید:

1. طرح‌بندی خود را در اندروید استودیو باز کنید و روی تب Design در پایین پنجره ویرایشگر کلیک کنید.
2. در پنجره‌ی درخت اجزا (Component Tree) ، روی طرح‌بندی (layout) کلیک راست کرده و گزینه‌ی Convert LinearLayout to ConstraintLayout را انتخاب کنید.

ایجاد طرح‌بندی جدید

برای شروع یک فایل طرح محدودیت جدید، این مراحل را دنبال کنید:

1. در پنجره پروژه ، روی پوشه ماژول کلیک کنید و File > New > XML > Layout XML را انتخاب کنید.
2. یک نام برای فایل طرح‌بندی وارد کنید و برای برچسب ریشه، عبارت "androidx.constraintlayout.widget.ConstraintLayout" را وارد کنید.
3. روی پایان کلیک کنید.

اضافه کردن یا حذف کردن یک محدودیت

برای اضافه کردن یک محدودیت، موارد زیر را انجام دهید:

1. یک نما را از پنجره پالت به داخل ویرایشگر بکشید.

   وقتی یک نما (view) را در ConstraintLayout اضافه می‌کنید، آن نما در یک کادر محصورکننده با دستگیره‌های تغییر اندازه مربعی در هر گوشه و دستگیره‌های محدودیت دایره‌ای در هر طرف نمایش داده می‌شود.

2. برای انتخاب آن، روی نما کلیک کنید.
3. یکی از موارد زیر را انجام دهید:
   • روی یک دستگیره‌ی قید کلیک کنید و آن را به یک نقطه‌ی لنگر موجود بکشید. این نقطه می‌تواند لبه‌ی نمای دیگر، لبه‌ی طرح‌بندی یا یک خط راهنما باشد. توجه داشته باشید که هنگام کشیدن دستگیره‌ی قید، ویرایشگر طرح‌بندی، لنگرهای اتصال بالقوه و پوشش‌های آبی را نشان می‌دهد.

   • روی یکی از گزینه‌های «ایجاد اتصال» کلیک کنید دکمه‌های موجود در بخش طرح‌بندی (Layout) پنجره‌ی ویژگی‌ها (Attributes )، همانطور که در شکل ۴ نشان داده شده است.

     

     شکل ۴. بخش Layout از پنجره Attributes به شما امکان ایجاد اتصالات را می‌دهد.

وقتی محدودیت ایجاد می‌شود، ویرایشگر یک حاشیه پیش‌فرض برای جدا کردن دو نما به آن می‌دهد.

هنگام ایجاد محدودیت‌ها، قوانین زیر را به خاطر داشته باشید:

• هر نما باید حداقل دو قید داشته باشد: یکی افقی و دیگری عمودی.
• شما فقط می‌توانید بین یک دسته محدودیت و یک نقطه لنگر که صفحه مشترکی دارند، محدودیت ایجاد کنید. یک صفحه عمودی - سمت چپ و راست - یک نما فقط می‌تواند به یک صفحه عمودی دیگر محدود شود و خطوط پایه فقط می‌توانند به خطوط پایه دیگر محدود شوند.
• هر دسته محدودیت می‌تواند فقط برای یک محدودیت استفاده شود، اما می‌توانید چندین محدودیت را از نماهای مختلف به یک نقطه لنگر یکسان ایجاد کنید.

شما می‌توانید با انجام هر یک از موارد زیر، یک محدودیت را حذف کنید:

• برای انتخاب یک محدودیت، روی آن کلیک کنید و سپس روی حذف کلیک کنید.

• برای حذف یک لنگر محدودیت ، کلید Ctrl را نگه دارید و کلیک کنید (در macOS، کلید Command را نگه دارید و کلیک کنید). همانطور که در شکل ۵ نشان داده شده است، محدودیت قرمز می‌شود تا نشان دهد که می‌توانید برای حذف آن کلیک کنید.

  

  شکل ۵. یک قید قرمز نشان می‌دهد که می‌توانید برای حذف آن کلیک کنید.

• در بخش طرح‌بندی (Layout) از پنجره‌ی ویژگی‌ها (Attributes) ، همانطور که در شکل ۶ نشان داده شده است، روی یک لنگر محدودیت (constraint anchor) کلیک کنید.

  

  شکل ۶. برای حذف یک لنگر محدودیت، روی آن کلیک کنید.

اگر قیدهای متضاد را به یک نما اضافه کنید، خطوط قید مانند فنر پیچیده می‌شوند تا نیروهای متضاد را نشان دهند، همانطور که در ویدیوی ۲ نشان داده شده است. این اثر زمانی بیشتر قابل مشاهده است که اندازه نما روی "fixed" یا "wrap content" تنظیم شده باشد، که در این صورت نما بین قیدها در مرکز قرار می‌گیرد. اگر می‌خواهید نما اندازه خود را برای مطابقت با قیدها بکشد، اندازه را به "match constraints" تغییر دهید . اگر می‌خواهید اندازه فعلی را حفظ کنید اما نما را طوری جابجا کنید که در مرکز قرار نگیرد، بایاس قید را تنظیم کنید .

شما می‌توانید از قیدها (constraints) برای دستیابی به انواع مختلف رفتار طرح‌بندی (layout) استفاده کنید، همانطور که در بخش‌های بعدی توضیح داده شده است.

جایگاه والدین

کنار یک نما را به لبه‌ی متناظر طرح‌بندی محدود می‌کند.

در شکل ۷، سمت چپ نما به لبه چپ طرح والد متصل شده است. می‌توانید فاصله از لبه را با حاشیه تعریف کنید.

شکل ۷. یک محدودیت افقی برای والد.

موقعیت سفارش

ترتیب نمایش دو نما را، چه عمودی و چه افقی، تعریف کنید.

در شکل ۸، B مقید شده است که همیشه در سمت راست A باشد، و C مقید شده است که زیر A قرار گیرد. با این حال، این قیدها به معنای هم‌ترازی نیستند، بنابراین B ​​همچنان می‌تواند به بالا و پایین حرکت کند.

شکل ۸. قید افقی و عمودی.

ترازبندی

لبه یک نما را با لبه مشابه در نمای دیگر تراز کنید.

در شکل ۹، سمت چپ B با سمت چپ A تراز شده است. اگر می‌خواهید مراکز دید را تراز کنید، در هر دو طرف یک قید ایجاد کنید.

شما می‌توانید با کشیدن نما به سمت داخل از محدودیت، ترازبندی را تغییر دهید. برای مثال، شکل 10، B را با ترازبندی با آفست 24dp نشان می‌دهد. این آفست توسط حاشیه نمای محدود شده تعریف می‌شود.

همچنین می‌توانید تمام نماهایی را که می‌خواهید تراز کنید انتخاب کنید و سپس روی Align کلیک کنید. در نوار ابزار برای انتخاب نوع ترازبندی.

شکل ۹. یک قید تراز افقی.

شکل ۱۰. یک قید تراز افقی با جابجایی.

تراز پایه

خط پایه متن یک نما را با خط پایه متن نمای دیگر تراز کنید.

در شکل ۱۱، خط اول B با متن A هم‌تراز شده است.

برای ایجاد یک محدودیت خط مبنا، روی نمای متنی که می‌خواهید محدود کنید کلیک راست کرده و سپس روی نمایش خط مبنا کلیک کنید. سپس روی خط مبنای متن کلیک کنید و خط را به خط مبنای دیگری بکشید.

شکل ۱۱. یک قید هم‌ترازی خط مبنا.

محدود به یک دستورالعمل

شما می‌توانید یک خط راهنمای عمودی یا افقی اضافه کنید که به شما امکان می‌دهد نماهای خود را محدود کنید و برای کاربران برنامه شما نامرئی باشد. می‌توانید خط راهنما را در طرح‌بندی بر اساس واحدهای dp یا درصد نسبت به لبه طرح‌بندی قرار دهید.

برای ایجاد یک راهنما، روی «راهنماها» کلیک کنید در نوار ابزار، و سپس روی «افزودن خط راهنمای عمودی» یا «افزودن خط راهنمای افقی» کلیک کنید.

برای تغییر موقعیت خط نقطه‌چین، آن را بکشید و برای تغییر حالت اندازه‌گیری، روی دایره‌ی کنار خط راهنما کلیک کنید.

شکل ۱۲. نمایی محدود به یک راهنما.

محدود کردن به یک مانع

مشابه یک خط راهنما، یک مانع (Barrier) یک خط نامرئی است که می‌توانید نماها را به آن محدود کنید، با این تفاوت که مانع موقعیت خود را تعریف نمی‌کند. در عوض، موقعیت مانع بر اساس موقعیت نماهای موجود در آن تغییر می‌کند. این زمانی مفید است که می‌خواهید یک نما را به مجموعه‌ای از نماها محدود کنید، نه به یک نمای خاص.

برای مثال، در شکل ۱۳، نمای C به سمت راست یک مانع محدود شده است. مانع در "انتهای" (یا سمت راست، در یک طرح از چپ به راست) هر دو نمای A و B قرار گرفته است. مانع بسته به اینکه سمت راست نمای A یا نمای B در سمت راست‌ترین حالت باشد، حرکت می‌کند.

برای ایجاد مانع، مراحل زیر را دنبال کنید:

1. دستورالعمل‌های کلیک در نوار ابزار، و سپس روی «افزودن مانع عمودی» یا «افزودن مانع افقی» کلیک کنید.
2. در پنجره درخت اجزا ، نماهایی را که می‌خواهید درون مانع قرار گیرند انتخاب کرده و آنها را به درون مؤلفه مانع بکشید.
3. مانع را از درخت اجزا انتخاب کنید، ویژگی‌ها را باز کنید پنجره، و سپس barrierDirection را تنظیم کنید.

حالا می‌توانید از یک نمای دیگر به مانع، یک قید ایجاد کنید.

همچنین می‌توانید نماهایی را که درون مانع هستند به مانع محدود کنید. به این ترتیب، می‌توانید تمام نماهای موجود در مانع را با یکدیگر تراز کنید، حتی اگر ندانید کدام نما طولانی‌ترین یا بلندترین است.

همچنین می‌توانید یک خط راهنما را درون مانع قرار دهید تا از حداقل موقعیت مانع اطمینان حاصل شود.

شکل ۱۳. نمای C به یک مانع محدود شده است که بر اساس موقعیت و اندازه هر دو نمای A و B حرکت می‌کند.

بایاس محدودیت را تنظیم کنید

وقتی یک قید به دو طرف یک نما اضافه می‌کنید، و اندازه نما برای همان بُعد یا "ثابت" یا "محتوای بسته" است، نما بین دو قید با بایاس پیش‌فرض ۵۰٪ در مرکز قرار می‌گیرد. می‌توانید بایاس را با کشیدن اسلایدر بایاس در پنجره Attributes یا با کشیدن نما، همانطور که در ویدیوی ۳ نشان داده شده است، تنظیم کنید.

اگر می‌خواهید اندازه نما برای برآورده کردن محدودیت‌ها کشیده شود، اندازه را به «مطابقت با محدودیت‌ها» تغییر دهید .

تنظیم اندازه نمایش

شکل ۱۴. هنگام انتخاب یک نما، پنجره‌ی ویژگی‌ها شامل کنترل‌هایی برای ۱. نسبت اندازه، ۲. حذف محدودیت‌ها، ۳. حالت ارتفاع یا عرض، ۴. حاشیه‌ها و ۵. بایاس محدودیت است. همچنین می‌توانید با کلیک کردن روی هر محدودیت در فهرست ۶ محدودیت، آن‌ها را در ویرایشگر طرح‌بندی برجسته کنید.

می‌توانید از دستگیره‌های گوشه برای تغییر اندازه یک نما استفاده کنید، اما این کار اندازه را به صورت کد ثابت تعیین می‌کند - نما برای محتوا یا اندازه‌های مختلف صفحه نمایش تغییر اندازه نمی‌دهد. برای انتخاب حالت اندازه‌بندی متفاوت، روی یک نما کلیک کنید و ویژگی‌ها را باز کنید. پنجره‌ای در سمت راست ویرایشگر.

تقریباً در بالای پنجره‌ی ویژگی‌ها ، بازرس نما (view inspector) قرار دارد که شامل کنترل‌هایی برای چندین ویژگی طرح‌بندی است، همانطور که در شکل ۱۴ نشان داده شده است. این فقط برای نماهایی که در یک طرح‌بندی محدودیت (constraint layout) قرار دارند، در دسترس است.

شما می‌توانید نحوه محاسبه ارتفاع و عرض را با کلیک کردن روی نمادهایی که با خط‌کشی ۳ در شکل ۱۴ نشان داده شده‌اند، تغییر دهید. این نمادها حالت اندازه را به شرح زیر نشان می‌دهند. برای تغییر بین این تنظیمات، روی نماد کلیک کنید:

• ثابت : یک بعد خاص را در کادر متن زیر یا با تغییر اندازه نما در ویرایشگر مشخص کنید.
• محتوا را پوشش دهید : نما فقط تا جایی که برای جا دادن محتوایش لازم است، گسترش می‌یابد.
• عرض_طرح_محدود

برای اینکه بُعد افقی با توجه به محدودیت‌ها تغییر کند، این مقدار را روی true تنظیم کنید. به طور پیش‌فرض، ویجتی که روی WRAP_CONTENT تنظیم شده باشد، توسط محدودیت‌ها محدود نمی‌شود.

• محدودیت‌های تطبیق : نما تا حد امکان گسترش می‌یابد تا محدودیت‌های هر طرف را برآورده کند، پس از در نظر گرفتن حاشیه‌های نما. با این حال، می‌توانید این رفتار را با ویژگی‌ها و مقادیر زیر تغییر دهید. این ویژگی‌ها فقط زمانی اعمال می‌شوند که عرض نما را روی "مطابقت با محدودیت‌ها" تنظیم کنید:
  • محدودیت عرض طرح (layout_constraintWidth_min)

    این یک بُعد dp برای حداقل عرض نما می‌گیرد.

  • محدودیت عرض طرح (layout_constraintWidth_max)

    این یک بُعد dp برای حداکثر عرض نما می‌گیرد.

  با این حال، اگر بُعد داده شده فقط یک محدودیت داشته باشد، آنگاه نما گسترش می‌یابد تا با محتوای آن متناسب شود. استفاده از این حالت روی ارتفاع یا عرض به شما امکان می‌دهد نسبت اندازه را نیز تنظیم کنید .

اندازه را به عنوان نسبت تنظیم کنید

شکل ۱۵. نسبت تصویر ۱۶:۹ است و عرض بر اساس نسبت ارتفاع تنظیم شده است.

اگر حداقل یکی از ابعاد نما روی "match constraints" ( 0dp ) تنظیم شده باشد، می‌توانید اندازه نما را روی نسبتی مانند 16:9 تنظیم کنید. برای فعال کردن نسبت، روی گزینه Toggle Aspect Ratio Constraint (با شماره 1 در شکل 14) کلیک کنید و نسبت width به height را در ورودی ظاهر شده وارد کنید.

اگر هر دو پارامتر عرض و ارتفاع روی "match constraints" تنظیم شده باشند، می‌توانید روی گزینه‌ی "Toggle Aspect Ratio Constraint" کلیک کنید تا انتخاب کنید کدام بُعد بر اساس نسبت بُعد دیگر باشد. بازرس نما با اتصال لبه‌های مربوطه با یک خط ممتد، نشان می‌دهد که کدام بُعد به عنوان نسبت تنظیم شده است.

برای مثال، اگر هر دو طرف را روی «مطابقت با محدودیت‌ها» تنظیم کنید، دو بار روی «تغییر نسبت ابعاد محدودیت» کلیک کنید تا عرض به نسبت ارتفاع تنظیم شود. کل اندازه توسط ارتفاع نما تعیین می‌شود که می‌تواند به هر شکلی تعریف شود، همانطور که در شکل ۱۵ نشان داده شده است.

تنظیم حاشیه‌های دید

برای اینکه نماهایتان به طور مساوی فاصله‌گذاری شوند، روی Margin کلیک کنید. در نوار ابزار، حاشیه پیش‌فرض را برای هر نمایی که به طرح اضافه می‌کنید، انتخاب کنید. هر تغییری که در حاشیه پیش‌فرض ایجاد کنید، فقط برای نماهایی که از آن به بعد اضافه می‌کنید اعمال می‌شود.

شما می‌توانید حاشیه هر نما را در پنجره Attributes با کلیک روی عدد روی خطی که هر قید را نشان می‌دهد، کنترل کنید. در شکل ۱۴، عبارت ۴ نشان می‌دهد که حاشیه پایین روی ۱۶dp تنظیم شده است.

شکل ۱۶. دکمه‌ی حاشیه‌ی نوار ابزار.

تمام حاشیه‌های ارائه شده توسط این ابزار، ضرایبی از 8dp هستند تا به شما کمک کنند نماهایتان با توصیه‌های شبکه مربعی 8dp متریال دیزاین همسو شوند.

کنترل گروه‌های خطی با یک زنجیره

شکل ۱۷. یک زنجیر افقی با دو نما.

یک زنجیره، گروهی از نماها است که با محدودیت‌های موقعیتی دو طرفه به یکدیگر مرتبط شده‌اند. نماهای درون یک زنجیره می‌توانند به صورت عمودی یا افقی توزیع شوند.

شکل ۱۸. نمونه‌هایی از هر سبک زنجیره‌ای.

زنجیرها را می‌توان به یکی از روش‌های زیر مدل داد:

1. پخش: نمایش‌ها پس از در نظر گرفتن حاشیه‌ها به طور مساوی توزیع می‌شوند. این حالت پیش‌فرض است.
2. پخش داخلی: اولین و آخرین نماها به محدودیت‌های هر انتهای زنجیره متصل شده‌اند و بقیه به طور مساوی توزیع شده‌اند.
3. وزن‌دار: وقتی زنجیره روی spread یا spread inside تنظیم شده باشد، می‌توانید فضای باقی‌مانده را با تنظیم یک یا چند نما روی "match constraints" ( 0dp ) پر کنید. به‌طور پیش‌فرض، فضا به‌طور مساوی بین هر نمایی که روی "match constraints" تنظیم شده است، توزیع می‌شود، اما می‌توانید با استفاده از ویژگی‌های layout_constraintHorizontal_weight و layout_constraintVertical_weight به هر نما وزنی از اهمیت اختصاص دهید. این کار مانند layout_weight در یک طرح‌بندی خطی عمل می‌کند: نمایی که بالاترین مقدار وزن را دارد، بیشترین فضا را می‌گیرد و نماهایی که وزن یکسانی دارند، به همان میزان فضا را دریافت می‌کنند.
4. فشرده: نماها پس از در نظر گرفتن حاشیه‌ها، با هم فشرده می‌شوند. می‌توانید بایاس کل زنجیره - چپ یا راست، یا بالا یا پایین - را با تغییر بایاس نمای «سر» زنجیره تنظیم کنید.

نمای "سر" زنجیره - نمای سمت چپ در یک زنجیره افقی (در طرح‌بندی چپ به راست) و نمای بالا در یک زنجیره عمودی - سبک زنجیره را در XML تعریف می‌کند. با این حال، می‌توانید با انتخاب هر نمای در زنجیره و کلیک بر روی دکمه زنجیره، بین حالت‌های spread ، spread inside و packing تغییر دهید. که در زیر view ظاهر می‌شود.

برای ایجاد یک زنجیره، موارد زیر را انجام دهید، همانطور که در ویدیوی ۴ نشان داده شده است:

1. تمام نماهایی را که قرار است در زنجیره گنجانده شوند، انتخاب کنید.
2. روی یکی از نماها کلیک راست کنید.
3. زنجیرها را انتخاب کنید.
4. یا مرکز افقی یا مرکز عمودی را انتخاب کنید.

هنگام استفاده از زنجیر چرخ باید به چند نکته توجه کنید:

• یک نما می‌تواند بخشی از یک زنجیره افقی و عمودی باشد، بنابراین می‌توانید طرح‌بندی‌های شبکه‌ای انعطاف‌پذیری بسازید.
• یک زنجیره تنها در صورتی به درستی کار می‌کند که هر انتهای زنجیره به جسم دیگری در همان محور محدود شده باشد، همانطور که در شکل ۱۴ نشان داده شده است.
• اگرچه جهت یک زنجیره عمودی یا افقی است، استفاده از یکی از آنها، نماها را در آن جهت تراز نمی‌کند. برای دستیابی به موقعیت مناسب برای هر نما در زنجیره، محدودیت‌های دیگری مانند محدودیت‌های ترازبندی را نیز در نظر بگیرید.

ایجاد محدودیت‌ها به صورت خودکار

به جای اضافه کردن محدودیت‌ها به هر نما هنگام قرار دادن آنها در طرح، می‌توانید هر نما را در ویرایشگر طرح‌بندی به موقعیت‌های مورد نظر خود منتقل کنید و سپس روی «Infer Constraints» کلیک کنید. برای ایجاد خودکار محدودیت‌ها.

Infer Constraints طرح‌بندی را بررسی می‌کند تا مؤثرترین مجموعه محدودیت‌ها را برای همه نماها تعیین کند. این ابزار نماها را به موقعیت فعلی‌شان محدود می‌کند و در عین حال انعطاف‌پذیری را نیز فراهم می‌کند. ممکن است لازم باشد تنظیماتی انجام دهید تا طرح‌بندی مطابق با اندازه‌ها و جهت‌های مختلف صفحه نمایش، پاسخ دهد.

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

اتصال خودکار به طور پیش‌فرض غیرفعال است. با کلیک روی «فعال کردن اتصال خودکار به والد»، آن را فعال کنید. در نوار ابزار ویرایشگر طرح‌بندی.

انیمیشن‌های کی‌فریم

درون یک ConstraintLayout ، می‌توانید تغییرات اندازه و موقعیت عناصر را با استفاده از ConstraintSet و TransitionManager به صورت انیمیشن نمایش دهید.

یک ConstraintSet یک شیء سبک وزن است که محدودیت‌ها، حاشیه‌ها و فاصله‌گذاری (padding) تمام عناصر فرزند درون یک ConstraintLayout نشان می‌دهد. وقتی یک ConstraintSet روی یک ConstraintLayout نمایش داده شده اعمال می‌کنید، طرح‌بندی محدودیت‌های تمام فرزندانش را به‌روزرسانی می‌کند.

برای ساخت یک انیمیشن با استفاده از ConstraintSet ، دو فایل طرح‌بندی را مشخص کنید که به عنوان فریم‌های کلیدی شروع و پایان برای انیمیشن عمل می‌کنند. سپس می‌توانید یک ConstraintSet از فایل فریم کلیدی دوم بارگذاری کرده و آن را به ConstraintLayout نمایش داده شده اعمال کنید.

مثال کد زیر نحوه‌ی متحرک‌سازی حرکت یک دکمه به پایین صفحه را نشان می‌دهد.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

منابع اضافی

ConstraintLayout در اپلیکیشن نمایشی Sunflower استفاده شده است.