آموزش ساخت برنامه تعاملی در توسعه iOS با Swift 2

3 سال پیش

آموزش ساخت برنامه تعاملی در توسعه iOS با Swift 2

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ساخت برنامه تعاملی در توسعه iOS با Swift 2 خواهیم پرداخت.

در این درس، ما موارد جدید و ویژگی های UI را که iOS برای تعامل با کاربر فراهم می کند ، معرفی خواهیم کرد.

فیلدهای متن
برچسب ها
دکمه ها و عملکردهای آنها

علاوه بر این، ما کد را به سرعت برای یک برچسب پویا می نویسیم، که نتیجه محاسبه شده ورودی ورودی توسط کاربر را نشان می دهد.

منظور ما از عنوان “ساختن برنامه تعاملی” این است که برنامه ما با کاربر تعامل داشته باشد. بنابراین، در اینجا ما قدرت تعامل و کنترل برنامه را به کاربر می دهیم.

افزودن فیلدهای نوشتاری

در اینجا ما دوباره یک پروژه جدید خواهیم ساخت. این باید به راحتی قابل کنترل باشد، زیرا قبلاً در مورد چگونگی ایجاد یک پروژه جدید در Xcode بحث کردیم.

بسیار خوب، بنابراین ما اکنون یک پروژه جدید با عنوان “My Dog’s Age” ایجاد خواهیم کرد. پس از ایجاد این پروژه، ما بر روی پرونده “Main.storyboard” خود کلیک کرده و مراحل زیر را دنبال کنیم.

در نوار جستجوی صفحه Pane’s (واقع در گوشه پایین سمت راست Xcode) ، برچسب را جستجو کنید. کلیک کنید و آن برچسب را به main.storyboard / (View) بکشید. سپس، بر روی برچسب دوبار کلیک کنید و نام آن را به عنوان – “My Dog’s Age” تغییر دهید.

“text field” را جستجو کنید ، آن قسمت متن را کلیک کرده و به نمای خود بکشید. در حالی که این قسمت متن انتخاب شده است ، به ویژگی inspector بروید و نوع صفحه کلید را به Number pad تغییر دهید ، تا فقط شماره مطابق تصویر زیر وارد شود.

افزودن دکمه ها به View

اکنون یک دکمه را در نوار جستجو جستجو کنید. آن را به نمای خود بکشید ، روی آن دوبار کلیک کنید و نام آن را “Calculate” بگذارید.

افزودن برچسب به View

برای نمایش برچسب ، آن را زیر دکمه اضافه کنید تا سن خروجی نشان داده شود. دوبار کلیک کنید و برچسب را خالی کنید و کمی آن را بکشید ، به طوری که خروجی کامل قابل مشاهده است.

نکته – اگر نمی توانید با دوبار کلیک مجدد نام خود را تغییر دهید ، سپس مورد را انتخاب کنید و در پنجره ابزار – Attribute inspector ، عنوان آن مورد وجود دارد ، آنجا را تغییر دهید و Return را فشار دهید همانطور که در تصویر زیر نشان داده شده است

Calculate
اکنون، Main.storyboard شما باید مانند تصویر زیر باشد.

Main storyboard
اکنون در مورد نحوه افزودن تصاویر به صفحه اصلی بحث خواهیم کرد.

افزودن عکس به View

برای شروع، ابتدا باید تصویری را جستجو کنیم که می خواهیم آن را در پروژه اضافه کنیم. می توانید تصویر داده شده در زیر را بارگیری کنید –

این تصویر را در پروژه خود کپی کنید ، یا این تصویر را به پروژه خود بکشید ، سپس پنجره زیر را مشاهده خواهید کرد.

Choose Options
اطمینان حاصل کنید که موارد را انتخاب کرده ، در صورت نیاز موارد را کپی کرده و گروه ها را ایجاد کنید. روی دکمه Finish کلیک کنید.

اکنون ، به Utility Pane → Object Library بروید و نماهای تصویر را جستجو کنید. نمای تصویر را به نمای خود بکشید. اکنون نمای شما باید مانند تصویر زیر باشد.

Ultimate View

اکنون، بر روی این View Image کلیک کنید ، فقط نمای خود را کشیده و سپس خواهید دید که در منطقه ابزار گزینه ای با نام “Image” برای انتخاب تصویر وجود دارد. روی آن پیکان کلیک کنید و تمام تصاویر موجود را مشاهده خواهید کرد. مطمئن شوید که این نمای تصویر تازه اضافه شده را انتخاب کرده اید.

Image View
اکنون که تصویر را برای نمای تصویر خود انتخاب کرده اید ، نمای نهایی شما باید مانند تصویر زیر باشد. این تنها کاری است که ما با main.storyboard برای این برنامه انجام خواهیم داد.

اکنون بعد از اضافه کردن تمام عناصر UI ، این View ماست.

UI Elements
پس از این ما یک کد منطقی از کد خود داریم که اگر این مرحله را کامل کنید ، ادامه خواهیم داد.

اکنون ، با کلیک روی دکمه دستیار ویرایشگر در گوشه سمت راست بالا (مانند تصویر زیر نشان داده شده) ، کنترل کننده مشاهده و ویرایشگر دستیار خود را انتخاب کنید.

Assistant Editor Button
اکنون، View ما باید مانند تصویر زیر باشد.

افزودن عملکرد به برنامه

تاکنون، برنامه ما فقط یک برنامه ثابت است که به هیچ چیزی پاسخ نمی دهد و در تعامل کاربر تغییری نمی کند.

اکنون قسمت اصلی اتصال عناصر UI به کد ما می آید و UI با توجه به ورودی کاربران تغییر می کند. پرونده “ViewController.swift” پرونده اصلی ماست که در آن برای نمای کنونی خود کد می نویسیم.

توجه – در حال حاضر ما در حال کار با نماهای منفرد هستیم ، بعداً وقتی در مورد چندین نمایش بحث می کنیم. ما در مورد چگونگی کنترل فایلهای مختلف از نمایشهای مختلف بحث خواهیم کرد

روی قسمت متن کلیک کنید، کنترل را فشار دهید و مکان نما را به قسمت دوم صفحه، یعنی فایل viewcontroller.swift بکشید. یک خط آبی مشاهده خواهید کرد که پرونده و فایل swift ما را متصل می کند. هنگامی که ماوس را رها می کنید ، یک پنجره بازشو می بینید که درخواست ورودی دارد.

Entered Age
نکته – قسمت Name را با هر نامی که به قسمت Input شما شباهت دارد پر کنید. یک نکته مهم این است که نام نمی تواند فاصله داشته باشد ، بنابراین می توانید آن را مانند آنچه در تصویر قبلی نشان داده شده است بنویسید ، یعنی اگر نام دارای چندین کلمه باشد ، کلمه اول باید با حروف کوچک نوشته شود ، سپس الفبای اول هر بعدی کلمه سرمایه خواهد بود

همان روش را دنبال کنید و بقیه عناصر را به هم متصل کنید. به یاد داشته باشید که برای یک قسمت متن و یک برچسب ، نوع آن Outlet است. با این حال ، هنگام اضافه کردن یک دکمه ، نوع باید مانند آنچه در تصویر زیر نشان داده شده است ، عمل باشد.

CalculatePressed
در این مرحله، viewcontroller.swift ما به نظر می رسد –

ViewControllerSwift
اکنون در داخل دکمه اقدام خود ، خطوط زیر را اضافه کنید –

var age = Int(enteredAge.text!)! * 8 
yearsLabel.text = String(age);

نکته – برای خاتمه دادن سریع به یک خط نیازی به افزودن نقطه ویرگول نداریم ، اما حتی اگر یک نقطه ویرگول هم قرار دهیم ، کامپایلر هیچ خطایی را گزارش نمی کند.

در کد بالا ، خط اول متغیر «سن» را اعلام می کند ، که در فصل بعدی به آن خواهیم پرداخت. سپس مقدار وارد شده توسط کاربر را با تبدیل آن به یک عدد صحیح و ضرب آن در ۸ نسبت می دهیم.

در خط دوم ، مقدار ‘age’ را به برچسب خروجی خود اختصاص می دهیم. در این مرحله ، کنترل کننده نمای ما به صورت زیر ظاهر می شود –

Assign Value Of Age

اکنون ، ما برنامه خود را اجرا خواهیم کرد و به این ترتیب ظاهر می شود.

Run Application
نکته – اگر صفحه کلید در اولین اجرا ظاهر نشد ، شبیه ساز خود را باز کنید ، روی سخت افزار کلیک کنید ، به صفحه کلید بروید و روی Toggle Software Keyboard کلیک کنید.

منبع.

لیست جلسات قبل آموزش توسعه iOS با Swift 2

برچسب ها : آموزش برنامه نویسی موبایل آموزش توسعه iOS با Swift 2

نویسنده مطلب erfan molaei

آموزش ساخت برنامه تعاملی در توسعه iOS با Swift 2