قم بإنشاء عرض تمرير باستخدام Swift: 9 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:40

قبل بضعة أشهر ، لم أكن أعرف وجود سويفت و إكس كود. اليوم ، تمكنت من تطوير جزء صغير من التطبيق الذي أرغب في إنشائه. لقد تمكنت من إنشاء شيء رائع ، وأود مشاركته معك.

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

قبل أن نفعل ذلك ، دعنا نتحدث عن ماهية Swift و Xcode:

1. Swift هي لغة برمجة قوية وسهلة الاستخدام لأنظمة macOS و iOS و watchOS و tvOS. تعد كتابة كود Swift أمرًا تفاعليًا وممتعًا ، وبناء الجملة موجز ولكنه معبر ، ويتضمن Swift الميزات الحديثة التي يحبها المطورون. رمز Swift آمن حسب التصميم ، ولكنه ينتج أيضًا برنامجًا يعمل بسرعة البرق. إنه مصمم للعمل مع أطر عمل Apple's Cocoa و Cocoa Touch والجسم الكبير من كود Objective-C الحالي المكتوب لمنتجات Apple. تم إنشاؤه باستخدام إطار عمل مترجم LLVM مفتوح المصدر وتم تضمينه في Xcode منذ الإصدار 6 ، الذي تم إصداره في 2014. على منصات Apple ، يستخدم مكتبة Objective-C وقت التشغيل التي تسمح بتشغيل كود C و Objective-C و C ++ و Swift ضمن برنامج واحد.

2. Xcode عبارة عن بيئة تطوير متكاملة (IDE) لنظام macOS تحتوي على مجموعة من أدوات تطوير البرامج التي طورتها Apple لتطوير برامج لنظام macOS و iOS و watchOS و tvOS.

الخطوة 1: قم بتنزيل Xcode

يتضمن Xcode 10 كل ما تحتاجه لإنشاء تطبيقات مذهلة لجميع أنظمة Apple الأساسية. يبدو الآن Xcode والآلات رائعين في الوضع المظلم الجديد على macOS Mojave. يتيح لك محرر التعليمات البرمجية المصدر تحويل الكود أو إعادة بنائه بسهولة أكبر ، والاطلاع على تغييرات التحكم في المصدر جنبًا إلى جنب مع السطر ذي الصلة ، والحصول بسرعة على تفاصيل حول اختلافات التعليمات البرمجية الأولية. يمكنك بناء أداتك الخاصة مع التصور المخصص وتحليل البيانات. يجمع Swift البرامج بسرعة أكبر ، ويساعدك على تقديم تطبيقات أسرع ، وينشئ ثنائيات أصغر. تكتمل مجموعات الاختبار بشكل أسرع عدة مرات ، والعمل مع فريق هو أبسط وأكثر أمانًا وأكثر من ذلك بكثير.

يشتمل Xcode 10 على Swift 4.2 ، الذي يجمع برامجك بسرعة أكبر ، ويساعدك على تقديم تطبيقات أسرع ، وينشئ ثنائيات أصغر. مقارنةً بـ Swift 4.0 ، يمكن لأحدث مترجم من Swift إنشاء تطبيقات كبيرة بأكثر من ضعف السرعة. * بالاقتران مع نظام البناء الجديد Xcode ، يكون سير عملك اليومي في التحرير والبناء والاختبار أسرع بكثير. تم تحسين Xcode و Swift لأحدث أجهزة Mac متعددة النواة ، مما يجعلهما نظامًا أساسيًا للتطوير بسرعة البرق.

الخطوة 2: لنبدأ

إذن ما سنفعله هو الذهاب إلى Xcode وإنشاء مشروع جديد. بمجرد النقر فوق مشروع جديد ، سيكون تطبيقنا عبارة عن تطبيق عرض واحد. بالنسبة لأولئك الذين لا يعرفون ، يعني تطبيق العرض الواحد أنك ستحتاج إلى بدء كل شيء من البداية وأنه سيكون هناك عرض واحد يمكننا برمجته.

اسم المنتج الخاص بك TutorialApp. إذا كنت مطورًا متمرسًا ينشر التطبيقات في متجر التطبيقات ، فمن المحتمل أن يكون لديك فريق ، ولكن إذا كنت جديدًا ولم يكن لديك أي تطبيقات منشورة ، فيمكنك تخطي هذا الحقل. في اسم المؤسسة ، يمكنك كتابة اسم الشركة في حال كان لديك واحدة ، وفي حالتي سأحتفظ بـ MacBook Pro. بعد ذلك ، يعتبر معرف المنظمة شيئًا مثل المعرف الفريد لمشروعك ، وبالتالي ، يمكنك كتابة ما تريد. ستكون اللغة سريعة بالتأكيد.

لذا ، اضغط على التالي ودعنا نحفظ المشروع على سطح المكتب حتى يسهل الوصول إليه.

يتكون المشروع الجديد من ثلاثة ملفات ، AppDelegate.swift ، ViewController.swift ، ونجمة هذا البرنامج التعليمي: Main.storyboard. ضمن معلومات النشر> اتجاه الجهاز في إعدادات المشروع العامة ، اضبط الأجهزة على iPhone. نظرًا لأن هذا تطبيق رأسي فقط ، قم بإلغاء تحديد الخيارين Landscape Left و Landscape Right. افتح Main.storyboard في متصفح المشروع لعرضه في Interface Buildereditor:

لن نجري أي تغييرات في التكوين وسننتقل مباشرة إلى لوحة العمل الرئيسية. نظرًا لأننا أنشأنا تطبيقًا فرديًا ، فقد أنشأنا طريقة عرض فردية بسيطة. هذا شيء نحتاج إلى العمل عليه.

الخطوة الثالثة: العمل في واجهة المستخدم

المصطلحات الرسمية للوحة العمل لوحدة التحكم في العرض هي "مشهد" ، ولكن يمكنك استخدام المصطلحات بالتبادل. يمثل المشهد وحدة تحكم العرض في لوحة العمل.

هنا ترى وحدة تحكم عرض واحدة تحتوي على طريقة عرض فارغة. يشير السهم الذي يشير إلى وحدة التحكم في العرض من اليسار إلى أنها وحدة التحكم الأولية في العرض التي سيتم عرضها في لوحة العمل هذه. يتم تصميم مخطط في محرر لوحة العمل عن طريق سحب عناصر التحكم من مكتبة الكائنات (انظر الزاوية العلوية اليمنى) إلى وحدة التحكم في العرض.

للتعرف على كيفية عمل محرر القصة المصورة ، اسحب بعض عناصر التحكم من مكتبة الكائنات إلى وحدة التحكم في العرض الفارغة كما يظهر في الفيديو.

أثناء سحب عناصر التحكم للداخل ، يجب أن تظهر في مخطط المستند التفصيلي على اليسار.

يمكنك إنشاء واجهة المستخدم التي تريدها. في حالتي ، استخدمت الشخص الذي تراه في الصورة.

الخطوة 4: تطوير وحدة تحكم العرض الثاني وبدء الإشارات (الانتقالات)

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

اكتب وحدة التحكم في العرض وضعها بجوار وحدة التحكم في العرض الأولية. سيكون هذا المشهد مسؤولاً عن وحدة التحكم في عرض السجل. يمكن إعادة التوجيه إلى تلك الصفحة بطريقتين:

1. يمكننا القيام بذلك يدويًا عندما نقوم بإجراء اتصال من الزر إلى عنصر التحكم في العرض الآخر
2. يمكننا القيام بذلك بشكل برمجي

ما اخترت القيام به هو القيام بذلك يدويًا. سهلة على هذا النوع:

1. انقر بزر الماوس الأيسر على الزر الخاص بك (في حالتي ، قم بتسجيل حساب جديد)
2. اضغط مع الاستمرار على الأمر وانقر بزر الماوس الأيسر لسحبه إلى مشهد التحكم في التسجيل.
3. حررها هناك واختر "Present Modally"

الخطوة 5: إنشاء فصل البرمجة لعملية التسجيل

لذا ، نريد الآن إنشاء فئة تشفير مخصصة للمشهد الجديد.

للقيام بذلك ، عليك القيام بالخطوات التالية:

• انقر بزر الماوس الأيمن على مجلد المشروع الخاص بك
• انقر فوق الملف الجديد المسمى cocoa touch class
• في فئة الكتابة: RegisterVC
• مهم جدا! تأكد من أن الفئة الفرعية يجب أن تكون من النوع UIViewController
• يجب أن تكون اللغة سريعة.
• انقر فوق التالي واحفظ فئة الكاكاو بالداخل في الجذر الرئيسي لمشروعك.
• انقر فوق لوحة العمل الرئيسية وانتقل إلى وحدة التحكم في العرض الجديدة
• اضغط على الزر الأصفر الذي يوضع فوقه
• في اليمين ، انتقل إلى مفتش الفصل وقم بالإشارة إلى Register VC (فئة Costum ، class = RegisterVC

الخطوة 6: إنشاء التمرير الأفقي للصفحة

في نظام التشغيل iOS ، تُستخدم عروض التمرير لعرض المحتوى الذي لا يتناسب تمامًا مع الشاشة. عروض التمرير لها غرضان رئيسيان:

للسماح للمستخدمين بسحب منطقة المحتوى التي يريدون عرضها ، للسماح للمستخدمين بتكبير أو تصغير المحتوى المعروض باستخدام إيماءات القرص. عنصر تحكم شائع مستخدم في تطبيقات iOS - UITableView - هو فئة فرعية من UIScrollView ويوفر طريقة رائعة لعرض المحتوى الأكبر من الشاشة.

ما استخدام الصفحات الفرعية في التمرير الأفقي؟

حسنًا ، إذا كنت سأقوم بإنشاء 6 صفحات مختلفة ، فهذا يعني أنه يتعين علي إنشاء فصل دراسي مخصص لكل واحدة منهم وليس من الملائم نقل المعلومات من فصل إلى آخر. على سبيل المثال ، عندما أكتب بريدي الإلكتروني ثم انقر فوق التالي ، إذا كان لدي وحدة تحكم عرض مختلفة ، فسأغادر الصفحة الأولى من وحدة التحكم في العرض ثم يتم تقديم الصفحة الثانية. في هذه الحالة ، يجب تمرير معلومات وحدة التحكم في العرض الأولى إلى وحدة التحكم التالية ثم مرة أخرى إلى وحدة التحكم في العرض الثالث وما إلى ذلك. عندما يكون لدي جميع وحدات التحكم في العرض التي أحتاجها ، يجب أن أجمع كل البيانات من الجميع الصفحات وإرسالها إلى الخادم. لذلك ، سيكون هذا معقدًا حقًا.

لذلك ، بالانتقال إلى إنشاء وحدة التحكم في العرض هذه ، في حالتي ، كان لدي 5 صفحات أردت إنشاءها:

1. بريد الالكتروني
2. الاسم بالكامل
3. كلمه السر
4. تاريخ الولادة
5. جنس تذكير أو تأنيث

هذا يعني أن وحدة التحكم في العرض التي سننشئها ، يجب أن تكون أكبر بخمس مرات من تلك التي صنعناها من قبل.

حدد وحدة التحكم في العرض الخاصة بك وانتقل إلى الزاوية اليمنى العلوية وانقر على أيقونة المسطرة وقم بتعديل الحجم المحاكي. ستختار الشكل الحر لضبط العرض والارتفاع. العرض الافتراضي للشاشة المناسب لجهاز iphone 8 هو 375 ، لذلك إذا قمت بضرب 375 * 5 = 1875. وهنا تذهب ، لديك وحدة تحكم عرض ممتدة.

وبالمثل ، فإنك تتبع نفس العملية لجميع الهواتف وأحجام الشاشات المختلفة.

من أجل جعل عرض التمرير يعمل ، نحتاج إلى كائن عرض التمرير. يوفر Scroll View آلية لعرض المحتوى الأكبر من حجم نافذة التطبيق. انقر فوق هذا الكائن ، واسحبه وضعه في الزاوية اليسرى العلوية من وحدة التحكم في العرض وتأكد من أن X و Y في مواضع صفرية وتمدد وفقًا للتحكم في العرض.

Scroll View يسمح لنا فقط بالتمرير ، ولا شيء غير ذلك. ثم نحتاج إلى إضافة طريقة عرض المحتوى ، والتي ستخزن طرق العرض الأخرى. يمكنك العثور على UIView - وهو يمثل منطقة مستطيلة حيث يرسم ويستقبل الأحداث - في مكتبة الكائنات. ببساطة ، انقر عليه واسحبه إلى عرض التمرير ، ثم قم بتمديده وفقًا لذلك مرة أخرى.

حدد عرض التمرير من اللوحة اليسرى وسنقوم باستدعاء المحاذاة 0 و 0 و 0 و 0 وإضافة قيود. افعل نفس الشيء لعرض المحتوى.

الخطوة 7: تطوير واجهة المستخدم للصفحات الفرعية للتمرير الأفقي

في هذه الخطوة ، يجب عليك إنشاء واجهة المستخدم لصفحاتك الفرعية. ما اخترت القيام به هو عمل نموذج أولي في Sketch ثم بنائه في Xcode.

الخطوة 8: تنفيذ التصميم في Xcode

الخطوة التالية هي تنفيذ هذا التصميم في Xcode. للقيام بذلك ، يجب عليك إنشاء وصلات منفذ لجميع الصفحات الفرعية وإنشاء واحدة أخرى لـ "العرض الأم" ، أي اتصال منفذ واحد لوحدة التحكم في العرض بالكامل.

ترتبط العناصر الموجودة في لوحة العمل بكود المصدر. من المهم فهم العلاقة التي تربط لوحة القصة بالرمز الذي تكتبه.

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

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

أنشأ Xcode بالفعل أحد هذه الفئات التي نظرت إليها سابقًا ، ViewController.swift ، وربطها بالمشهد الذي تعمل عليه في لوحة العمل. عندما تضيف المزيد من المشاهد ، ستجري هذا الاتصال بنفسك في مفتش الهوية. يتيح لك فاحص الهوية تحرير خصائص كائن في لوحة العمل المتعلقة بهوية هذا الكائن ، مثل الفئة التي ينتمي إليها الكائن.

إنشاء منافذ لـ UI ElementsOutlets توفر طريقة للإشارة إلى كائنات الواجهة - الكائنات التي أضفتها إلى لوحة العمل - من ملفات التعليمات البرمجية المصدر. لإنشاء منفذ ، اسحب مفتاح التحكم من كائن معين في لوحة العمل إلى ملف تحكم العرض. تنشئ هذه العملية خاصية للكائن في ملف وحدة التحكم في العرض ، مما يتيح لك الوصول إلى هذا الكائن ومعالجته من التعليمات البرمجية في وقت التشغيل

1. افتح لوحة العمل ، Main.storyboard.
2. انقر فوق الزر Assistant في شريط أدوات Xcode بالقرب من الزاوية اليمنى العليا من Xcode لفتح محرر المساعد. إذا كنت تريد مساحة أكبر للعمل ، فقم بطي متصفح المشروع ومنطقة المرافق بالنقر فوق أزرار Navigator and Utilities في شريط أدوات Xcode.
3. يمكنك أيضًا طي عرض المخطط التفصيلي.

في شريط محدد المحرر ، الذي يظهر أعلى محرر المساعد ، قم بتغيير المحرر المساعد من Preview إلى Automatic> ViewController.swift.

انقر فوق الصفحة الفرعية واسحب إلى الفئة المناسبة في الكود.

الخطوة 9: دمج الإيماءات المخصصة

تمرير لفتة

تحدث إيماءة التمرير عندما يحرك المستخدم إصبعًا واحدًا أو أكثر عبر الشاشة في اتجاه أفقي أو رأسي محدد. استخدم فئة UISwipeGestureRecognizer لاكتشاف إيماءات التمرير.

تنفيذ إيماءة انتقاد

الخطوة 1: إضافة إيماءة (إيماءات) التمرير السريع في طريقة viewDidLoad ()

تجاوز func viewDidLoad () {super.viewDidLoad ()

اسمحوا swipeLeft = UISwipeGestureRecognizer (الهدف: self ، action: #selector (handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer (swipeLeft)

اسمحوا swipeRight = UISwipeGestureRecognizer (الهدف: self ، action: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipe Right)

اسمحوا swipeUp = UISwipeGestureRecognizer (الهدف: self ، action: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

اسمحوا swipeDown = UISwipeGestureRecognizer (الهدف: self، action: #selector (handleGesture)) swipeDown.direction =. down self.view.addGestureRecognizer (swipeDown)}

الخطوة 2: تحقق من اكتشاف الإيماءات في طريقة handleGesture () func handleGesture (إيماءة: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} else if gesture.direction == UISwipeGestureRecognizer. يسار {print ("Swipe Left")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Swipe Down")}}

في تطبيقي ، كنت أرغب في استخدام swipeRight ، لكنني لم أتمكن من استخدام التطبيق الأكثر ملاءمة لتطبيقك.

الآن ، دعنا ننفذ هذا في الكود الخاص بنا.

نذهب إلى سجل VC الذي أنشأناه من قبل ونكتب الكود كما ترون في الصور.

شرح المدونة

اسمح لـ current_x بالحصول على الموضع الحالي لـ ScrollView (الوضع الأفقي) دع screen_width يحصل على عرض الشاشة ، بخصم هذا الحجم دع new_x من الوضع الحالي لعرض التمرير ، أعود حسب عرض الشاشة إذا كان current_x> 0 حتى ما لم يكن أكثر من 0 - 0 هي الصفحة الأولى.

وانتهينا!

عمل جيد يا شباب!