كيفية تصور xibs قابلة لإعادة الاستخدام في القصص المصورة باستخدام IBDesignable

في Zenchef نستخدم لوحات العمل لتصميم وحدات تحكم العرض والحصول على نظرة عامة على التنقل في التطبيق.

ومع ذلك ، فإن القصص المصورة ليست رائعة للمشاهدات التي تريد استخدامها عدة مرات. على سبيل المثال ، قد ترغب في استخدام طريقة عرض معقدة في UIViewController أو في UITableViewCell أو في UICollectionViewCell.

لتجنب تصميم وجهة نظرك في كل مرة ، عادة ما يكون لديك حلان

1. تصميم وجهة نظرك برمجيا

وبهذه الطريقة يمكنك جعل العرض IBDesignable الخاص بك ومن خلال تطبيق preparForInterfaceBuilder ، سترى النتيجة في لوحات العمل النصية الخاصة بك عند تضمين طريقة العرض هذه.

إنه أمر سهل ورائع عندما تنفذ طريقة عرضك DrawRect باستخدام CoreGraphics.

ولكن بمجرد حصولك على العديد من العروض الفرعية ، يصبح هذا غير عملي. يمكن أن تكون القيود المفروضة على الترميز التلقائي مؤلمة ، كما أن فئة الحجم أكثر. Interface Builder قوي ونريد استخدامه قدر الإمكان.

2. تصميم وجهة نظرك في Xib

وبهذه الطريقة ، يمكنك الاستمتاع بجميع ميزات Interface Builder للتخطيط التلقائي وفئة الحجم وجمع السمات مع الحفاظ على طريقة العرض قابلة لإعادة الاستخدام.

ومع ذلك ، في كل مرة تحتاج إليها ، يجب عليك تحميل xib وإضافة العرض إلى التسلسل الهرمي للعرض الخاص بك برمجيًا. أيضًا ، لا يمكنك الاستفادة من العروض المباشرة (المقدمة في Xcode 6). لن تصوّر xib الخاص بك في القصص المصورة لأن جميع IBOutlet في هذه المرحلة لا شيء. ستفشل في العرض وسيعطيك مصحح أخطاء العرض الخطأ التالي:

تم العثور على شيء غير متوقع أثناء إلغاء القيمة الاختيارية

3. البديل

حتى هنا طريقة لتضمين وتصوير xibs في القصص المصورة:

الخطوة 1 - إنشاء حاوية عرض

نحن بحاجة إلى إنشاء فئة فائدة تتصرف مثل الحاوية التي نسميها XibView.

سيكون XibView الخاص بنا مسؤولاً عن تحميل xib الخاص بنا وإضافة وجهة نظرنا كمقياس فرعي.

لديها 2 سمات:

  • contentView سيكون العرض الذي قمت بإنشائه في xib الخاص بك.
  • nibName هو عنوان ملف xib الخاص بك. نريد الوصول إلى هذا الحقل من مفتش الهوية لاحقًا في لوحة العمل الخاصة بنا.
IBDesignable
فئة XibView: UIView {

فار contentView: UIView؟
IBInspectable var nibName: السلسلة؟

عند التهيئة ، سيقوم الفصل بما يلي:

  • تحميل الرأي من اسمها xib
  • إضافة كمقابلة فرعية مع قناع autoresizing لقيود autolayout
        تجاوز func awakeFromNib () {
super.awakeFromNib ()
xibSetup ()
}

func xibSetup () {
السماح للحراسة بالعرض = loadViewFromNib () آخر {return}
view.frame = الحدود
view.autoresizingMask =
                    [.FlexibleWidth، .flexibleHeight]
addSubview (عرض)
contentView = عرض
}

func loadViewFromNib () -> UIView؟ {
السماح للحماية nibName = nibName آخر {return nil}
اسمحوا حزمة = حزمة (من أجل: نوع (من: النفس))
دع nib = UINib (nibName: nibName ، حزمة: حزمة)
إرجاع nib.Instantiate (
                    مع المالك: الذات ،
                    الخيارات: لا شيء). UIView
}

الخطوة 2 - إعداد xib الخاص بـ "ملف المالك"

في xib ، قم بإعداد "مالك الملف" باستخدام فئة الأداة المساعدة التي قمت بإنشائها. لا يتطلب أي تغييرات أخرى في xib الخاص بك.

الخطوة 3 - إضافة xib إلى القصة المصورة

في لوحة العمل الخاصة بك ، عندما تريد استخدام طريقة العرض الخاصة بك ،

  • تعيين فئتها كما XibView
  • عيّنها خاصية nibName كاسم ملف xib في مفتش الهوية

الخطوة 4 - تصور xib في القصة المصورة

كما ترون ، لا تزال غير قادر على تصور xib في لوحة العمل الخاصة بك. لذا قم بتحرير XibView وأضف ما يلي:

تجاوز func preparForInterfaceBuilder () {
super.prepareForInterfaceBuilder ()
xibSetup ()
contentView؟ .prepareForInterfaceBuilder ()
}

سيؤدي ذلك إلى إضفاء طابعك الشخصي على المشاهدة كما رأينا سابقًا وتشغيل العرض IB (تأكد من أنه IBDesignable أيضًا!)

أخيرا

وبهذه الطريقة (من خلال تكرار الخطوة 3) ، يمكنك بسهولة إضافة xib إلى لوحة العمل ورؤيتها على أنها طرق عرض Live. إنه بسيط ومباشر. ليس له تأثير كبير على الشفرة. إنها ببساطة تلخص وجهة نظرك.