একটা Frame resize করুন আর তার ভেতরের প্রতিটা child-কে জানতে হবে কী করতে হবে — জায়গায় থাকা, stretch করা, বা সরে যাওয়া। Constraints হলো সেই setting যা এটা ঠিক করে, প্রতি layer-এ, প্রতি axis-এ (horizontal আর vertical আলাদাভাবে সেট করা হয়)।
| Constraint | Frame resize হলে আচরণ |
|---|---|
| Left / Right / Top / Bottom | সেই একটা প্রান্ত থেকে একটা fixed দূরত্ব বজায় রাখে; layer resize হয় না |
| Left + Right (বা Top + Bottom) | দুই প্রান্তই pin করে — বাড়তে/কমতে থাকা জায়গা পূরণ করতে layer stretch হয় |
| Center | layer-কে center-এ রাখে, মধ্যবিন্দু থেকে একটা fixed দূরত্বে |
| Scale | Frame নিজে resize হওয়ার সমানুপাতে layer resize হয় |
বামে একটা logo আর stretch হওয়া উচিত এমন একটা search box সহ একটা header bar: logo একটা Left constraint পায় (জায়গায় থাকে), আর search box Left + Right পায় (header-এর সাথে বাড়ে-কমে)। এটা ভুল করলে হয় search box চিরকালের জন্য একটা fixed width থেকে যায়, নয়তো screen resize হওয়ার সাথে logo প্রান্ত থেকে সরে যেতে থাকে।
Constraints আর Auto Layout একই সমস্যা ভিন্ন দিক থেকে সমাধান করে। Constraints উত্তর দেয় "এই Frame resize হলে কী হবে" তার ভেতরে স্বাধীনভাবে বসানো child-দের জন্য — একটা নির্দিষ্ট fixed-size screen-এর জন্য useful, যেমন একটা নির্দিষ্ট device mockup। Auto Layout (এই কোর্সে আগে কভার করা) সক্রিয়ভাবে child-দের একটা পুরো group-কে তাদের content অনুযায়ী সাজায় আর resize করে। আসল file দুটোই ব্যবহার করে: যে অংশগুলো flow করা উচিত তার জন্য Auto Layout, যে অংশগুলো শুধু জায়গায় pin থাকা উচিত তার জন্য Constraints।
parent Frame select করুন আর হাতে তার একটা resize handle drag করুন — প্রতিটা child-এর constraint আচরণ canvas-এ সরাসরি দেখা যায়, কোনো prototype বা preview লাগে না। একটা ভুল constraint আসল bug হওয়ার আগে ধরার এটাই সবচেয়ে দ্রুত উপায়।