Custom UIView: یہ کیا ہے، تخلیق اور drawRect کو اووررائڈ کرنا

Custom UIView کیا ہے اور کب ضرورت ہے

Custom UIView ایک صارف کی وضاحت کردہ کلاس ہے جو UIView سے وراثت پاتی ہے، جس میں ڈویلپر کسٹم ڈسپلے اور تعامل کی منطق کو نافذ کرنے کے لیے معیاری طریقوں کو اووررائڈ کرتا ہے۔ UIKit میں بہت سے بلٹ ان اجزاء شامل ہیں، لیکن وہ تمام منظرناموں کا احاطہ نہیں کرتے: متحرک چارٹس، کسٹم سوئچز، آزادانہ ڈرائنگ کینوس، گیم عناصر یا ڈیٹا ویژولائزیشن کے لیے کسٹم نفاذ کی ضرورت ہوتی ہے۔

Apple کسٹم UIView بنانے کی سفارش کرتا ہے جب معیاری اجزاء مطلوبہ فعالیت فراہم نہیں کر سکتے یا جب ایک ہی کسٹم عنصر ایپلیکیشن میں متعدد جگہوں پر استعمال ہوتا ہے۔ WWDC 2024 کے مطابق، درمیانے درجے کے پروجیکٹ میں کسٹم ویوز تمام UIView کا اوسطاً 15-20% تشکیل دیتے ہیں۔

عام استعمال کے معاملات

کسٹم UIView چارٹس اور ڈایاگرام بنانے (Core Graphics کے ساتھ لکیریں اور شکلیں کھینچنا)، کسٹم پیشرفت اشارے، متحرک پس منظر، انگلی سے ڈرائنگ عناصر اور ریئل ٹائم ڈیٹا ویژولائزیشن کے لیے استعمال ہوتا ہے۔ ان میں سے ہر ایک صورت میں، ڈویلپر کو CGContext تک مکمل رسائی ملتی ہے اور وہ کوئی بھی جیومیٹری کھینچ سکتا ہے۔

جب Custom UIView کی ضرورت نہیں

اگر کسی عنصر کو معیاری UIKit اجزاء (UIButton، UIImageView، UILabel) سے Auto Layout اور خصوصیات کی ترتیب کے ساتھ جمع کیا جا سکتا ہے، تو UIView کا ذیلی طبقہ بنانا ضرورت سے زیادہ ہے۔ Apple پہلے تیار ویوز کی ترکیب آزمانے اور صرف فعالیت ناکافی ہونے پر کسٹم ڈرائنگ پر جانے کی سفارش کرتا ہے۔

Xcode میں Custom UIView کیسے بنائیں

کسٹم UIView بنانا UIView سے وراثت پانے والی کلاس کے اعلان اور لازمی ابتدا کاروں کو نافذ کرنے سے شروع ہوتا ہے۔ کم سے کم نفاذ میں کوڈ سے تخلیق کے لیے init(frame:) اور Storyboard یا XIB سے لوڈ کرنے کے لیے init(coder:) شامل ہے۔

import UIKit

class CircleView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    private func setupView() {
        backgroundColor = .clear
        setupLayerProperties()
    }

    private func setupLayerProperties() {
        layer.cornerRadius = bounds.width / 2
        layer.masksToBounds = true
    }
}

setupView() طریقہ میں ابتدائی خصوصیات مرتب کی جاتی ہیں: شفاف پس منظر، تہہ کی ترتیبات۔ اگر ویو Interface Builder میں ظاہر کیا جائے گا، تو لائیو پیش نظارہ کے لیے @IBDesignable اور @IBInspectable شامل کرنا مفید ہے۔

UIView کے زندگی کے دورانیے کے طریقے

Custom UIView کو سسٹم کے ذریعے زندگی کے دورانیے کے طریقوں کی ایک ترتیب کے ذریعے منظم کیا جاتا ہے جو ایک مخصوص ترتیب میں کال کیے جاتے ہیں۔ اس چکر کو سمجھنا ویو کی درست ترتیب اور ڈرائنگ کے لیے انتہائی اہم ہے۔

تمام طریقے سسٹم کے ذریعے خودکار طور پر کال کیے جاتے ہیں، اور ڈویلپر کو انہیں دستی طور پر کال کرنے کی ضرورت نہیں۔ استثنا setNeedsDisplay() ہے، جو سسٹم کو draw(_:) دوبارہ کال کرنے کا اشارہ دیتا ہے۔

ڈرائنگ کے لیے draw(_:) کو اووررائڈ کرنا

draw(_:) Custom UIView میں کسٹم ڈرائنگ کے لیے کلیدی طریقہ ہے۔ اس کے اندر، ڈویلپر کو CGContext (گرافکس سیاق و سباق) تک رسائی ملتی ہے اور وہ Core Graphics کا استعمال کرتے ہوئے لکیریں، شکلیں، متن اور تصاویر کھینچ سکتا ہے۔

سسٹم خودکار طور پر draw(_:) کو کال کرتا ہے جب ویو پہلی بار اسکرین پر ظاہر ہوتا ہے۔ بعد میں کال setNeedsDisplay() کے ذریعے شروع کی جاتی ہے، جو ویو کو دوبارہ ڈرائنگ کی ضرورت کے طور پر نشان زد کرتا ہے۔ اہم: draw(_:) کو براہ راست کال نہ کریں — یہ کیشنگ میکانزم کو توڑتا ہے اور کارکردگی کو کم کرتا ہے۔

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }

    // پس منظر بھرنا
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

    // دائرہ کھینچنا
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(4.0)
    let circleRect = rect.insetBy(dx: 20, dy: 20)
    context.strokeEllipse(in: circleRect)
}

اس مثال میں، draw(_:) پس منظر کو نیلے رنگ سے بھرتا ہے اور کناروں سے 20 پکسلز کے فاصلے پر ایک سفید دائرہ کھینچتا ہے۔ draw(_:) کی ہر کال یکساں نتیجہ خیز ہونی چاہیے — ایک جیسے پیرامیٹرز کے ساتھ متعدد کالوں کو ایک ہی نتیجہ دینا چاہیے۔

مؤثر draw(_:) کے قواعد

Apple draw(_:) کے اندر کام کو کم سے کم کرنے کی سفارش کرتا ہے — UIBezierPath پہلے سے بنائیں، تصاویر کو کیش کریں اور بھاری حسابات انجام نہ دیں۔ اگر ویو جامد ہے، تو مسلسل دوبارہ ڈرائنگ کے بجائے رینڈر شدہ تصویر کے ساتھ UIImageView استعمال کرنے پر غور کریں۔

CALayer بمقابلہ draw(_:): کس کا انتخاب کریں

CALayer بنیادی تہہ ہے جو UIView کے بصری مواد کو منظم کرتی ہے۔ کسٹم ڈرائنگ کے بہت سے کاموں کو draw(_:) کو اووررائڈ کیے بغیر CALayer کی خصوصیات ترتیب دے کر حل کیا جا سکتا ہے، جو نمایاں طور پر زیادہ موثر ہے۔

Apple Engineering (2024) کے مطابق، CALayer سطح پر کارروائیاں GPU پر چلتی ہیں، جبکہ draw(_:) CPU پر مبنی Core Graphics رینڈرنگ کے ذریعے کام کرتا ہے۔ اینیمیشن اور ہموار منتقلی کے لیے CALayer اور CABasicAnimation استعمال کرنا ترجیح ہے۔

اینیمیشن کے ساتھ ویکٹر شکلیں کھینچنے کے لیے CAShapeLayer استعمال کریں — یہ ہارڈویئر سے تیز ہے اور draw(_:) کال کیے بغیر path، strokeStart اور strokeEnd اینیمیشن کو سپورٹ کرتا ہے۔

Custom UIView کی کارکردگی کی اصلاح

Custom UIView کی کارکردگی براہ راست اینیمیشن کی ہمواری اور مجموعی صارف تجربہ کو متاثر کرتی ہے۔ اہم مسائل draw(_:) کی ضرورت سے زیادہ کالز، ذیلی ویوز کی غیر موزوں ترتیب اور کیشنگ کی کمی سے پیدا ہوتے ہیں۔

غیر ضروری دوبارہ ڈرائنگ سے بچیں

setNeedsDisplay() کی ہر کال ویو کی مکمل دوبارہ ڈرائنگ کو متحرک کرتی ہے۔ اگر تبدیلیوں نے ویو کے صرف ایک حصے کو متاثر کیا ہے تو مخصوص مستطیل کے ساتھ setNeedsDisplay(_:) استعمال کریں۔ CALayer خصوصیات (backgroundColor، cornerRadius، shadow) کے لیے دوبارہ ڈرائنگ کی ضرورت نہیں — یہ GPU سطح پر اپ ڈیٹ ہوتی ہیں۔

رینڈر شدہ مواد کو کیش کرنا

اگر Custom UIView کا مواد شاذ و نادر ہی تبدیل ہوتا ہے، تو اسے UIGraphicsImageRenderer میں ایک بار رینڈر کریں اور UIImage کے طور پر محفوظ کریں۔ اگلی دوبارہ ڈرائنگ پر، کیش شدہ تصویر دکھانے کے لیے draw(at:) استعمال کریں — یہ Core Graphics کے ذریعے دوبارہ رینڈر کرنے سے دسیوں گنا تیز ہے۔

func renderToImage() -> UIImage {
    let renderer = UIGraphicsImageRenderer(size: bounds.size)
    return renderer.image { ctx in
        drawHierarchy(in: bounds, afterScreenUpdates: true)
    }
}

جامد تہوں کے لیے shouldRasterize استعمال کریں

CALayer پر shouldRasterize خاصیت تہہ کے بِٹ میپ نمائندگی کی کیشنگ کو فعال کرتی ہے۔ شفافیت اور سایوں والی جامد ویوز کے لیے اسے فعال کریں — یہ کمپوزٹنگ بوجھ کو کم کرتا ہے۔ متحرک ویوز کے لیے اسے غیر فعال کریں: ہر تبدیلی پر کیش ری سیٹ ہو جاتا ہے، اور راسٹرائزیشن صرف کارکردگی کو خراب کرتی ہے۔