كيفية استخدام لوحة العمل لإنشاء ومعاينة طرق العرض المخصصة؟

يتيح لك Xcode و Swift (الهدف من C إلى) إنشاء UIViews مخصصة مثل UIButtons المخصصة أو UITableViewCells المخصصة. يمكنك رسم طريقة العرض الخاصة بك في لوحة العمل واستخدام فئة UIView مخصصة لتحديد خصائص طريقة العرض الجديدة. ولكن في معظم الأحيان تحتاج إلى استخدام هذا العرض في العديد من الأماكن في تطبيقك. ما هي أفضل طريقة لتحقيق ذلك ؟ سأقدم لك طريقتي لتحقيق ذلك.

إنشاء فئة مخصصة مع XIB

أولاً نحتاج إلى إنشاء فئة UIView المخصصة لدينا. أريد أن تكون هذه الفئة قابلة للتحرير باستخدام Interface Builder (IB). أضف ملفًا إلى مشروعك "ملف ← ملف جديد ← ملف ...". عند إضافة نافذة ملف جديدة ، اختر "عرض" ضمن فئة "واجهة المستخدم".

إنشاء XIB

ثم نحتاج إلى إنشاء الفصل لإضافة خصائصنا المخصصة. أضف ملفًا آخر إلى مشروعك "ملف ← ملف جديد ← ملف ...". عند إضافة نافذة ملف جديدة ، اختر "ملف Swift" ضمن فئة "المصدر".

قم بإنشاء الفئة المخصصة

ارسم وجهة نظرك باستخدام Interface Builder

افتح ملف العرض الخاص بك ، MyButton.xib. كما ترى ، فإن العرض هو حجم شاشة الجهاز. قبضة ، حدد طريقة العرض على IB المفتش كائن وحذفها.

حذف العرض الفعلي

الآن ، أضف زرًا إلى XIB كما تفعل عادةً. والعرف كما تريد. في حالتي ، أريد زرًا مثل:

  • الخط الغامق ولون النص الأبيض
  • خلفية حمراء
  • 2px الحدود البيضاء
زر مخصص لي

كما تعلمون ، لا يمكننا تحرير الطبقة باستخدام Interface Builder ، لذا نحتاج إلى ترميز حدودنا البيضاء بدقة 2 بكسل. لتحقيق ذلك ، نحتاج إلى كتابة صفنا المخصص MyButton.swift.

الطبقة المخصصة MyButton

افتح MyButton.swift. الملف فارغ تمامًا بحيث يمكنك إضافة UIKit والفئة.

مؤسسة استيراد
استيراد UIKit
فئة MyButton: UIButton {
}

الخطوة التالية ، نحتاج إلى تعيين مالك الملف. في WIB ، على اللوحة اليمنى ، اختر ملف المالك وعيّن MyButton كفئة مخصصة.

اختر مالك الملف

ثم ، قم بتوصيل الزر بالفصل باستخدام IBOutlet كما تفعل عادةً. في حالة ly ، أعطي الاسم "عرض" للزر.

من أجل استخدام كل سحر IB ، سنضيف في الجزء العلوي من الفصل السمة "IBDesignable". هذا يسمح للفئة الحالية أن يتم رسمها ومعاينتها في IB. سيكون كل تغيير الرمز مرئيًا على الفور في IB. رائع ، أليس كذلك؟

ثم قمت بإضافة وظائف الحرف الأول لاستنساخ الفصل. يتطلب "IBDesignable" استخدام init (الإطار: CGRect) للعمل بشكل صحيح. ثم أضف وظيفة الإعداد لتخصيص وجهة نظرنا. لا تنس أن تضيف الحدود البيضاء في الحرف الأول ، فهذا هو الغرض من هذا!

كل ما عليك فعله هو "ربط" xib بالفئة باختيار MyButton في سمة الفئة في Identity Inspector. إذا كان كل شيء على ما يرام ، فسيتم ترجمة XIB والفئة تلقائيًا بواسطة XCode. يجب أن تشاهد "النجاح" ولا توجد رسالة خطأ.

منجز! هنا السحر ...

الآن ، في لوحة العمل الرئيسية الخاصة بك ، أضف زرًا ، وقم بتغيير النوع إلى "مخصص" وتطبيق فئة "MyButton".

مع هذه التقنية ، يمكنك دفع حدود التصميم باستخدام Storyboard وحتى إنشاء إطار عمل خاص بك استنادًا إلى مكونات UIKit. هذا يوفر الكثير من الوقت ويسهل بشكل خاص صيانة تطبيقك.