إنشاء تطبيق iOS الأول.

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

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

وانشاء

  1. تحتاج أولاً إلى التأكد من تنزيل Xcode. تأكد من أن لديك أحدث XCode كذلك. تحقق مع App Store وتأكد من عدم وجود تحديث ضروري.
  2. أنا أستخدم Xcode 8.3.2 مع Swift 3 في الوقت الذي ينتهي فيه هذا البرنامج التعليمي. في حالة ظهور شيء ما بحلول هذا المقال أو تغييره ، يرجى إعلامنا حتى أتمكن من تغيير المقالة وفقًا لذلك.
  3. أنشئ مشروعك الأول قم بتشغيل Xcode ويجب أن تكون في شاشة ترحيب.
  4. انقر فوق إنشاء مشروع Xcode جديد.
  5. انقر فوق تطبيق العرض الفردي لأن هذا تطبيق بسيط للغاية ونحن نستخدم طريقة العرض. هناك خيارات أخرى مثل الألعاب - يمكنك إنشاء ألعاب ، تطبيق iMessage - يمكنك إنشاء تطبيق لـ iMessage ، حيث يمكن أن تكون لوحة مفاتيح ولعبة في لوحة المفاتيح والتطبيق المستند إلى الصفحة - يشبه إلى ذلك الكثير من iBooks الضرب وأقل تفاعل نوع من وجهات النظر.
  6. ثم انقر فوق التالي ومنح التطبيق اسمًا في اسم المنتج. اختر اسم الفريق والمنظمة ، معرف المنظمة. تأكد من أن اللغة سريعة. للأجهزة ، يمكنك اختيار ما تريد. سوف أستخدم Universal- يمكن استخدامه لكل من iPad و iPhone. ولكن يمكنك استخدام جهاز iPad فقط لجهاز iPad أو جهاز iPhone فقط لجهاز iPhone.
  7. من هناك ، سيطالبك Xcode باختيار موقع لحفظ هذا المشروع. يمكنك اختيار حفظه في أي مكان تريد.
  8. بعد الانتهاء ، يجب أن يكون لديك مشروع فارغ. لكننا سوف نصلح ذلك قريبا.
  9. انقر على Main.storyboard
  10. هذا هو منشئ واجهة الخاص بك. هذا هو المكان الذي تقوم فيه بمعظم أعمال الواجهة الأمامية. تفعل التصميم وتبدو هنا.
  11. في الركن الأيمن السفلي ، هذا هو المكان الذي يمكنك فيه تحديد عناصر ووحدات التحكم مثل TableViewController والأزرار والملصقات وعروض النص.
  12. هناك شريط بحث هناك يمكنك استخدامه للبحث عن ما تحتاجه.

Main.storyboard

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

سوف تنقر بعد ذلك على "وحدة التحكم في التنقل" ، وعلى اليمين يوجد خانة اختيار فارغة تقول "وحدة تحكم العرض الأولي". تأكد من النقر فوق ذلك

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

  1. من هناك ، سوف تبحث عن تسمية هي "المكتبة" واسحبها إلى View Controller.
  2. الآن ابحث عن الزر وقم بالشيء نفسه ولكن مرتين.
  3. من هناك ، قم بمحاذاة التسميات والأزرار بالطريقة التي تريدها عن طريق سحبها. الأسطر التي تراها أثناء نقلك لهذه العناصر هي محاذاة تتيح لك معرفة أنك تقوم بمحاذاة مكان ما. بعد الانتهاء من ذلك ، يمكنك الخروج من زر إعادة التعيين في شريط التنقل إذا كنت ترغب في ذلك ، وهذا ما فعلته ، أو استخدم الموضع الخاص بك فقط. لا تقلق ، لن يؤثر ذلك على الوظيفة.
  4. الآن ، نريد أن نعرف ما الذي سوف يرونه. لذلك مع Label ، انقر عليه مرتين ، ويمكنك تغييره من Label إلى ما تريد. لأن هذا عداد ، اختر رقمًا. الآن على اليمين هناك سمة الخط. بشكل افتراضي ، يكون System Font 17. اجعله أكبر أو أصغر ، قم بذلك وفقًا لتفضيلاتك. اعتدت 60. يمكنك أن تفعل ما تريد.
  5. للأزرار ، هناك إعادة تعيين وصنبور. لذلك تأكد من تسمية لهم وفقا لذلك. أنت تفعل الشيء نفسه تمامًا كما فعلت مع Label. لكنك لا تحتاج إلى تغيير الخط. يمكنك إذا أردت.
  6. أخيرًا ، نريد الحصول على لقب لهذا التطبيق. لذلك على شريط التنقل ، انقر فوقه حتى يتم تمييز الشريط. ستلاحظ أن الجزء الأيسر يعرض الآن العنوان والموجه والزر الخلفي. تغيير العنوان إلى العنوان الذي تريده.

الآن يجب أن يكون لديك شيء أقرب إلى هذا.

الجزء الممتع

الآن نريد الدخول في جزء الترميز من هذا التطبيق. في الجزء العلوي من Xcode هناك زر محرر مساعد. يبدو مثل مخطط فين.

يجب أن تشاهد الآن شيئين ، Interface Builder ، ورمز View View Controller. ما سنفعله الآن هو التحكم في الضغط على لوحة المفاتيح ، والتمسك بها ، واسحب الملصق الخاص بك إلى الرمز في الأعلى. امنح التسمية اسمًا مثل "counterLabel".

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

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

حسنًا ، أولاً سنقوم بكتابة هذا الكود في: var counter: Int = 0 (هذا متغير ، يسمح بالنوع Integer ، وقمنا بضبطه على صفر.) هناك var ودعًا لكننا سنخوض ذلك مع مقال مختلف. ولكن في الأساس يمكن تغيير var ، لا يمكن.

الآن بعد أن أصبح لدينا عداد ، علينا أن نظهر هذا الرقم. في دالة viewDidLoad ، اكتب هذا في counterLabel.text = String (counter) (لذلك غيّر conterLabel إلى ما سمّيت التسمية الخاصة بك. يتيح لنا النص أساسًا تغيير النص في التسمية. String () يحول كل ما بداخله إلى سلسلة منذ لدينا عداد العداد من النوع كثافة العمليات.

حسنا الآن لدينا أساسا التطبيق تظهر عدد تريد فتحه. نحتاج الآن إلى إضافة وظائف لإعادة التعيين والنقر فوق. سنبدأ مع الصنبور.

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

الآن بعد القيام بذلك ، تريد التأكد من أنك فعلت ذلك بشكل صحيح. لذلك قم بتشغيل التطبيق! استخدم CMD + R أو اضغط على زر التشغيل في الأعلى.

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

الزر الذي تنقرهالقائمة سترى.

عاد الآن إلى IBActions

داخل IBAction الأخرى لدينا من أجل زر إعادة الضبط. نريد أن نعيد الرقم إلى 0. لذلك سنفعل ذلك: number = 0. هذا هو ، الرقم الآن 0. لكنه لا يظهر على التطبيق عند النقر عليه. استمر وجربها. قم بتشغيل التطبيق مرة أخرى.

لإصلاح ذلك ، فإن المشكلة هي أننا لم نقوم بتحديث counterLabel لذلك نحن بحاجة إلى القيام بذلك. محاولة لمعرفة هذا واحد من أصل. إذا كنت لا تزال عالقًا ، تكون الإجابة في أسفل الصفحة.

الآن لديك إضافة الأساسيات إلى حد كبير. التطبيق يعمل إلى حد كبير. النقر فوق الصنبور وسوف تضيف واحدة إلى العداد. لقد وصلت إلى إعادة الضبط والعودة في 0.

اضافية ، اضافية!

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

دعنا نتحدث عن الفيل في الغرفة أولاً ، ما هو الهدف؟ به هناك؟

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

الآن وقد تم التعامل معها ، دعنا نتحدث عن الكود.

السطر الأول هو الإعداد إلى حد كبير وصورة خلفية فارغة. إذا كنت تستخدم UIImage () ، فهو فارغ إلى حد كبير ويتجاوز الحاجة إلى استخدام صورة من أي نوع بالفعل. هذا هو أنه لا توجد صورة خلفية.

يزيل السطر الثاني أساسًا صورة الظل التي تمثل أساسًا الحد / الحد في الأسفل. لكنك تحتاج إلى العمل لأننا لا نريد أيًا منهما حتى لا يظهر الخط.

الآن وقد تم ذلك ، لديك نسخة طبق الأصل من التطبيق هو مبين في البداية!

الإجابة: counterLabel.text = سلسلة (رقم)

أندي وونغ

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

هيا نتواصل (تويتر) (موقع) (تابعني على)