constarnlayout ، demistified – چگونه واقعاً کار می کند و وقتی باید به آن برسید | توسط Akshay Nandwana | سپتامبر ، 2025
مخاطب: مهندسان اندرویدی که می خواهند در مورد طرح به عنوان طراحان سیستم فکر کنند. اگر استفاده کرده اید
LinearLayout/ /RelativeLayoutیا آهنگسازیBox/Row/Columnو نمی دانم وقتی ConstrantLayout ابزار بهتری است – و چرا – این برای شما مناسب است.
tl ؛ دکتر
- محدودیت به شما امکان می دهد رابط کاربری را به عنوان مجموعه ای از آن مدل کنید محدودیت ها بین لنگرها (طرفین ، خطوط پایه) ، نه جعبه های ورودی.
- در داخل ، آن را ایجاد می کند خط معادلات خطی بیش از این لنگرها و آنها را با حل محدودیت سبک صندوقدار حل کنید ، سپس مرزهای محاسبه شده را در
onLayoutحرف - از آن استفاده کنید نمای نمایباز کردن قفل موقعیت یابی انعطاف پذیر (زنجیرها ، دستورالعمل ها ، موانع ، نسبت ها ، تعصب) و متحرک با MotionLayout.
- در تالیف کردن. ،
constraintlayout-composeمدل آینه باConstraintLayout. ،createRefs(). ،createGuideline*. ،create*Barrier. ،create*ChainوتDimensionAPI - با این کار بیش از حد از آن استفاده نکنید: پشته های ساده بهتر جریان می یابند
Box/Row/Column(آهنگسازی) یاLinearLayout/ /FrameLayoutحرف
ConstarnLayout چیست؟
constarnlayout یک است ViewGroup (و چیدمان ترکیب) که در آن هر کودک اعلام می کند رابطه– “Edge Edge 16DP از شروع والدین” ، “خط پایه ، با عنوان” ، “بین A و B با 30 ٪ تعصب متمرکز شده است.” این روابط (محدودیت ها) تعیین می کنند موقعیت وت اندازه؛ شما هنگام نگه داشتن یک رابط کاربر پیچیده و پاسخگو دریافت می کنید سلسله مراتب مسطححرف
📚 اسناد:
چرا گوگل آن را ساخت
1) پیچیدگی بدون لانه سازی
عمیقاً جاسازی شده LinearLayout/ /RelativeLayout فکر کردن ساختارها دشوار است و شکستن آن آسان است. constarnlayout می سازد روابط صریح و به صورت محلی: بدون ایجاد مزاحمت در بقیه ، یک محدودیت را ایجاد کنید.
2) بهره وری در مقیاس
هر لایه اضافی در درخت نمای ارزش شما را دارد اندازه گیری/طرح بندی و نامعتبر است درخت مسطح این هزینه ها را کاهش می دهد. والدین کمتری → کمتری خواب دارند → کمتر از جنجال تحت پیمایش/انیمیشن.
خط اصلی
هر کودک در معرض دید لنگر: start. ، end. ، top. ، bottom. ، baselineبه علاوه لنگرهای مرکزی. شما لنگرها را به لنگرهای دیگر یا به والدینs اندازه توسط کنترل می شود رفتار ابعاد:
WRAP_CONTENT: در آغوش محتوا.FIXED: DP دقیق.MATCH_CONSTRAINT(S)0dpدر XML): فضا را پر کنید ، که با محدودیت ها دلالت دارد. می تواند با وزن. ، نسبت. ، حداقل/حداکثرحرف
توابع قدرت
- زنجیر: یک دنباله به صورت افقی/عمودی با سبک ها تراز کنید:
spread. ،spread_inside. ،packedبا وزن مورد - راهنمایی: لنگرهای DP نامرئی یا موقعیت ٪.
- موانع: لبه های پویا تعریف شده توسط دورترین کودک محور.
- تساوی پایه: خطوط پایه متن در اندازه های مختلف قلم مرتب شده اند.
- نسبت و تعصب: نسبت ابعاد مدرن و “تکیه” از یک طرف.
در زیر درب (چگونه در واقع در معرض نمایش قرار می گیرد)
- جمع آوری محدودیت ها در طول
onMeasure()حرف - ترجمه قوانین لنگر و ابعاد در خطی متغیرها (موقعیت ها) و نابرابری ها (حداقل/حداکثر/نسبت/وزن/تعصب).
- تصمیم گیری با Casor -inspired یک راه حل تدریجی که به اولویت ها احترام می گذارد (در برابر محدودیت های نرم).
- محدودیت ها برای هر کودک و حافظه نهان.
- درخواست کردن در
onLayout()؛ بکسل ساده است.
این جدایی – محدودیت های اعلامیه → محدودیت های حل شده – به همین دلیل ویژگی هایی مانند زنجیرها/موانع/نسبت ها تمیز می شوند و چرا MotionLayout می تواند محدودیت های زمانی را احیا کند.
نمونه های عملی XML
1) “سلول رسانه ای” جمع و جور با تصویر ، عنوان/زیرنویس و تأخیر CTA
یادداشت ها:
- با استفاده از تصویر
0dpقد +1:1نسبت برای مربع و عمودی از طریق محدودیت های فوقانی/پایین محور است. Barrierباعث می شود که CTA سازگار شودtitleبسته بندی
2) یک طرح دو کلسیم با درصدی زنجیره ای و بسته بندی شده
3) جریان جریان برای تراشه های پویا (constrantlayout 2.x)
(تراشه های خود را به عنوان فرزندان عادی اضافه کنید ؛ جریان آنها را قرار می دهد.)
یک همکار را گردآوری کنید
اضافه کردن androidx.constraintlayout:constraintlayout-compose و از بدوی های آشنا استفاده کنید:
- زنجیرها:
createHorizontalChain(a, b, chainStyle = ChainStyle.Packed) - دستورالعمل ها:
createGuidelineFromStart(0.35f) - موانع:
createEndBarrier(vararg refs) - MotionLayout (آهنگسازی):
androidx.constraintlayout.compose.MotionLayout
کتاب بازی
- ترجیح دادن مسطح محدودیتی در پشته های عمیق جاسازی شده در صورت نیاز تساوی یک متقاطع یا دو راه روابط (به عنوان مثال “مرکز بین A و B”).
- استفاده کردن
MATCH_CONSTRAINT(S)0dp) + نسبت/مرزها برای جلوگیری از کودکان سنگین بیش از حد. - اجتناب کردن
WRAP_CONTENTبرای ظروف با بسیاری از کودکان با اندازه متغیر ، اگر این امر باعث افزایش اندازه گیری مجدد شود. کلاه باmin/maxیا درون یک والدین محدود بپیچید. - محدودیت ها را حفظ کنید حداقل و مخالف – حل فرآیندها محدودیت های نرم ، اما شما هنوز هم هزینه ابهام را پرداخت می کنید.
- حساب کردن بازرس طرح واد ساختمانهای پروفایل؛ ساعت اندازه/طرح مدت زمان تحت پیمایش/انیمیشن.
خواندن اضافی:
نکات و ابزارهای سلطنت خطا
- در استودیوی اندرویدی: دسته برای محدود کردن ویرایشگر طرح بیش از یک اسباب بازی است – از آنها استفاده کنید تجسم کردن زنجیرها/موانع/دستورالعمل ها و صادرات XML تمیز.
- هشدارهای توجه:
“بدون محدودیت عمودی/افقی”: شما (0.0) یا قرار دادن مبهم دریافت خواهید کرد. حداقل یک حد به هر محور اضافه کنید.
درگیری اندازه + محدودیت ها:wrap_contentباratioبدون0dpهمانطور که انتظار دارید رفتار نخواهید کرد. - سوئیچ های بهینه سازی:
app:layout_optimizationLevelریشه ممکن است میانبرها را حل کند. به طور پیش فرض ترک کنید مگر اینکه تشخیص قرار گیرد (اختصاص دهیدnone) یا بهینه سازی میکرو موارد خاص.
چه موقع استفاده از چه (جدول راه حل)
کتاب مهاجرت: از طراحی ورودی گرفته تا محدودیت ها
- روابط ضمنی را تعیین کنید در طرح ورودی شما (“B 16 DP در سمت راست A” ، “عنوان با پایه CTA تراز شده است”).
- ریشه ای برای محدودیت ایجاد کنید وت لنگرهای خود را نام ببرید (S)
@id/title. ،@id/cta). - بندر نمای جایگزین لانه والدین – شروع/پایان/بالا/پایین پیوندها
- استفاده کردن راهنمایی برای ستون ها/ردیف ها قبل از نزدیک شدن به پدها/وزنه ها.
- مسافت ad-hoc را با آن جایگزین کنید زنجیر وت تعصب برای توزیع مقاوم تر.
- کوشش (تلفن های کوچک ، قرص های بزرگ ، چشم انداز) و تنظیم با استفاده از ٪ راهنمایی و حداقل/حداکثر.
مشکلات رایج (و تعمیرات)
- استفاده کردن
match_parentمحدودیت داخلی
→ ترجیح دهید0dp(S)MATCH_CONSTRAINT) با محدودیت های متضاد برای ترک اندازه قاطع. - فراموش کردن یک محور
→ هر نمای حداقل به یک محدودیت افقی و یک محدودیت عمودی نیاز دارد. - ساخت و ساز بیش از حد با DP دقیق در همه جا
→ منجر به چیدمان های شکننده می شود. استفاده کردن تعصب. ، نسبت. ، راهنماییوت وزنحرف - با فرض موانع ایستا است
→ آنها از دیدگاههای مرجع محاسبه می کنند. برای محتوای پویا عالی است ، اما در مورد چرخه ها مراقب باشید. - انیمیشن از طریق انیماتورهای دارایی
→ برای انیمیشن که توسط محدودیت ها مدیریت می شود ، حرکت بسیار ساده تر و سالم تر است.
MotionLayout: محدودیت هایی که حرکت می کنند
Animlayout (بخشی از همان کتابخانه) انیمیشن ها بین مجموعه محدودیت ها با انتقال اعلامی و فریم های کلیدی. به جای اینکه چند برابر شود ObjectAnimators ، شما تعیین می کنید حالت های شروع/پایان و موتور موقعیت ها ، اندازه ها و ویژگی های شخصی را درون یابی می کند. در آهنگسازی ، دسترسی به MotionLayout در constraintlayout-composeحرف
مرجع
اسناد رسمی
منبع و مشکلات
شیرجه و درس های عمیق
دروس اضافی و آغازگرها:
انتساب: در این مقاله مفاهیم اسناد توسعه دهنده اندرویدی ، وبلاگ توسعه دهندگان اندرویدی ، دروس جامعه و منابع منبع باز ، ذکر شده در بالا ، سنتز می شود. این اتصالات برای یک مطالعه عمیق تر به مواد اصلی اشاره می کنند.
رها کردن قطعات (کپی/ماکارونی آماده)
پوستر نسبت با یک تصویر کامل بسته شده توسط حداقل. قد
زنجیره افقی با وزن
دستورالعمل ها + زنجیره
مشورت
بازدید کنید تا محدود کنید رابطه مهمتر از لانهS مدل رابط کاربری به عنوان یک مجموعه کوچک از متغیر: تراز ، نسبت ها و مرزها. راه حل باعث می شود حسابداری برای شما حساب کند – بنابراین با توسعه طرح ها ، تغییر کپی و دستگاه ها از تلفن تا تاشو به تلویزیون ها ، طرح شما پایدار می ماند.
اگر می خواهید ، می توانم مثالهای بالا را در یک برنامه مثال کوچک (نمایش + آهنگسازی + MotionLayout) با شاخص ها و readme بسته بندی کنم که می توانید به GitHub وارد شوید.
