Auto Layout: یہ کیا ہے، انکولی iOS انٹرفیس لے آؤٹ

Auto Layout کیا ہے؟

Auto Layout Apple کا انکولی لے آؤٹ نظام ہے جو UI عناصر کو پوزیشن دینے کے لیے ریاضیاتی رکاوٹیں (constraints) استعمال کرتا ہے۔ فریم پر مبنی لے آؤٹ (frame-based layout) کے برعکس، جہاں ہر عنصر کے مقررہ نقاط x, y, width, height ہوتے ہیں، Auto Layout عناصر کے درمیان تعلقات کو بیان کرتا ہے: «بٹن والد کے دائیں کنارے سے 8pt دور ہے» یا «ٹیکسٹ فیلڈ کی چوڑائی اسکرین کی آدھی چوڑائی کے برابر ہے»۔ یہ طریقہ کار Cassowary الگورتھم پر مبنی ہے، جو University of Washington (Greg J. Badros, 1999) میں تیار کیا گیا اور Apple نے iOS 6 میں نافذ کیا۔ Cassowary ترجیحات — Required (1000), Default High (750), Default Low (250) — کے ساتھ لکیری عدم مساوات کے نظام کو حل کرتا ہے، جس سے رکاوٹ کے تصادم کا انتظام ممکن ہوتا ہے۔ Auto Layout تین سائز کی اقسام کو سپورٹ کرتا ہے: intrinsic (مواد کے ذریعے متعین عنصر کا قدرتی سائز)، explicit (واضح طور پر متعین رکاوٹ) اور compressible/stretchable (Content Hugging Priority اور Compression Resistance Priority کے ذریعے لچکدار موڈ)۔

Intrinsic Content Size اور ترجیحات

Auto Layout میں ہر UI عنصر کا Intrinsic Content Size ہوتا ہے — اس کے مواد سے متعین قدرتی سائز۔ UILabel کے لیے یہ متن اور فونٹ پر منحصر ہے، UIImageView کے لیے — تصویر کے طول و عرض پر۔ Content Hugging Priority (کھنچاؤ کے خلاف مزاحمت) اور Compression Resistance Priority (دباؤ کے خلاف مزاحمت) دستیاب جگہ تبدیل ہونے پر عنصر کے رویے کو کنٹرول کرتی ہیں۔ معیاری قدریں: hugging کے لیے 251 اور compression resistance کے لیے 749۔ اگر دو عناصر جگہ کے لیے مقابلہ کریں تو ترجیح یہ طے کرتی ہے کہ کون سا پہلے کھنچے گا۔ ان ترجیحات کو سمجھنا Ambiguous Layout (مبہم لے آؤٹ) کو حل کرنے کی کلید ہے، جسے Xcode ڈیبگر میں نمایاں کرتا ہے۔

Constraint کی ساخت

ایک constraint مساوات سے بیان کیا جاتا ہے: view1.attribute = multiplier × view2.attribute + constant۔ صفات میں leading، trailing، top، bottom، centerX، centerY، width، height، firstBaseline، lastBaseline شامل ہیں۔ Multiplier تناسبی تعلقات کے لیے استعمال ہوتا ہے (view1 کی چوڑائی = 0.5 × superview کی چوڑائی)۔ Constant ایک مقررہ آفسیٹ سیٹ کرتا ہے (leading = superview.leading + 16)۔ Interface Builder کے اوزار Ctrl-ڈریگ کے ذریعے بصری طور پر constraints بنانے کی اجازت دیتے ہیں، لیکن پیچیدہ لے آؤٹ کے لیے NSLayoutConstraint یا VFL (Visual Format Language) کے ذریعے پروگرامیٹک تخلیق کی ضرورت ہوتی ہے، جسے Apple iOS 9 سے NSLayoutConstraint سے تبدیل کرنے کی سفارش کرتا ہے۔

iOS میں Constraints کیسے کام کرتے ہیں

constraints کا نظام ایک لکیری پروگرامنگ مسئلہ کے طور پر حل ہوتا ہے: Cassowary الگورتھم ان کی ترجیحات کو مدنظر رکھتے ہوئے تمام رکاوٹوں کو پورا کرنے والے تمام عناصر کی بہترین ترتیب تلاش کرتا ہے۔ اگر constraints ایک دوسرے سے متصادم ہوں تو Unsatisfiable Layout پیدا ہوتا ہے — ایک استثناء جسے Xcode تفصیلی تصادم کی وضاحت کے ساتھ لاگ کرتا ہے۔ اگر کم از کم ایک عنصر کی پوزیشن متعین کرنے کے لیے ناکافی constraints ہوں تو Ambiguous Layout پیدا ہوتا ہے — عناصر صوابدیدی مقامات پر ظاہر ہوتے ہیں۔ Apple ایک کم از کم سیٹ تجویز کرتا ہے: ہر عنصر کے لیے position (x, y) اور size (width, height) واضح طور پر یا intrinsic content size کے ذریعے متعین ہونا چاہیے۔ Constraints فرسٹ کلاس ہو سکتے ہیں: لیڈنگ عنصر (مثلاً superview) اور فالو کرنے والا (چائلڈ ویو) ایک درجہ بندی بناتے ہیں۔

Cassowary الگورتھم اور ترجیحات

Cassowary لکیری عدم مساوات کے نظام کو حل کرنے کے لیے Sequential Quadratic Programming طریقہ استعمال کرتا ہے۔ ہر constraint کی 1 سے 1000 تک ترجیح ہوتی ہے۔ Required (1000) ایک لازمی رکاوٹ ہے؛ اگر اسے پورا نہ کیا جا سکے تو ایپ NSConstraintException کے ساتھ کریش ہو جاتی ہے۔ Default High (750) تجویز کردہ ہے؛ Default Low (250) سب سے کم اہم ہے۔ تصادم کے دوران، Cassowary کم ترجیح والی رکاوٹوں کو ڈھیلا کرتا ہے۔ مثال کے طور پر، اگر دو عناصر کو مقررہ چوڑائی درکار ہو لیکن اسکرین بہت تنگ ہو تو کم ترجیح والے constraint کو ڈھیلا کیا جاتا ہے۔ Xcode Debug View Hierarchy (Xcode 6 سے دستیاب ڈیبگنگ ٹول) میں صرف Required constraints کے مسائل نمایاں ہوتے ہیں — باقی بغیر غلطی کے سنبھالے جاتے ہیں۔

UIStackView: خودکار Constraints کا انتظام

UIStackView ایک کنٹینر ہے جو iOS 9 (2015) میں متعارف کرایا گیا، خود بخود nested arrangedSubviews کے لیے constraints بناتا اور ان کا انتظام کرتا ہے۔ UIStackView دو محوروں کو سپورٹ کرتا ہے: افقی اور عمودی۔ distribution کی ترتیبات جگہ کی تقسیم کا تعین کرتی ہیں: fill (hugging priority کے مطابق تناسبی بھرائی)، fillEqually (برابر سائز)، fillProportionally (intrinsic content size کے تناسب سے)، equalSpacing (برابر وقفہ)، equalCentering (مراکز کے درمیان برابر فاصلہ)۔ Alignment کراس ایکسس سیدھ کی وضاحت کرتا ہے: fill، leading، center، trailing (افقی کے لیے) یا fill، top، center، bottom (عمودی کے لیے)۔ UIStackView خود بخود وقفہ، بیس لائن سیدھ اور Dynamic Type موافقت کا انتظام کرتا ہے۔

import UIKit

class StackViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let stack = UIStackView()
        stack.axis = NSLayoutConstraint.Axis.vertical
        stack.distribution = .fillEqually
        stack.spacing = 8
        stack.translatesAutoresizingMaskIntoConstraints = false
        
        let label = UILabel()
        label.text = "Auto Layout Guide"
        label.font = UIFont.preferredFont(forTextStyle: .headline)
        
        let button = UIButton(type: .system)
        button.setTitle("Apply", for: .normal)
        
        stack.addArrangedSubview(label)
        stack.addArrangedSubview(button)
        view.addSubview(stack)
        
        NSLayoutConstraint.activate([
            stack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            stack.leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor, constant: 16),
            stack.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor, constant: -16)
        ])
    }
}

کوڈ دو عناصر (UILabel اور UIButton) کے ساتھ ایک عمودی UIStackView بناتا ہے، 8pt کے وقفے کے ساتھ یکساں طور پر تقسیم (fillEqually)۔ Stack کناروں سے کم از کم 16pt کے مارجن کے ساتھ اسکرین پر مرکوز ہے۔ translatesAutoresizingMaskIntoConstraints = false پروگرامیٹک طور پر constraints بناتے وقت لازمی ہے — اس کے بغیر Auto Layout کام نہیں کرتا۔ IT Sectr میں، UIStackView iOS پروجیکٹ اسکرینوں کے 80% میں انکولی فارم، ترتیبات کی فہرستیں اور کارڈ بنانے کے لیے استعمال ہوتا ہے۔

Nested Stack Views

UIStackView کو nested کیا جا سکتا ہے: ایک عمودی stack کے اندر افقی stack پیچیدہ لے آؤٹ کے لیے ایک معیاری پیٹرن ہے۔ بیرونی stack قطاروں کا انتظام کرتا ہے، اندرونی stack ہر قطار کے اندر کالموں کا انتظام کرتا ہے۔ ہر سطح پر axis، alignment اور distribution کا امتزاج ایک بھی دستی constraint کے بغیر عملاً لامحدود لچک فراہم کرتا ہے۔ Apple UIKit میں UIStackView کو بنیادی لے آؤٹ ٹول کے طور پر تجویز کرتا ہے، صرف ان صورتوں کے لیے دستی NSLayoutConstraint کا سہارا لیتا ہے جو stack کے ذریعے احاطہ نہیں کیے جاتے: اوورلیپنگ ویوز، درست پکسل پوزیشننگ، کسٹم bounds اینیمیشن۔

NSLayoutConstraint: پروگرامیٹک طور پر رکاوٹیں بنانا

NSLayoutConstraint کوڈ میں انفرادی رکاوٹیں بنانے کے لیے ایک پروگرامیٹک API ہے۔ ہر constraint پیرامیٹرز کے ساتھ ایک انیشیالائزر کے ذریعے بنایا جاتا ہے: item، attribute، relatedBy، toItem، attribute، multiplier، constant۔ iOS 9 سے، Apple نے Anchor API متعارف کرایا — view.leadingAnchor، view.trailingAnchor، view.topAnchor، view.bottomAnchor، view.centerXAnchor، view.centerYAnchor، view.widthAnchor، view.heightAnchor خصوصیات کے ذریعے زیادہ پڑھنے کے قابل نحو۔ Anchor API خود بخود relatedBy = .equal سیٹ کرتا ہے اور Anchors سے First Item/Second Item استعمال کرتا ہے، جو کلاسک NSLayoutConstraint کے مقابلے میں کوڈ کو 40% کم کرتا ہے۔

import UIKit

class ConstraintViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let childView = UIView()
        childView.backgroundColor = .systemBlue
        childView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(childView)
        
        NSLayoutConstraint.activate([
            childView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 24),
            childView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
            childView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
            childView.heightAnchor.constraint(equalToConstant: 120),
            childView.bottomAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor, constant: -24)
        ])
    }
}

کوڈ childView کو safeAreaLayoutGuide (top) اور اسکرین کے کناروں (leading/trailing) سے مارجن کے ساتھ پوزیشن کرتا ہے۔ bottom کے لیے lessThanOrEqualTo اس بات کو یقینی بناتا ہے کہ ویو نچلی حد سے تجاوز نہ کرے۔ Anchor API کمپائل ٹائم پر ایک استثناء پھینکتا ہے اگر anchors غیر مطابقت رکھتے ہوں (مثلاً، leadingAnchor کو rightAnchor کے ساتھ ملانا)، رن ٹائم غلطیوں کو روکتا ہے۔ Apple iOS 9 سے پروگرامیٹک Auto Layout کے لیے Anchor API کو معیار کے طور پر تجویز کرتا ہے۔

Auto Layout میں Safe Area اور Layout Margins

Safe Area اسکرین کا وہ حصہ ہے جو سسٹم عناصر — Dynamic Island، Notch، Status Bar، Home Indicator، گول کونوں سے ڈھکا نہیں ہوتا۔ iOS 11 میں، Apple نے topLayoutGuide/bottomLayoutGuide کو safeAreaLayoutGuide سے بدل دیا، جو خود بخود ڈیوائس کی سمت اور اسکرین کٹ آؤٹ کی موجودگی کے مطابق ڈھل جاتا ہے۔ Layout Margins ویو کے ڈیفالٹ اندرونی مارجن ہیں (iOS پر 16pt، iPadOS پر 20pt)۔ UILayoutGuide کے لیے آپ RIGHT-TO-LEFT لوکلائزیشن کو مدنظر رکھتے ہوئے کسٹم directionalLayoutMargins سیٹ کر سکتے ہیں۔ Auto Layout anchors میں safeAreaLayoutGuide استعمال کرتے وقت خود بخود safe area کا احترام کرتا ہے۔

Dynamic Island اور Notch کے لیے موافقت

Dynamic Island (iPhone 14 Pro اور نئے) اور Notch (iPhone X–13) والے آلات پر Safe Area پورٹریٹ میں اوپر 44pt (فعال حالت میں Dynamic Island کے ساتھ 59pt) خارج کرتا ہے۔ Home Indicator نیچے 34pt کا اضافہ کرتا ہے۔ درست موافقت کے لیے، تمام اوپری constraints کو safeAreaLayoutGuide.topAnchor سے منسلک ہونا چاہیے، view.topAnchor سے نہیں۔ نچلے constraints کو safeAreaLayoutGuide.bottomAnchor یا Home Indicator کے لیے مارجن کے ساتھ view.bottomAnchor سے منسلک ہونا چاہیے۔ IT Sectr میں، ہم تمام اسکرینوں کو iPhone SE (2022)، iPhone 14 Pro Max اور iPad Pro 12.9″ سمیلیٹر پر ٹیسٹ کرتے ہیں — تین آلات جو تمام safe area کی مختلف حالتوں کو کور کرتے ہیں۔

عام Auto Layout غلطیاں

Auto Layout کے ساتھ کام کرتے وقت سب سے عام غلطیاں: بھولا ہوا translatesAutoresizingMaskIntoConstraints = false، متصادم Required constraints (ترجیح 1000)، Ambiguous Layout (پوزیشن متعین کرنے کے لیے ناکافی constraints)، کثیر سطری UILabel کے لیے غلط Content Hugging Priority، اور leading/trailing کو left/right anchors کے ساتھ ملانا۔ Xcode 15+ Runtime Issue Navigator میں لے آؤٹ کے مسائل دکھاتا ہے اور خودکار اصلاحات پیش کرتا ہے۔ پیچیدہ لے آؤٹ کے لیے Debug View Hierarchy استعمال کریں: پیلے نشانات ambiguous layout کی نشاندہی کرتے ہیں، سرخ نشانات unsatisfiable کی نشاندہی کرتے ہیں۔