بسم الله الرحمن الرحيم

عندما بدأ بكتابة تطبيقات للايفون كنت استخدم الستوري بورد لاصغر تفاصيل تصميم الواجهات. كان من السهل رؤية المكونات و العلاقة بينها و ربط المكونات ببعضها. لكن لم يطل بي الى ان وجدت ان ليس كل شيء سهل هو الأفضل. عندما تعمل مع فريق على تطبيق ايفون قد يكلفك اضافة زر على نفس الصفحة التي قد عمل عليها مبرمج اخر ساعات من محاولة دمج الكود الذي تم تعديله. ايضا واجهتني مشاكل كثيرة عندما حاولت نقل كود مع الواجهة المتعلقة به من مشروع الى اخر. لم ياخذ البحث عن حل اكثر من بحث على جوجل لاجد انه بامكانك انشاء و ربط مكونات الواجهات ببعضها عن طريق الكود. و بحكم خبرتي القليل ببرمجة تطبيقات الايفون عندما بدأت اقرأ المقالات وجدت اكواد مخيفة و طويلة لكتابة واجهات بسيطة.

لا تخف هناك حل بسيط للغاية و قد سهل حياتي و اختصر على الوقت و عدت لاحب كتابة مشاريع للايفون مرة اخرى 🙂
الحل هو مكتبة SnapKit – Autolayout DSL Library

للبدأ بكتابة تطبيقات باستخدام هذه المكتبة يجب اولا اضافة كوكوبودس ( الذي يسهل اضافة المكاتب للمشروع) ستجد كيفية اضافته هنا

باضافة كوكوبودس للمشروع و اضافة مكتبو السنابكيت سيتم انشاء ملف اضافي للمشروع صيغته ..xcworkspace

الان سنفتح المشروع و اول خطوة نقوم بها هي حذف الستوري بورد لنبدأ صفحة جديدة في برمجة تطبيقات الايفون 💪🏻

لا تنسى حذف كلمة Main كما مبين في الصورة التي في الاعلى

نقطة البداية في التطبيق يتم تحديدها من الستوري بورد لكن بعد ان حذفناه يجب انشائها برمجياً ايضاً من ملف

AppDelegate.swift

الان التطبيق سيعمل و الشاشة الرئيسية ستكون الملف الذي حددناه كما في الصورة اعلى النص

لنبدأ بالقسم الممتع الان باضافة بعض مكونات الواجهات. لننتقل الى ملف الشاشة التي جعلناها شاشة رئيسية الان

ViewController.swift

١- اضافة مكتبة السنابكيت لنستطيع استدعاء دالاتها

٢- انشاء مكونة الواجهة (وهذا يقابل اضافة مكونات الواجهة بالسحب و الافلات على الستوري بورد)

٣- تغيير لون الشاشة لنتأكد من اضافة المكون الرئيسي

٤- اضافة المكون الذي تم انشائه الى الشاشة

٥- استخدام السنابكيت لجعل المكونة الرئيسية تملأ كل الشاشة

الآن لنصعب الامور قليلاً. سنقوم باضافة مكونة واجهة اخرى لتملأ نصف الشاشة العلوي و اضافة زر ليتوضع تحت المكونة التي ستملأ نصف الشاشة

في المربع الاحمر قد انشأت مكونة النصف العلوي و تمت اضافتها الى المكونة الرئيسية

الان لنضيف زر يتوضع تحت النصف العلوي مباشرةً

ليتوضع الزر تحت مكونة النصف العلوي تم ربط الحافة العلية للزر بالحافة السفلية للنصف العلوي بالسطر التالي:

يمكنك الان تجريب خيارات اخرى و تصميم واجهات اكثر تعقيداً باستخدام سنابكيت

في حال لديكم اي سؤال يمكنكم ان تكتبوا تعليق او تتواصلوا معلي عن طريق وسائل التواصل المذكورة في الصفحة الرئيسية للموقع.

قد تكون هنالك اخطاء باللغة و تسمية المكونات و لذلك ارجو منكم مساعدتي في اصلاحها ايضاً 🙂

بارك الله فيكم