طريقة إضافة خصائص جديدة لشريط الأدوات في ال xcode

يعرب المصطفىمنذ 7 سنوات

إصدار الxcode المستخدم : 8.0

لغة سويفت 3

 

 

في هذا الدرس سنتعلم طريقة إضافة خصائص إضافية في شريط الخصائص ( properties inspector ) في برنامج الxcode بطريقة سهلة و بسيطة حيث ستتمكن من إضافة مؤثرات بصرية إضافية لعناصر واجهة المستخدم كالحد (stroke or border ) و الزوايا الدائرية للأشكال.. مثلا سيكون بإمكانك عمل الظل و الحدود مع الزوايا الدائرية للview و ال label  كما هو موضح في الصورة التالية.

 لقطة الشاشة ٢٠١٦-١٢-٠٤ في ١٢.٥٩.٣٣ ص.png

لاحظ وجود خيارات جديدة في الشريط الأيمن للتحكم بقيم الحد و الظل و الزوايا الدائرية

 

إذن لنبدأ الدرس..

-في البداية.. قم بفتح الxcode و اختر   create new xcode project ثم اختر  single view application 1.png

 

- قم بعمل كلاس جديد عن طريق File > New > File أو بالضغط على cmd+n ثم اختر cocoa touch class

3.png

 

-قم بتسمية الclass  بأي اسم يناسبك و تأكد من اختيار UIView عند Subclass of: كما هو موضح في الصورة ثم اضغط next3.5.png

الآن قم بإضافة IBDesignable قبل بداية التعريف بالكلاس في كلاس CustomizableView ليبدو بهذه الطريقة:


import UIKit

@IBDesignable
class CustomizableView: UIView {
}

هذه الكلمة التي قمت بإضافتها تعطيك إمكانية ربط الكلاس مع الmain story board بحيث يقوم الاكس كود بمزامنة التغييرات التي تجريها على هذا الكلاس مع ال story board و إظهار النتائج مباشرة دون الحاجة إلى تشغيل الsimulator الاختبار النتيجة التي توصلت إليها

 

الآن قم بإضافة الكود التالي إلى الكلاس..


@IBInspectable
    var cornerRadius:CGFloat = 0{
            didSet{
                self.layer.cornerRadius = cornerRadius
            }
    }

-كما تلاحظ في البداية قمنا بإضافة @IBInspectable وهذه الكلمة تسبق المتغير الذي يحمل اسم cornerRadius و هذا أيضا يربط الكلاس مع الstory obard بطريقة أخرى بحيث يمكنك الآن التحكم بقيمة هذا المتغير من شريط الخصائص في الstory board مما سيؤدي إلى تغير قيمة هذا المتغير بناء على القيم المحددة في ال stroy board 

- بعد ذلك قمنا بإضافة المتغير cornerRadius و هو الذي سنستخدمه لتغيير الزوايا المنحنية في الview إلى زوايا دائرية و اخترنا نوع القيمة لتكون CGFloat و هو النوع المناسب لهذه الخاصية.

- قمنا بإسناد القيمة 0 للمتغير كقيمة ابتدائية ثم بعد ذلك اضفنا الأقواس و هذه الأقواس تساعدك في إضافة تفاصيل أخرى للمتغير.

- بداخل الأقواس قمنا بإضافة كلمة didSet متبوعة بأقواس و هذه الكلمة تمثل مجموعة من الأوامر يحددها المستخدم بحيث تطبق هذه الأوامر مباشرة بمجرد تغيير قيمة المتغير ، و هي يمكن تشبهها بالدالة function بحيث يقوم المبرمج بتحديد الأوامر التي ستوقوم هذه الدالة بها حالما يتم تغيير قيمة المتغير cornerRadius

-اذن ما هي هذه الأوامر التي سيتم استدعاؤها ؟ 

self.layer.cornerRadius = cornerRadius

كما هو موضح فإن self تمثل الاوبجكت من هذا الكلاس customizableView و بما أن هذا الكلاس يرث من الView فإنه سيرث خصائصها و التي منها layer ليقوم باستخدام الخاصية cornerRadius التي بداخل الlayer و التي تتحكم بمدى استدارة زوايا الشكل ثم يقوم بتغيير قيمتها لتساوي المتغير cornerRadius الذي نتحكم بقيمته من الstory board كما ذكرنا سابقا بفضل الخاصية @IBInspectable 

اذن مالذي سيحدث بالضبط؟

بمجرد إضافة عنصر view في الاكس كود و جعله يرث من الكلاس customizableView ستظهر لك الخواص المعروفة لهذا الview في شريط الخصائص كاللون و الحجم و المحاذاة ..الخ بالإضافة إلى خاصية مميزة جديدة لهذا الview فقط و هي الcornerRadius حيث ستظهر لك في شريط الخصائص بفضل كلمة @IBInspectable ثم سيكون بإمكانك تعديل قيمة ال cornerRadius و بمجرد تعديلها ستستدعى دالة didSet التي قمنا بإضافتها سابقا و بالتالي سيطبق أمر تغيير الcornerRadius الخاص بالشكل لتتغير قيمته من 0 إلى القيمة التي قمت بتحديدها له في شريط الخصائص

و أخيرا سترى أن زوايا الview بالفعل أصبحت تتغير مباشرة و هذا بفضل كلمة @IBDesignable التي قمنا بإضافتها للكلاس customizableView

 

لنطبق ذلك عمليا..

- قم بالذهاب إلى الstory board  وإضافة view إليها و قم بتلوين هذا الview باللون الذي يناسبك.

- الآن اذهب إلى الأيقونة التي بجانب أيقونة الخصائص و التي تسمى identity inspector و قم بتغيير الكلاس الخاص بالview إلى CustomizableView كما هو موضح في الصورة

5.png 

 

 

- انتظر قليلا ثم عد إلى الخصائص ستلاحظ و جود الخاصية الجديدة cornerRadius في أعلا شريط الخصائص كما هو واضح في الصورة.. 

 

6.png

- الآن قم بتغيير القيم لتلاحظ تغير زوايا الشكل بطريقة جميلة

 

 

يمكنك إضافة المزيد من الخصائص التي بإمكانك التحكم بها بنفس الطريقة..

لإضافة خاصية الحد (border) :


 @IBInspectable
    var border:CGFloat = 0{
        didSet{
            self.layer.borderWidth = border
        }
    }

 

لإضافة خاصية الظل ( لا أنصح بها لأنها قد تؤدي إلى بطء البرنامج بسبب معالجة الظل التي تستهلك الكثير من الأداء):


    @IBInspectable
    var shadow:CGFloat = 0{
        didSet{
            self.layer.shadowRadius = shadow
            
        }
    }
    
    
    @IBInspectable
    var opacity:Float = 0{
        didSet{
            
            self.layer.shadowOpacity = opacity/20
            
        }
    }
    
    
    @IBInspectable
    var offset:CGFloat = 0{
        didSet{
            
            self.layer.shadowOffset.height = offset
            self.layer.shadowOffset.width = offset
            
        }
    }

 

 

هذه الإضافات ليست خاصة للview فقط و إنما يمكنك إضافتها لأي عنصر رسومي في البرنامج فمثلا: بإمكانك فعل المثل للlabel كل ما عليك فعله :

- قم بعمل كلاس جديد باسم customizableLabel على سبيل المثال 

- اجعله يرث من UILabel في خيار subclass of عند إنشاء الكلاس 

- قم بإضافة كلمة @IBDesignable عند بداية الكلاس 

-قم بنسخ نفس الكود الخاص بالcustomizableView  و لصقه في كلاس customizableLabel

- استمتع :)

3.png

10.png

9.png

8.png

7.png

4.png

2.png

كلمات دليلية:
0
إعجاب
2161
مشاهدات
0
مشاركة
0
متابع
متميز
محتوى رهيب

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !