آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش تعریف Table View در Swift

تعریف Table View در Swift- ساخت یک scene با نمای جدولی

در این مبحث شما به ساخت صفحه ی اصلی اپلیکیشن FoodTracker خواهید پرداخت. پس از آن یک صفحه ی محتوا (scene) با نمای جدولی یا view-based table خواهید ساخت که غذاهای اضافه شده توسط کاربر را در خانه های جدول به نمایش می گذارد. همچنین خانه های جدول را با تنظیمات دلخواه خود پیاده سازی خواهید نمود که هر یک از غذاها در آن به صورت زیر نمایش داده می شود:
 Table View در Swift

آنچه خواهید آموخت
  1. یک scene (صفحه ی محتوا) دیگر به فایل storyboard خود اضافه نمایید.
  2. با اجزا و کامپوننت های اصلی یک table view (نمای جدولی) آشنا شوید.
  3. یک خانه ی جدول با تنظیمات دلخواه خود طراحی و ایجاد نمایید.
  4. با نقش delegate ها، حین کار با table view و منابع داده ای (data source) به خوبی آشنا شوید.
  5. داده های مورد نیاز را در قالب یک آرایه ذخیره کرده و با آن ها کار کنید.
  6. داده ها را به صورت داینامیک (در زمان اجرا) در نمای جدولی (table view) به نمایش بگذارید.

ساخت scene آغازین (اولین صفحه ی محتوا) اپلیکیشن FoodTracker

تا به اینجا، برنامه ی کاربردی FoodTracker فقط یک صفحه ی محتوا (scene) دارد که مدیریت آن همان طور که انتظار می رود بر عهده ی یک view controller است. این view controller نمایشگر یک صفحه است که به کاربر امکان می دهد غذای جدید به به لیست غذاهای جاری اضافه نموده و همچنین به غذای مورد نظر امتیاز دهد. در این مبحث یک صفحه ی محتوای دیگر ایجاد خواهید کرد که لیست تمامی غذاها را برای کاربر به نمایش می گذارد. خوشبختانه، در IOS کلاس درون ساخته ای تعبیه شده که امکان ایجاد لیست قابل پیمایش جهت نمایش فهرستی طولانی از آیتم ها (به همراه نوار پیمایش) را به راحتی برای شما فراهم می سازد. این کلاس table view (UITableView) نام دارد.
هر آبجکت table view به تبع توسط یک table view controller (UITableViewController) مدیریت می شود. table view controller یک کلاس مشتق یا ارث بری شده از UIViewController است که ویژه ی اداره ی منطق مربوط به table view طراحی و تنظیم شده است. صفحه محتوای (scene) جدید برنامه ی خود را بر اساس یک table view controller پی ریزی و طراحی خواهید کرد.
به منظور افزودن یک scene با نمای جدولی (table view) به فایل storyboard برنامه ی جاری خود، مراحل زیر را گام به گام دنبال نمایید:

  1. ابتدا storyboard خود، فایل Main.storyboard را باز کنید.
  2. کادر Object library را در utility area محیط کاری Xcode باز نمایید. (یا این مسیر را طی نمایید: View > Utilities > Show Object Library)
  3. در Object library، آبجکت Table View Controller را پیدا کرده و انتخاب نمایید.
  4. آبجکت Table View Controller را با اشاره گر موس از Object library کشیده و در سطح canvas، موجود در سمت چپ scene جاری (Meal scene) جایگذاری نمایید.

اگر یک table view به همراه محتوا مشاهده می کنید که به هنگام کشیدن به ناحیه ی canvas عکس العملی از خود نشان نمی دهد، احتمالا به این خاطر است که بجای table view controller، یک table view را بر روی سطح canvas کشیده اید. جالب است بدانید که table view زیرمجموعه ی کلاس table view controller است و تنها یکی از مولفه هایی است که توسط این کلاس مدیریت شده و در نهایت در اختیار شما قرار می گیرد. شما برای اپلیکیشن خود به کلاس table view controller که یک پکیج کامل است احتیاج دارید. به همین خاطر بایستی خود table view controller را یافته و در سطح canvas جایگذاری نمایید.
شما در حال حاضر دو صفحه ی محتوا دارید، یکی برای نمایش لیستی از غذا ها و دیگری برای افزودن غذای جدید به لیست غذاهای جاری.
بهتر است اولین صفحه ای که کاربر با اجرای برنامه ی شما مشاهده می کند یک لیست غذا (meal list) باشد. برای این منظور می بایست صفحه ی نمایش لیست غذاها را به وسیله ی ابزاری که محیط کاری Xcode در اختیار شما قرار می دهد، به عنوان صفحه اصلی برنامه ی خود انتخاب نمایید.
به منظور تنظیم table view controller به عنوان اولین صفحه ی محتوا برنامه ی خود، مراحل زیر را گام به گام دنبال نمایید:
1. اگر به فضای کاری بیشتری نیاز دارید، می توانید project navigator و utility area را با کلیک بر روی دکمه های مربوطه در نوارابزار محیط کاری Xcode (اشاره شده در تصویر زیر) پنهان نمایید:
Table View در Swift
2. در صورت لزوم، می توانید کادر outline view را نیز پنهان نمایید.
3. اولین صفحه محتوای برنامه (storyboard entry point) را از سطح meal scene (صفحه ای که امکان افزودن غذای جدید را به کاربر می دهد) کشیده و در table view controller جایگذاری نمایید.
Table View در Swift
با این کار table view controller به عنوان اولین view controller در storyboard انتخاب و تنظیم می شود، بدین معنی که به مجرد اجرای برنامه، اولین صفحه ای که برای کاربر به نمایش در می آید، table view controller و محتوای آن (لیست غذاها) است.
Table View در Swift

تست کنید :

اپلیکیشن خود را اجرا کنید. بجای meal scene (صفحه ی افزودن غذای جدید) که المان هایی نظیر text field، image view و rating control را در UI به نمایش می گذارد، بایستی یک table view (نمای جدولی) خالی از محتوا – صفحه ای با خطوط افقی که سطرهایی فاقد محتوا را ایجاد کرده اند – مشاهده نمایید.
Table View در Swift
برای اینکه table view فعلی دقیقا مناسب کار شما باشد و بتوانید آن را در برنامه ی خود استفاده کنید، لازم است تغییراتی در تنظیمات آن اعمال نمایید.
به منظور تنظیم table view، مراحل زیر را به ترتیب دنبال نمایید:
1. در فایل storyboard خود، outline view را باز کنید.
2. در کادر outline view، بر روی Table View کلیک نمایید.
Table view زیرمجموعه ی Table View Controller Scene > Table View Controller می باشد. برای مشاهده ی table view، کافی است بر روی آیکون مثلث شکلی که در کنار آبجکت های نام برده نمایش داده می شود، کلیک نمایید.
Table View در Swift
3. پس از کلیک بر روی table view و انتخاب آن، کادر Size inspector را از utility area باز کنید. یادآور می شویم که برای باز کردن کادر Size inspector، می بایست بر روی دکمه ی پنجم از سمت چپ در inspector selector bar کلیک نمایید. در این کادر می توانید اندازه و مکان قرارگیری آبجکت مورد نظر را در storyboard مطابق نیاز تنظیم نمایید.
Table View در Swift
4. داخل کادر Size inspector، اولین فیلد که Row Height نام دارد را یافته و مقدار 90 را در آن وارد نمایید. کلید Return را فشار دهید.
فعلا به این حد از تنظیمات table view بسنده می کنیم. پس از طراحی رابط کاربری table view (خانه های جدول) مجددا به تنظیمات این آبجکت در Size inspector خواهیم پرداخت.

طراحی اختصاصی خانه های جدول

برای مدیریت ظاهر سطرهای جدول در المان table view بایستی یک کلاس فرزند از کلاس UITableViewCell که وظیفه ی مدیریت خانه های جدول و محتوای درونی آن ها را بر عهده دارد ایجاد نمایید. این کلاس تعدادی رفتار از پیش تعریف شده و استایل (style) پیش فرض دارد. استایل پیش فرضی که این کلاس برای خانه های جدول ارائه می دهد در بیشتر موارد نیاز شما را برطرف می کند. اما اگر محتوایی که می خواهید در هر خانه ی جدول به نمایش بگذارید به فضای بیشتری نیاز دارد، آنگاه می بایست استایل خانه های جدول خود را تنظیم نمایید.
جهت ایجاد یک کلاس فرزند از UITableViewCell، مراحل زیر را دنبال کنید:

  1. ابتدا این مسیر را طی نمایید: File > New > File یا کلیدهای Command-N را فشار دهید.
  2. در سمت چپ کادر محاوره ای که نمایان می شود، source را از زیر IOS انتخاب نمایید.
  3. Cocoa Touch Class را انتخاب کرده و دکمه ی Next را کلیک نمایید.
  4. در فیلد Class، واژه ی Meal را درج نمایید.
  5. در فیلد “Subclass of”، کلاس UITableViewCell را انتخاب نمایید.
    عنوان کلاس به MealTableViewCell تغییر می کند. Xcode با تعیین اسم مرتبط صراحتا مشخص می کند که کلاس ایجاد شده از جنس UITableViewCell بوده و برای تنظیم دلخواه خانه های جدول می باشد. این اسم را تغییر ندهید.
  6. در فیلد Language، زبان پروژه را بر روی Swift تنظیم نمایید.
  7. بر روی Next کلیک کنید.
    محل ذخیره سازی فایل کلاس (save location) به صورت پیش فرض بر روی پوشه ی پروژه تنظیم می شود. گزینه ی Group به صورت پیش فرض با اسم اپلیکیشن شما، FoodTracker ، مقداردهی می شود.
    در بخش Targets، فقط کادر تیک اول باید انتخاب شده باشد.
  8. لازم نیست سایر گزینه هایی که به صورت پیش فرض مقداردهی شده اند را تنظیم نمایید.
    Xcode فایلی با مشخصات ارائه شده ایجاد می کند: . MealTableViewCell.swift

حال فایل Storyboard خود را باز نمایید.
اگر به scene دربردارنده ی view controller table در storyboard خود توجه کنید، می بینید که فقط یک خانه از جدول به نمایش می گذارد.
Table View در Swift
این خانه به منزله ی یک نمونه ی اولیه یا الگو جهت ساخت دیگر خانه های جدول محسوب می شود. ظاهر و رفتاری که برای این خانه از جدول تعیین می کنید، توسط دیگر خانه های جدول در table view ارث بری می شود. در وهله ی اول بایستی خانه ی نمونه را به صورت دلخواه تنظیم نمایید.
برای این منظور، لازم است خانه ی المان table view را در scene به کلاس اختصاصی خود که رفتار و ظاهر خانه ی جدول را می خواهید در آن پیاده سازی کنید، متصل نمایید.
به منظور تنظیم خانه ی جدول مطابق نیاز خود، مراحل زیر را دنبال نمایید:
1. در کادر outline view، بر روی Table View Cell کلیک نمایید.
خانه ی جدول مورد نظر زیرمجموعه ی گره های Table View Controller Scene > Table View Controller > Table View محسوب می شود. برای مشاهده و دسترسی به خانه ی جدول (table view cell)، لازم است بر روی آیکون های مثلثی شکل مربوطه کلیک نمایید.
Table View در Swift
2. پس از کلیک بر روی table view cell و انتخاب آن، کادر Attributes inspector را از utility area باز نمایید.
3. در کادر Attribute inspector، فیلدی که Identifier نام دارد را پیدا کرده و MealTableViewCell را وارد نمایید. حال کلید Return را فشار دهید.
4. در Attribute inspector، فیلدی که Selection نام دارد را پیدا کرده و گزینه ی None را از آن انتخاب نمایید. با انتخاب این گزینه، زمانی که کاربر بر روی خانه ی جدول کلیک می کند، خانه ی جدول هایلایت نمی شود.
5. اکنون کادر Size inspector را باز نمایید.
6. در Size inspector، فیلدی که Row Height نام دارد را پیدا کرده، مقدار 90 را وارد نمایید.
در کنار این فیلد یک کادر تیک به نام Custom وجود دارد. آن را فعال نمایید:
Table View در Swift
کلید Return را فشار داده تا خانه ی جدول با مقدار طول جدید تنظیم شده و نمایش داده شود.
7. کادر Identity inspector را باز نمایید.
یادآور می شویم که identity inspector به شما اجازه می دهد تا property های یک آبجکت را که مربوط به identity آن می باشند، نظیر این که آبجکت مورد نظر از روی کدام کلاس ساخته شده یا به کدام کلاس تعلق دارد را ویرایش نمایید.
8. در کادر Identity inspector، فیلدی با نام Class را پیدا کرده و از منوی آن، آیتم MealTableViewCell را انتخاب نمایید.
Table View در Swift

پس از انجام تنظیمات مربوطه به این خانه از جدول، می توانید ظاهر و UI دلخواه خود را برای آن مستقیما در storyboard طراحی کنید. در این خانه از جدول اسم، عکس و امتیاز غذا به نمایش گذاشته شده است. ظاهر خانه ی جدول مشابه زیر خواهد بود:
Table View در Swift
همان طور که در تصویر فوق مشاهده می کنید، به یک label، image view و rating control نیاز دارید. می توانید کنترل امتیازدهی که در مباحث قبلی ایجاد کرده و آماده دارید را مجددا برای این بخش مورد استفاده قرار دهید.
جهت طراحی UI خانه ی جدول با ظاهر اختصاصی و دلخواه خود، می بایست مراحل زیر را دنبال نمایید:
1. ابتدا این مسیر را طی کرده: Editor > Canvas > Show Bounds Rectangles تا لبه های المان مورد نظر در UI دقیقا مشخص گشته، ترازبندی و چیدمان آیتم ها در خانه ی جدول مورد نظر به مراتب آسان تر شود.
Table View در Swift
2. آبجکت Image View را از Object library انتخاب کرده و آن را با استفاده از اشاره گر موس بر روی خانه ی جدول جایگذاری نمایید.
3. Image view را با اشاره گر موس کشیده و آن را طوری تنظیم کنید قالب یک مربع را به خود بگیرد و هم سطح با لبه ی سمت چپ، بالا و پایین خانه ی جدول قرار گیرد.
Table View در Swift
4. اگر در مبحث قبلی عکس پیش فرض به پروژه خود اضافه نکردید، اکنون آن را به المان image view الحاق نمایید.
5. پس از انتخاب image view، کادر Attribute inspector را در utility area محیط کاری Xcode باز نمایید.
6. داخل Attribute inspector، فیلدی که Image نام دارد را یافته و گزینه ی defaultPhoto را در آن انتخاب نمایید.
Table View در Swift
7. آبجکت label را از Object library کشیده و آن را در سطح خانه ی جدول مورد نظر جایگذاری کنید.
8. اکنون آبجکت مزبور را با اشاره گر موس کشیده و آن را هم تراز با حاشیه ی (margin) بالا خانه ی جدول، سمت راست المان image view قرار دهید.
Table View در Swift
9. لبه ی سمت راست المان Label را با اشاره گر کشیده و تا حاشیه ی سمت چپ خانه ی جدول آن را بکشید.
Table View در Swift
10.حال زمان آن رسیده که یک آبجکت ساده ی View را از Object library انتخاب کرده و آن را در سطح خانه ی جدول جایگذاری نمایید.
11. پس از انتخاب View نام برده، کادر Size inspector را جهت تنظیم اندازه ی المان مورد نظر در utility area محیط کاری Xcode باز نمایید.
12.داخل کادر Size inspector، مقدار 44 را جهت تنظیم طول المان در فیلد Height و 240 را جهت تنظیم پهنا در فیلد Width وارد نمایید.
13.View را کشیده و در زیر المان label، همتراز با حاشیه ی سمت چپ آن قرار دهید.
Table View در Swift
14.پس از انتخاب view، کادر Identity inspector را باز نمایید.
15.داخل کادر Identity inspector، فیلدی که Class نام دارد را یافته و RatingControl را از آن انتخاب نمایید.
Table View در Swift
در صورتی که کلاس RatingControl به عنوان آیتم قابل گزینش در منوی pop-up در دسترس نبود، آنگاه بایستی به canvas مراجعه نموده و المان مربوطه را اتخاب نمایید (المانی که در تصویر قبلی، دستگیره های تنظیم اندازه بر روی لبه های آن نمایان می باشد.)
16.در حالی که view را انتخاب کرده، کادر Attribute inspector را باز نمایید.
17.داخل کادر Attribute inspector، فیلدی که Interaction نام دارد را یافته و تیک چک باکس User Interaction را بردارید.
اگر بخاطر داشته باشید کلاس rating control اختصاصی را طوری تنظیم کردید که قابلیت تعامل با کاربر را داشته باشد. اما زمانی که این rating control (کنترل امتیازدهی) را در خانه ی جدول به نمایش می گذارید، دیگر نیازی به تعامل با کاربر ندارد. لازم است قابلیت تعامل با کاربر را از این المان، در بستر جاری (داخل خانه ی جدول)، سلب نمایید.

در حال حاضر UI اپلیکیشن شما بایستی ظاهری مشابه زیر داشته باشد:
Table View در Swift

تست کنید :

برنامه ی خود را اجرا نمایید. دو خط بالا و پایین سطرهای (خانه ها) table view شما بایستی با فاصله ی بیشتری از هم نمایش داده شوند (ارتفاع هر خانه می بایست افزایش یافته باشد). اگر خوب دقت کنید، متوجه می شوید که اگر چه تمامی المان های مورد نیاز UI را اضافه کرده اید، با این وجود سطرهای جدول، درست مانند قبل، همگی خالی از محتوا نمایش داده می شوند. علت آن چیست؟
Table View در Swift
در storyboard، می توان یک table view را طوری تنظیم کرد که داده ها را به صورت static نمایش دهد (داده هایی که از داخل رابط کاربری storyboard به جدول اضافه می شود را به کاربر نشان دهد) یا آن ها را به صورت داینامیک از data model خوانده و در زمان اجرا به نمایش بگذارد (داده ها را از منطقtable view controller بگیرد). Table view به صورت پیش فرض داده های داینامیک را نمایش می دهد و از آنجایی که باید اطلاعات را از طریق کد در حافظه بارگذاری کنید، دقیقا همین کار را هم از المان ذکر شده انتظار دارید – اما یک جای کار مشکل دارد: رفتار دلخواه برای این منظور را هنوز پیاده سازی نکرده اید. به عبارت دیگر داده های static که در storyboard به جدول اضافه کردید، در زمان اجرای اپلیکیشن نمایش داده نمی شود – مگر اینکه data model که داده های اپلیکیشن را کپسوله سازی کرده و در خود نگه می دارد را پیاده سازی نمایید.
فعلا، با استفاده از assistant editor (ویرایشگر کمکی محیط کاری Xcode)، نمای موقتی UI خود را مشاهده نمایید. جهت پیش مشاهده ی UI اپلیکیشن، مراحل زیر را دنبال نمایید:
1. با کلیک بر روی دکمه ی Assistant در نوار ابزار Xcode، ویرایشگر کمکی محیط را باز کنید.
Table View در Swift
2. اگر به فضای کاری بیشتری نیاز دارید، می توانید project navigator و utility area را با کلیک بر روی دکمه های مربوطه ی آن در نوار ابزار محیط Xcode ببندید.
Table View در Swift
در صورت نیاز به فضای بیشتر، می توانید کادر view outline را نیز ببندید.
در editor selector bar که در بالای ویرایشگر کمکی محیط نمایش داده می شود، با انجام این عملیات: Automatic to Preview > Main.storyboard (Preview)، ویرایشگر کمکی را از حالت Automatic بر روی Preview تنظیم نمایید.
Table View در Swift
پنجره ی محیط توسعه ی Xcode هم اکنون می بایست مشابه زیر باشد:
Table View در Swift
همان طور که می بینید، نمای preview ویرایشگر کمکی، UI را دقیقا به صورت مورد انتظار نمایش می دهد. پیش نمونه ی خانه جدول/المان table view در UI اکنون دیگر کامل به نظر می رسد.

افزودن عکس به پروژه

در گام بعدی، بایستی تعدادی عکس ساده به پروژه ی خود اضافه نمایید. این عکس ها را دقیقا زمانی که داده های اولیه ی meal را در اپلیکیشن بارگذاری می کنید، مورد استفاده قرار خواهید داد.
می توانید برای عکس به پوشه ی Images/ که پس از دانلود فایل پروژه در اختیار شما قرار می گیرد، مراجعه نمایید. یا از عکس های دلخواه خود استفاده کنید (فقط به یاد داشته باشید که اسم عکس های مورد استفاده باید با اسم عکس ها در کد همخوانی داشته باشد).
جهت افزودن عکس به پروژه، مراحل زیر را دنبال نمایید:
1. در صورت باز بودن ویرایشگر کمکی محیط، با کلیک بر روی دکمه ی Standard در نوار ابزار Xcode، ویرایشگر اصلی محیط را باز کنید.
حال project navigator و utility area را با کلیک بر روی دکمه های مربوطه در نوار ابزار Xcode، باز نمایید.
Table View در Swift
2. در project navigator، با کلیک بر روی فایل Assets.xcassets، ابزار asset catalog را جهت مشاهده ی محتوای آن باز نمایید.
اگر بخاطر داشته باشید، asset catalog بستری است که در آن فایل های محتوای برنامه خود نظیر عکس را ذخیره یا مدیریت می کنید.
3. در پایین، گوشه ی سمت چپ، بر روی علامت (+) کلیک نمایید و سپس New Folder را از منوی pop-up که نمایان می شود، انتخاب نمایید.
4. بر روی اسم پوشه دوبار کلیک کرده و سپس آن را به Sample Images تغییر دهید.
5. پس از انتخاب پوشه، در پایین، گوشه ی سمت چپ، بر روی علامت (+) کلیک نمایید و سپس New Image Set را از منوی pop-up گزینش نمایید.
6. بر روی اسم image set دوبار کلیک نمایید. اسم image set را طوری انتخاب کنید که به هنگام ذکر آن در کدنویسی با مشکل مواجه نشوید.
7. عکس مورد نظر را از حافظه ی کامپیوتر انتخاب نمایید.
8. عکس را با اشاره گر موس کشیده و آن را در جایگاه خالی 2x، داخل image set جایگذاری نمایید.
مراحل 5 تا 8 را برای افزودن هر تعداد عکس که لازم دارید، تکرار نمایید. برای این مبحث سه عکس مختلف از کامپیوتر خود انتخاب نموده و به پروژه اضافه کنید.
Table View در Swift

ایجاد اتصال بین UI و کد به وسیله ی outlet (وصل کردن UI نمای جدولی به کد)


برای اینکه بتوانید داده های خود را داخل خانه های جدول در زمان اجرای اپلیکیشن به صورت داینامیک نمایش دهید، بایستی با استفاده از outlet بین view ها در storyboard و کد کلاس table view cell در فایل MealTableViewCell.swift اتصال ایجاد نمایید.
جهت متصل کردن view ها به کد موجود در فایل MealTableViewCell.swift، مراحل زیر دنبال نمایید:
1. داخل storyboard، آبجکت label را در table view cell (خانه جدول) انتخاب نمایید.
2. بر روی دکمه ی Assistant در نوار ابزار Xcode کلیک نموده و ویرایشگر کمکی محیط را باز نمایید.
Table View در Swift
3. در صورت نیاز به فضای کاری بیشتر، project navigator و utility area را با کلیک بر روی دکمه های مربوطه در نوار ابزار محیط کاری Xcode پنهان نمایید.
Table View در Swift
4. در editor selector bar (نوار ابزاری که در بالای ویرایشگر کمکی محیط به نمایش در می آید)، حالت assistant editor را از Preview به Automatic تغییر دهید (Preview> Automatic > MealTableViewCell.swift).
Table View در Swift
محتوای فایل MealTableViewCell.swift در ویرایشگر کمکی، سمت راست محیط کاری Xcode به نمایش در می آید.
5. داخل کدهای فایل MealTableViewCell.swift، خط تعریف کلاس را پیدا کنید:

            class MealTableViewCell: UITableViewCell {

6. در زیر خط تعریف کلاس، یک comment به صورت زیر درج نمایید:

           // MARK: Properties

7. بر روی آبجکت label در canvas کلیک کنید. سپس آن را به ناحیه ی ویرایش کد در سمت راست محیط کشیده و در زیر خط comment درج شده، داخل فایل MealTableViewCell.swift جایگذاری نمایید.
Table View در Swift
8. در کادر محاوره ای که نمایان می شود، داخل فیلد Name واژه ی nameLabel را به عنوان اسم outlet وارد نمایید.
به تنظیمات دیگری نیاز نیست. هم اکنون کادر محاوره ای اتصال از UI به کد، بایستی به صورت زیر مقداردهی شده باشد:
Table View در Swift
9. دکمه ی Connect را کلیک کنید.
10. در storyboard، بر روی المان image view داخل خانه ی جدول (table view cell) کلیک نموده و آن را انتخاب کنید.
11. حال المان image view را از سطح canvas با اشاره گر موس کشیده و داخل ناحیه ی ویرایش کد، سمت راست محیط در زیر متغیر (property) nameLabel (در فایل MealTableViewCell.swift) جایگذاری نمایید.
Table View در Swift
12. در کادر محاوره ای که نمایان می شود، داخل فیلد Name، واژه ی photoImageView را به عنوان اسم outlet جدید وارد نمایید.
لازم به انجام تنظیمات دیگری نیست. کافی است بر روی دکمه ی Connect جهت اتصال برقرار کردن بین UI و کد کلیک نمایید. Table View در Swift
13. این بار در storyboard، بر روی کنترل امتیازدهی (rating control) داخل خانه ی جدول (table view cell) کلیک نمایید.
14.کنترل نام برده را از سطح canvas با موس کشیده و در ناحیه ی ویرایش کد در سمت راست محیط، زیر متغیر (property) photoImageView جایگذاری نمایید (در فایل MealTableViewCell.swift).
Table View در Swift
15. در کادر محاوره ای اتصال از UI به کد، داخل فیلد Name، واژه ی ratingControl را وارد نمایید.
به تنظیمات دیگر احتیاجی نیست. کافی است بر روی دکمه ی Connect جهت برقراری اتصال کلیک نمایید.
Table View در Swift
در حال حاضر متغیرهایی که در قالب outlet داخل فایل MealTableViewCell.swift تعریف کردید، می بایست به ترتیب زیر باشد:

                
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var photoImageView: UIImageView!
@IBOutlet weak var ratingControl: RatingControl!
     
                

بارگذاری داده های اولیه ی اپلیکیشن

جهت نمایش داده های مورد نظر در خانه ی های جدول (table view)، لازم است کدی بنویسید که این داده ها را بارگذاری کند. اگر به خاطر داشته باشید در مبحث قبلی یک data model برای اپلیکیشن خود طراحی کردید که داده های برنامه را موقتا ذخیره کرده و در اختیار UI قرار می دهد: اسم این data model، کلاس Meal بود. همچنین شما برای برنامه ی کاربردی خود به یک لیست احتیاج دارید که اطلاعات مربوط به غذاها را در آن نگه دارید. ناگفته پیدا است که مکان مشخص برای نگهداری و رصد این اطلاعات یک کلاس فرزند view controller با پیاده سازی اختصاصی (custom view controller subclass) است که به meal list (لیست نگه داری غذاها) متصل می باشد.
کلاس view controller ای که از آن سخن به میان آمد، وظیفه ی مدیریت view ای را بر عهده دارد که لیست غذاها را برای کاربر در UI به نمایش می گذارد و علاوه بر آن اشاره گری (reference) به data model دارد که اطلاعات مورد نیاز UI را فراهم می کند.
ابتدا می بایست یک کلاس فرزند از کلاس table view controller با پیاده سازی اختصاصی خود ایجاد نمایید که مدیریت صفحه محتوایی که لیست غذاها را نمایش می دهد (meal list scene) بر عهده دارد.
به منظور ایجاد یک subclass از کلاس UITableViewController، مراحل زیر را دنبال نمایید:

  1. این مسیر را طی نمایید: File > New > File یا کلیدهای Command-N را همزمان فشار دهید.
  2. کادر محاوره ای نمایان می شود. در سمت چپ این کادر محاوره ای، گزینه ی Source را از زیر IOS انتخاب نموده، سپس Cocoa Touch Class را انتخاب کنید.
  3. حال دکمه ی Next را کلیک نمایید.
  4. در فیلد Class، واژه ی Meal را وارد نمایید.
  5. از فیلد "Subclass of field"، گزینه ی UITableViewController را انتخاب نمایید.
    عنوان کلاس به MealTableViewController تغییر می کند. لازم نیست در آن تغییری ایجاد کنید.
  6. گزینه ی “Also create XIB file” را از حالت انتخاب خارج نمایید.
  7. زبان پروژه را بر روی Swift تنظیم نمایید (گزینه ی Language می بایست بر روی Swift تنظیم باشد).
  8. بر روی دکمه ی Next کلیک نمایید.
    محل ذخیره سازی (save location) فایل ها به صورت پیش فرض بر روی پوشه ی پروژه (project directory) تنظیم می شود.
    گزینه ی Group به صورت پیش فرض بر روی اسم اپلیکیشن، FoodTracker، تنظیم می شود.
    در بخش Targets، کادر تیک برای اپلیکیشن شما باید انتخاب شده باشد و کادر تیک دوم که مربوط به unit test برای برنامه ی شما است باید غیرفعال باشد.
  9. گزینه هایی که با مقادیر پیش فرض تنظیم شده اند را تغییر ندهید. اکنون دکمه ی Create را فشار دهید. محیط Xcode فایل MealTableViewController.swift را ایجاد می کند. این فایل دربردارنده ی کدی است که کلاس فرزند از UITableViewController با پیاده سازی اختصاصی را تعریف می کند.

در این subclass که دارای پیاده سازی اختصاصی شما است، می توانید یک متغیر (property) تعریف کنید که لیستی از آبجکت های Meal را در خود نگه می دارد. کتابخانه ی متعارف Swift/Swift standard library دربردارنده ی ساختاری به نام Array هست که ویژه ی ذخیره ی لیستی مرتب از مقادیر تعبیه شده.
برای بارگذاری داده های اولیه ی اپلیکیشن، مراحل زیر را دنبال نمایید:
1. در صورت باز بودن ویرایشگر کمکی محیط (assistant editor)، با کلیک بر روی دکمه ی Standard، ویرایشگر اصلی Xcode را باز نمایید.
Project navigator و utility area را با کلیک بر روی دکمه های مربوطه در نوارابزار محیط کاری Xcode، باز نمایید.
Table View در Swift
2. فایل MealTableViewController.swift را باز نمایید.
3. در زیر خط تعریف کلاس داخل فایل مذکور، کد زیر را وارد نمایید:

                   
// MARK: Properties
var meals = [Meal]()
                     

توسط این کد یک متغیر (property) به نام meals از نوع آرایه تعریف کرده و آن را با یک مقدار پیش فرض (آرایه ی تهی از آبجکت های meal) مقدار دهی اولیه می کنید. همان طور که می بینید property بجای let (به صورت ثابت) با کلیدواژه ی var و از نوع متغیر تعریف شده چرا که با استفاده از کلیدواژه ی var، در واقع شما آرایه ی مورد نظر را به صورت mutable و تغییر پذیر تعریف می کنید. بدین معنی که بعده ها (پس از مقداردهی اولیه) می توانید آیتم هایی به آن اضافه کرده یا از آن حذف نمایید.
4. در فایل MealTableViewController.swift، پس از تعریف متد viewDidLoad()، تابع زیر را اضافه نمایید:

    
func loadSampleMeals() {
}
           

این متد در حقیقت یک تابع کمکی است که داده های نمونه را در اپلیکیشن بارگذاری می کند.
5. در بدنه ی متد loadSampleMeals()، با اضافه کردن این کد تعدادی آبجکت Meal ایجاد نمایید. می توانید این غذاهای نمونه را خود هر طور که مایلید نام گذاری و امتیازدهی نمایید. در زیر نمونه هایی ارائه شده که در صورت تمایل می توانید از آن ها استفاده کنید.

    
let photo1 = UIImage(named: "meal1")!
let meal1 = Meal(name: "Caprese Salad", photo: photo1, rating: 4)!
let photo2 = UIImage(named: "meal2")!
let meal2 = Meal(name: "Chicken and Potatoes", photo: photo2, rating: 5)!
let photo3 = UIImage(named: "meal3")!
let meal3 = Meal(name: "Pasta with Meatballs", photo: photo3, rating: 3)!
           

دقت داشته باشید که اسم تصاویر در پروژه بایستی با اسمی که در کد می نویسید همخوانی داشته باشد.
6. پس از ایجاد آبجکت های Meal، آن ها را با استفاده از این کد به آرایه ی meals اضافه نمایید:

    
            meals += [meal1, meal2, meal3]
           

متد viewDidLoad() را پیدا کنید. پیاده سازی که به عنوان الگو و آماده برای این متد ارائه می شود (template implementation)، به صورت زیر می باشد:

    
override func viewDidLoad() {
super.viewDidLoad()
// Uncomment the following line to preserve selection between presentationsخط زیر را از حالت کامنت خارج نموده تا انتخاب بین نمایش ها ثابت بماند.
// self.clearsSelectionOnViewWillAppear = false
// Uncomment the following line to display an Edit button in the navigation bar for this view controller. این کد را از حالت کامنت خارج نموده تا یک دکمه ی ویرایش در نوارپیمایش به نمایش در آید.
// self.navigationItem.rightBarButtonItem = self.editButtonItem()
}
           

محیط توسعه ی Xcode به هنگام ایجاد فایل MealTableViewController.swift، پیاده سازی هایی را به صورت آماده و در قالب comment همراه این متد ارائه می دهد. کدهایی که به صورت comment مانند نمونه ی فوق در اختیار شما قرار می گیرد، اطلاعات و سرنخ های بسیار مفیدی مرتبط با شرایط جاری برای شما فراهم می کند. برای مبحث فعلی نیازی به این پیاده سازی ها نیست، می توانید آن ها را حذف نمایید.
7. Comment های موجود در بدنه ی متد viewDidLoad() را حذف نموده و بجای آن، کد زیر را پس از خط فراخوانی متد super.viewDidLoad()، جهت بارگذاری داده های نمونه درج نمایید:

    
// Load the sample data.
loadSampleMeals()
           

این کد، متد کمکی (helper method) را که شما جهت بارگذاری داده های نمونه اعلان نمودید، همزمان با بارگذاری view فراخوانی می کند. این متد را به صورت مجزا و در کد مختص به خود قرار دادید تا بدین وسیله متن برنامه (source code) خواناتر شده و اپلیکیشن شما دارای طراحی ماژولار باشد.
متد viewDidLoad() هم اکنون می بایست دارای پیاده سازی زیر باشد:

    
override func viewDidLoad() {
super.viewDidLoad()
// Load the sample data.
loadSampleMeals()
}
و بدنه ی متد loadSampleMeals() شما باید مشابه زیر باشد:
    
func loadSampleMeals() {
let photo1 = UIImage(named: "meal1")!
let meal1 = Meal(name: "Caprese Salad", photo: photo1, rating: 4)!
let photo2 = UIImage(named: "meal2")!
let meal2 = Meal(name: "Chicken and Potatoes", photo: photo2, rating: 5)!
let photo3 = UIImage(named: "meal3")!
let meal3 = Meal(name: "Pasta with Meatballs", photo: photo3, rating: 3)!
meals += [meal1, meal2, meal3]
}
تست کنید :

اکنون پروژه ی خود را با طی کردن مسیر رو به رو کامپایل نمایید: Product > Build. پروژه بایستی بدون خطا کامپایل شود.

نکته:

در صورت برخورد با خطاهای زمان کامپایل پروژه، ابتدا باید اسم تصاویر در پروژه را با اسم تصاویر در کد مطابقت داده و از همخوانی آن ها اطمینان حاصل نمایید.

به نمایش گذاشتن داده ها در UI

در حال حاضر، کلاس ارث بری شده از کلاس UITableViewController که پیاده سازی آن را خود به صورت اختصاصی انجام دادید، دارای یک آرایه ی تغییر پذیر (mutable array) است که با داده های نمونه پر شده. اکنون زمان آن رسیده که این داده های نمونه را در رابط کاربری برنامه به نمایش بگذارید.
برای اینکه یک table view بتواند داده ها را به صورت dynamic و در زمان اجرای اپلیکیشن نمایش دهد، به همکاری دو مولفه رو به رو احتیاج دارد: 1. Data source 2. Delegate. Data source همان طور که از اسم آن پیداست، منبعی است که table view داده های خود را از آن می گیرد و نمایش می دهد. Delegate به table view کمک می کند مواردی همچون انتخاب خانه ی جدول، تنظیم فاصله بین دو خط یک سطر (row height) و دیگر جنبه های مربوط به نمایش داده های اپلیکیشن را مدیریت کند. به صورت پیش فرض، کلاس UITableViewController و کلاس های مشتق شده از آن (subclass های آن)، protocol های مورد نیاز را پیاده سازی کرده (این protocol ها را به خط تعریف کلاس اضافه کرده) و این کلاس را همزمان به یک (UITableViewDataSource) data source و (UITableViewDelegate) delegate برای table view مربوطه تبدیل می کند. وظیفه ی شما این است که متدهای مورد نیاز را از پروتکل های نام برده پیاده سازی کنید تا کلاس فرزند table view شما رفتار مورد نظر را از خود نشان دهد.
یک table view برای کارکرد صحیح خود در کل به پیاده سازی سه متد از پروتکل UITableViewDataSource نیاز دارد. این متدها به شرح زیر می باشند:

    
func numberOfSectionsInTableView(tableView: UITableView) -> Int
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell

اولین متدی که باید پیاده سازی شود، numberOfSectionsInTableView(_:) است که به table view اعلان می کند که چند بخش (section) را باید نمایش دهد. بخش یا section ها گروه هایی از خانه های قابل مشاهده در table view هستند که برای منظور نمایش انبوه داده بسیار مناسب می باشند. برای table view ساده ی اپلیکیشن FoodTracker نمایش یک بخش کفایت می کند. از اینرو پیاده سازی متد numberOfSectionsInTableView(_:) از پروتکل UITableViewDataSource آسان خواهد بود.
به منظور نمایش یک بخش (section) در table view مراحل زیر را گام به گام دنبال نمایید:
1. داخل فایل MealTableViewController.swift، متد numberOfSectionsInTableView(_:) را پیدا کنید. پیاده سازی که به صورت آماده توسط Xcode ارائه می شود، به صورت زیر می باشد:

    
 override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 0
}

2. مقدار بازگشتی را از 0 به 1 تغییر داده، سپس comment را حذف نمایید.

    
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}

این کد به table view اعلان می دارد که باید بجای 0، یک بخش (section) نمایش دهد. Comment را به این خاطر حذف کردید که پیاده سازی متد را با تغییراتی که در بالا اعمال کردید، تکمیل نموده و دیگر نیازی به comment نیست.
متد بعدی که از پروتکل UITableViewDataSource پیاده سازی خواهید کرد، تابع tableView(_:numberOfRowsInSection:) است. این تابع به table view اعلان می دارد که در هر بخش می بایست چند سطر نمایش دهد.
Table viewدر حالت پیش فرض تنها یک بخش نمایش می دهد. برای اپلیکیشن FoodTracker نیز دقیقا به یک بخش نیاز دارید. هر غذا باید داخل بخش مورد نظر، در سطر مجزا نمایش داده شود. به عبارت دیگر، تعداد سطرها باید با تعداد آبجکت های Meal در آرایه ی meals برابر باشد.
به منظور بازگردانی و مشاهده ی تعداد سطرهای موجود در table view، مراحل زیر را دنبال نمایید:
1. داخل فایل MealTableViewController.swift، متد tableView(_:numberOfRowsInSection:) را پیدا کنید. پیاده سازی که به صورت آماده ارائه می شود، به صورت زیر می باشد:

    
 override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return 0
}
}

می خواهید تعداد meal های موجود در آرایه را در خروجی برگردانید. نوع داده ای Array یک property به نام count دارد که تعداد آیتم های موجود در آرایه را به عنوان خروجی برمی گرداند. بنابراین تعداد سطرهای موجود در آرایه meals را با درج دستور meals.count می توانید در خروجی داشته باشید.
2. متد tableView(_:numberOfRowsInSection:) را طوری ویرایش کنید که تعداد صحیح سطرها را در خروجی برگرداند. همچنین comment ای که همراه این متد ارائه می شود را حذف نمایید.

    
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return meals.count
}

آخرین متد از پروتکل UITableViewDataSource که باید پیاده سازی کنید، تابع tableView(_:cellForRowAtIndexPath:) است که یک خانه از جدول را پیکربندی کرده و در سطر مورد نظر نمایش می دهد. به ازای هر سطر در table view یک خانه وجود دارد و آن خانه محتوایی که در سطر جدول نمایش داده شده و نحوه ی چیدمان آن را تعیین می کند. در یک table view که تعداد اندکی سطر دارد، تمامی سطرها احتمالا یکجا در صفحه نمایش داده می شوند، از اینرو این متد به ازای هر سطر در جدول فراخوانی می گردد. اما در جداولی که تعدادی زیادی سطر دارند، قضیه کمی فرق می کند. به عبارت دیگر جداول بزرگ با سطرهای متعدد در یک برهه ی زمانی مشخص تنها تعداد محدودی از کل آیتم های خود را در صفحه به نمایش می گذارند. در چنین مواردی بهتر است table view درخواست نمایش آن خانه هایی از جدول را بدهد که سطرهای آن در حال نمایش هستند. جالب است بدانید که متد tableView(_:cellForRowAtIndexPath:) دقیقا امکان انجام همین عملیات را برای شما فراهم می آورد.
خانه ی هر سطر جدول (table view) را با واکشی المان Meal متناظر (مربوطه) در آرایه ی meals و سپس برابر قرار دادن property های خانه ی جدول با مقادیر از کلاس Meal تنظیم و پیکربندی می کنید.
جهت تنظیم و نمایش خانه های جدول در table view، مراحل زیر را به ترتیب دنبال نمایید:
1. داخل فایل MealTableViewController.swift، متد tableView(_:cellForRowAtIndexPath:) را پیدا کرده و از حالت comment خارج نمایید. برای خارج نمودن متد از حالت comment، کافی است /* و */ را از اطراف آن حذف نمایید. پس از حذف دو کاراکتر مزبور، پیاده سازی الگو (template Implementation) متد به صورت زیر خواهد بود:

    
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("reuseIdentifier", forIndexPath: indexPath)
// Configure the cell...
return cell
}
}

پیاده سازی الگو (template implementation) وظایف متعددی را انجام می دهد که از جمله ی آن می توان به موارد زیر اشاره کرد: از table view می خواهد آن خانه ای که دارای یک placeholder identifier هست را در اختیارش قرار دهد، یک comment در خصوص اینکه کد تنظیم کننده ی خانه ی جدول کجا باید قرار گیرد، اضافه نموده و سپس خانه ی مورد نظر را از جدول (table view) برمی گرداند. برای اینکه کد طبق نیاز برای اپلیکیشن شما کار کند، می بایست placeholder identifier را به آنچه قبلا در storyboard برای خانه ی نمونه (MealTableViewCell) تنظیم کرده بودید، تغییر دهید. سپس کدی اضافه نمایید که خانه ی جدول را تنظیم می کند.
2. کد زیر را به ابتدای بدنه ی متد مانند زیر اضافه نمایید:

    
// Table view cells are reused and should be dequeued using a cell identifier.
let cellIdentifier = "MealTableViewCell"

این کد یک ثابت (constant) با شناسه ای که در storyboard تنظیم کرده بودید، ایجاد می کند.
3. Placeholder identifier (اسمی که به عنوان مکان نگهدار تعریف کرده بودید) را به آن identifier ای که در storyboard تعریف کرده بودید، تغییر دهید. دومین خط کد در بدنه ی متد بایستی مشابه زیر باشد:

    
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath)

از آنجایی که قبلا یک کلاس با پیاده سازی سفارشی از UITableViewCell ایجاد کردید، این امکان برای شما وجود دارد که نوع کلاس ایجاد شده را به کلاس فرزند از UITableViewCell با پیاده سازی اختصاصی، MealTableViewCell، تبدیل (downcast) نمایید. دومین خط از بدنه ی متد هم اکنون می بایست به صورت زیر باشد:

    
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! MealTableViewCell

4. در زیر خط قبلی، کد زیر را اضافه نمایید:

    
// Fetches the appropriate meal for the data source layout.
let meal = meals[indexPath.row]

این کد آیتم مربوطه ی meal را از آرایه ی meals واکشی می کند.
5. خط // Configure the cell را حذف نموده و بجای آن این کد را درج نمایید:

    
cell.nameLabel.text = meal.name
cell.photoImageView.image = meal.photo
cell.ratingControl.rating = meal.rating

این خط کد تک تک view های موجود در خانه ی جدول را طوری تنظیم می کند که داده های مربوطه را از ثابت meal نمایش دهد.
متد tableView(_:cellForRowAtIndexPath:) هم اکنون بایستی مشابه زیر باشد:

    
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
// Table view cells are reused and should be dequeued using a cell identifier.
let cellIdentifier = "MealTableViewCell"
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! MealTableViewCell
// Fetches the appropriate meal for the data source layout.
let meal = meals[indexPath.row]
cell.nameLabel.text = meal.name
cell.photoImageView.image = meal.photo
cell.ratingControl.rating = meal.rating
return cell
}

آخرین مرحله برای نمایش داده ها در UI اپلیکیشن FoodTracker این است که کد موجود در فایل MealTableViewController.swift را به صفحه محتوای نمایش لیست غذاها (meal list storyboard scene) متصل نمایید.
برای اینکه صفحه متحوای نمای جدولی لیست غذاها (table view controller scene) به کد موجود در فایل متصل شده و به آن اشاره داشته باشد، مراحل زیر را دنبال نمایید:
1. ابتدا storyboard را باز نمایید.
2. با کلیک بر روی scene dock/نوار بالایی صفحه محتوای نمایش لیست غذاها (table view controller scene) آن را انتخاب کنید به طوری که یک خط آبی رنگ پیرامون scene جاری را فرا بگیرد.
Table View در Swift
3. حال کادر identity inspector را باز نمایید.
4. داخل کادر identity inspector، فیلدی که Class نام دارد را پیدا کرده و سپس گزینه ی MealTableViewController را انتخاب کنید.
Table View در Swift

تست کنید:

برنامه را اجرا نمایید. لیست آیتم هایی که به متد viewDidLoad() اضافه نمودید، باید به صورت خانه های جدول در table view به نمایش در آیند. با کمی دقت متوجه می شوید که خانه های جدول با status bar (نوار نمایشگر وضعیت کلی دستگاه) کمی همپوشانی دارد (نوار وضعیت به مقدار اندکی بر روی خانه ی پایینی جدول قرار گرفته است). در مبحث بعدی به برطرف کردن این همپوشانی خواهید پرداخت.

Table View در Swift

آماده سازی صفحه محتوای افزودن غذای جدید/Scene Meal برای پیمایش (پیاده سازی قابلیت پیمایش در برنامه ی FoodTracker)

برای اینکه قابلیت پیمایش (navigation) را در اپلیکیشن FoodTracker پیاده سازی کنید، لازم است تعدادی خط کد را از متن برنامه حذف کرده و آن را با کدهای دیگر جایگزین نمایید و یا بخش هایی از UI که با پیاده سازی navigation در آن بلااستفاده می شود، حذف/جایگزین کنید.
جهت حذف بخش های بلااستفاده از پروژه، مراحل زیر را دنبال نمایید:
1. فایل storyboard را باز نموده و صفحه محتوای افزودن غذای جدید (scene meal) را مشاهده نمایید. صفحه محتوا نمایش meal در حال حاضر می بایست ظاهری مشابه زیر داشته باشد:
Table View در Swift
2. در scene جاری، المان Meal Name را انتخاب نموده و با فشردن کلید Delete، آن را حذف کنید. لازم نیست نگران چیدمان المان ها باشید. باقی المان ها موقعیت خود را به طور مناسب در stack view تنظیم می کنند.
Table View در Swift
3. فایل ViewController.swift را باز نمایید.
4. در فایل ViewController.swift، متد textFieldDidEndEditing(_:) را پیدا کنید.

    
func textFieldDidEndEditing(textField: UITextField) {
mealNameLabel.text = textField.text
}
}

5. آن خطی که مقدار خصوصیت (property) text از المان label را مقداردهی می کند، حذف نمایید.

    
mealNameLabel.text = textField.text

6. به زودی داخل بدنه ی این متد، دستور دیگری درج خواهید نمود.
7. در فایل ViewController.swift، متغیر (یا outlet) mealNameLabel را پیدا کرده و آن را حذف نمایید.

    
                @IBOutlet weak var mealNameLabel: UILabel!

شما اکنون دو view controller در پروژه ی خود دارید. بنابراین بهتر است اسم فایل ViewController.swift را تغییر داده و نام معنی دار تری برای آن انتخاب نمایید.
جهت تغییر اسم فایل ViewController.swift، مراحل زیر را دنبال نمایید:
1. در کادر project navigator، بر روی فایل ViewController.swift کلیک کرده و سپس کلید Return را فشار دهید. Xcode به شما این امکان را می دهد تا برای فایل اسم جدیدی تایپ کنید.
2. فایل MealViewController.swift را تغییر اسم داده و سپس کلید Return را فشار دهید.
3. در فایل MealViewController.swift، خط تعریف کلاس (حاوی کلید واژه ی class) را پیدا کنید:

    
                               class ViewController: UIViewController, UITextFieldDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

4. اسم کلاس را به MealViewController تغییر دهید.

    
class MealViewController: UIViewController, UITextFieldDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate {                            

5. در comment موجود در بالای فایل نیز اسم فایل را از ViewController.swift به MealViewController.swift تغییر دهید.
6. اکنون فایل storyboard را باز کنید.
7. صفحه محتوای افزودن غذای جدید scene) (meal را با کلیک بر روی نوار scene dock آن انتخاب نمایید.
Table View در Swift
8. پس از انتخاب scene مذکور، کادر identity inspector را باز نمایید.
9. در این کادر، به فیلد Class مراجعه کرده و گزینه ی انتخاب شده را از ViewController به MealViewController تغییر دهید.
Table View در Swift

تست کنید :

اپلیکیشن خود را کامپایل/اجرا نمایید. همه چیز باید مانند قبل به درستی کار کند. در این لحظه احتمالا یک پیغام هشدار به نمایش در می آید. در آن شرح داده شده که هیچ راهی برای دسترسی به صفحه محتوای افزودن غذای جدید به برنامه FoodTracker (meal scene) وجود ندارد. جای نگرانی نیست. این رفتار (قابلیت پیمایش و دسترسی به meal scene) را در مبحث بعدی پیاده سازی خواهید کرد.

  • 1866
  •    1104
  • تاریخ ارسال :   1395/08/06

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .