تم تقديم القصص المصورة لأول مرة للمطورين في إصدار iOS 5. وهي توفر للمطور عناء تصميم واجهة كل شاشة في ملف مختلف. تسمح لك لوحة العمل برؤية النموذج المفاهيمي لتطبيقك ككل والتفاعلات بين كل شاشة. باستخدام المقاطع ، يمكنك تعيين كيفية انتقال التطبيق بين الشاشات المحددة وتمرير البيانات. في هذا البرنامج التعليمي ، سأوضح لك كيفية إنشاء شاشة تسجيل دخول بسيطة لأحد التطبيقات.
ابدء
أول شيء تريد القيام به هو إنشاء مشروع جديد. ستحتاج إلى تطبيق شاشة واحدة جديد يضبط اللغة على Swift والأجهزة على Universal. إذا انتقلت إلى لوحة العمل ، يجب أن ترى مشهدًا فارغًا لوحدة التحكم في العرض. يشير السهم الموجود على الجانب الأيسر من وحدة التحكم في العرض إلى أنها وحدة التحكم في الجذر.
من أجل إضافة تسميات لاسم المستخدم وكلمة المرور ، تحتاج إلى الانتقال إلى المربع الموجود في أسفل يمين الشاشة ، وتحديد الدائرة التي بها مربع ، ثم سحب وإسقاط تصنيفين في العرض. من خلال اختيار التفضيلات على الشريط الجانبي ، يمكنك تحديد العديد من المعلمات المهمة. هناك الكثير لتجاوزه ولكن معظمه لا يحتاج إلى شرح.
العاملان المهمان بالنسبة لنا هما نص العنصر النائب ومربع اختيار إدخال النص الآمن. نريد استخدام نص العنصر النائب للسماح للمستخدم بمعرفة المعلومات المطلوبة منه والإدخال الآمن لإخفاء كلمة مرور المستخدم من الظهور. بعد الانتهاء من ذلك ، نحتاج إلى زر لتشغيل مقطعنا. يمكننا سحب واحدة بنفس الطريقة التي استخدمنا بها حقل نصي. بعد إعطاء الزر عنوانًا وترتيب العناصر الخاصة بك على الشاشة ، يجب أن تبدو كما يلي:
الآن تم الانتهاء من الشاشة الأولى للتطبيق ، لذا نحتاج إلى إنشاء شاشة أخرى للانتقال إليها. قم بذلك عن طريق سحب وحدة تحكم عرض ثانية على الشاشة. لتوصيل الشاشتين ، يجب عليك القيام بأمرين. ستحتاج أولاً إلى التحكم في النقر فوق الزر وسحبه إلى الشاشة الجديدة التي أضفتها. بعد ذلك ، ستحتاج إلى تحديد الدائرة بين وجهتي النظر. ستحتاج بعد ذلك إلى تغيير المعرف إلى المقطع ؛ في هذا المثال سأستخدم 'nextScreen'
أخيرًا ، سنضع ملصقًا على الشاشة الجديدة حتى نتمكن من عرض المستخدم ومعرفة ما إذا كان تطبيقنا يعمل أم لا. لكي نتمكن من الوصول إلى الحقول من القصة المصورة برمجيًا ، سنحتاج إلى إنشاء منافذ لهم في الفصل يستخدمهم مثل:
فئة FirstScreen: UIViewController {
IBOutlet ضعيف var اسم المستخدم: UITextField!
IBAction func loginButton (المرسل: AnyObject) {
perfromSegueWithIdentifier (“nextScreen” ، المرسل: self)
}
}
فئة SecondScreen: UIViewController {
مستخدم var: String!
IBOutlet اسم مستخدم var ضعيف: UILabel!
تجاوز func viewDidload () {
username.text = المستخدم
}
}
بعد الانتهاء من ذلك ، تأكد من ربط الكائنات من لوحة العمل باستخدام مفتش التوصيلات لكل شاشة. يجب أن تظهر منافذ البيع الخاصة بك ويمكنك النقر فوق الدائرة الموجودة على يمينها لربطها.
الوظيفة الأخيرة التي سيتم تنفيذها هي وظيفة PreparForSegue في فئة الشاشة الأولى. يسمح لك هذا بنقل البيانات إلى طريقة العرض الجديدة مثل:
تجاوز fun PreparForSegue (التالي: UIStoryboardFollow ، المرسل: AnyObject؟) {
إذا segue.identifier == 'nextScreen' {
اسمح لـ destVC = continue.destinationViewController كـ UIViewController
destVC.user = self.username
}
}
الآن لديك فهم أساسي لكيفية تغيير الشاشات وتمرير البيانات بينها. سيعطيك هذا بداية جيدة في إنشاء تطبيقات وظيفية وبرمجة سعيدة!
2 دقيقة للقراءة
