Auto Layout হলো কনস্ট্রেইন্ট-ভিত্তিক লেআউট সিস্টেম যা iOS ডিভাইসের ইউজার ইন্টারফেস ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। এই কনস্ট্রেইন্ট-ভিত্তিক লেআউট সিস্টেমকে Auto Layout নামে জানা যায় যা মূলত একটি অ্যাডাপ্টিভ UI যা ভিন্ন স্ক্রিন সাইজ এবং ওরিয়েন্টেশনের সাথে খাপ খায়।
Auto Layout সম্পূর্ণরূপে কনস্ট্রেইন্টের ওপর নির্ভরশীল যেখানে ডেভেলপার প্রতিবেশী বা প্যারেন্ট এলিমেন্টের সাথে সম্পর্ক ডিফাইন করে এর পজিশন নির্ধারণ করে।
কেন Auto Layout?
iOS অ্যাপ্লিকেশন ডিজাইন করার সময় নিশ্চিত করতে হয় যে আপনি যে UI ডেভেলপ করছেন সেটি সব স্ক্রিন সাইজ এবং ওরিয়েন্টেশনের সাথে কম্প্যাটিবল। Auto Layout তখন খুব কাজে আসে।
নিচের ছবিগুলো দেখুন। iPhone 6-এ সেন্ট্রালি রাখা একটি বাটন অন্য ডিভাইসে সেন্ট্রালি অ্যালাইন হয় না, কারণ ভিন্ন iOS ডিভাইসের ডাইমেনশন ভিন্ন। এই পোস্টে আমরা কনস্ট্রেইন্টের ওপর ফোকাস করব, ডাইমেনশন সম্পর্কে আরো জানতে চাইলে https://iosres.com/ চেক করুন।
UI ডেভেলপমেন্ট যেন সব ডিভাইস এবং ওরিয়েন্টেশনে একসমান থাকে, সেজন্য Auto Layout ব্যবহার করব। চলুন শুরু করি।
Step 1 − Xcode → New Project → Single View Application → নাম দিন "AutoLayout"
Step 2 − Main.storyboard খুলুন, একটি বাটন যোগ করুন, রেফারেন্স হিসেবে ডিভাইস iPhone 7Plus সিলেক্ট করুন।
এখানে আপনি দেখছেন একটি বাটন র্যান্ডম paikানে কোনো কনস্ট্রেইন্ট ছাড়া। আমাদের লক্ষ্য এই বাটনকে সেন্টারে রাখা এবং সব ডিভাইস ও ওরিয়েন্টেশনের সাথে কম্প্যাটিবল করা। Step 3-এ যাওয়ার আগে বুঝি নেয়া যাক আপনি কী করবেন এবং কীভাবে অর্জন করবেন।
Xcode Auto Layout কনস্ট্রেইন্ট ডিফাইন করার দুটি উপায় দেয়: Auto Layout bar এবং Control-drag। আমরা অধিকাংশ সময় Auto Layout bar ব্যবহার করব এবং এই ব্লগেও, কিন্তু Control-drag কিভাবে ব্যবহার করা যায় সেটাও বলব। আপনার Xcode-এ Interface Builder-এর নিচে ডান কোণে ৫টি বাটন থাকতে পারে, এগুলো Layout buttons নামে জানা যায় যেগুলো কনস্ট্রেইন্ট ডিফাইন করতে ব্যবহৃত হয়।
এখন Auto Layout bar ব্যবহার করে বাটনগুলোর কনস্ট্রেইন্ট দেব।
সম্পূর্ণ কনস্ট্রেইন্ট সিস্টেম ৪টি প্যারামিটার (leading, trailing, top, bottom) এবং height, width, vertical ও horizontal centers এর ওপর কাজ করে।
Step 3 − বাটনে ক্লিক করুন এবং Align ট্যাপ করুন, Horizontally and Vertically in container ইনেবল করুন।
দুটি কনস্ট্রেইন্ট যোগ করার পর আপনার বাটন স্ক্রিনের সেন্টারে অ্যালাইন হয়ে যাবে।
বিকল্পভাবে Control-drag ফিচারও ব্যবহার করতে পারেন, নিচের ছবিতে দেখানো হয়েছে: UI কম্পোনেন্ট সিলেক্ট করুন, Control বাটন ধরে ড্র্যাগ করে কনস্ট্রেইন্ট দিন, Center Horizontally এবং Vertically দিন।
Step 4 − এখন বাটনের width এবং height ডিফাইন করুন। Add new constraint অপশন সিলেক্ট করুন এবং height ও width যোগ করুন।
বিকল্পভাবে, যদি Horizontally এবং Vertically in container দিতে না চান, তবে leading constraint, trailing constraint, top margin এবং bottom margin দিতে পারেন।
Step 5 − আমরা সব প্রয়োজনীয় কনস্ট্রেইন্ট দিয়েছি, আমাদের সবসময় মনে রাখতে হবে ৪টি এজ, X-axis-এ অ্যালাইন, Y-axis-এ অ্যালাইন, width এবং height — এইগুলো দিয়ে UI কম্পোনেন্টকে ফিক্স করতে হয়।
এখন বিভিন্ন ডিভাইসে রান করে ফলাফল দেখি। আমরা বিভিন্ন ডিভাইস এবং ওরিয়েন্টেশনে রান করব।
আপনি কনস্ট্রেইন্ট এডিটও করতে পারেন, যদি মডিফাই বা রিমুভ করতে চান, Utility area-র ডান প্যানেলে ৫ নম্বর অপশন সিলেক্ট করে নিচে স্ক্রোল করুন।
এই টিউটোরিয়ালটি Auto Layout এবং কনস্ট্রেইন্ট ব্যবহার করে অ্যাডাপ্টিভ UI ডেভেলপমেন্টের সংক্ষিপ্ত ধারণা দিতে চেয়েছিল। আপনি উপরের বেসিক কনসেপ্ট ব্যবহার করে একাধিক কম্পোনেন্টে ট্রাই করতে পারেন।
