جلسه نهم آموزش ios : کار با Storyboard - کلیک سایت

اگر تاکنون دوره های آموزش برنامه نویسی iOS را دنبال کرده باشید، درک پایه ای از UITableView و نحوه ساخت یک اپ ساده با آن را کسب نموده اید. در این جلسه قصد داریم در خصوص موضوع جدیدی تحت عنوان Storyboard صحبت کنیم. Storyboard ها یکی از مهیج ترین ویژگی های معرفی شده در Xcode 4.2 و iOS 5 SDK می باشند، که توانسته اند کار توسعه اپ های iOS را بسیار ساده تر کرده و به برنامه نویس کمک کنند که به راحتی رابط کاربری را برای اپ iOS خود طراحی نمایند.

در این جلسه از آموزش  iOS، نشان خواهیم داد که چگونه می توانیم با استفاده از Storyboard یک navigation interface بسازیم و آن را با UITableView تلفیق کنیم. سعی می کنیم آموزش را به صورت ساده دنبال کرده و بیشتر روی مفاهیم تمرکز کنیم. بنابراین، رابط کاربری فانتزی و گرافیکی طراحی نخواهیم کرد. انجام کارهای هنری را به جلسات آینده موکول می کنیم.

بسیار خوب! بیایید شروع کنیم.

Navigation Controller چیست؟

قبل از این که برویم سراغ بخش کدنویسی، طبق روال، اجازه دهید یک مقدمه کوتاه درباره Navigation Controller و Storyboard داشته باشیم.

مانند table view ، می توان گفت Navigation Controller نیز یکی دیگر از عناصر UI  می باشد که معمولاً در اپ های iOS یافت می شود. Navigation Controller، یک رابط drill-down برای محتوای سلسه مراتبی فراهم می کند. نگاهی به اپ داخلی Photos اپل، YouTube و Contacts بیاندازید. همه این اپ ها با استفاده از Navigation Controller، جهت نمایش محتواهای سلسله مراتبی ساخته شده اند. معمولاً table view و Navigation Controller در اکثر اپ ها استفاده می شوند. اما این بدان معنا نیست که شما باید از هر دو آنها استفاده کنید.

مروری بر Storyboard

همان طور که قبلاً اشاره شد، Storyboard ها ویژگی جدیدی هستند که از نسخه Xcode 4.2 انتشار یافته اند. این ویژگی، یک شیوه کاملاً جدید برای توسعه دهنده اپ iOS، جهت ساخت و طراحی رابط کاربری ارائه می دهد. قبل از معرفی شدن Storyboard به بازار، برای تازه کارها، ساخت رابط navigation (و tab) کار سختی بود. در شیوه قدیمی، هر رابط در یک فایل nib جداگانه ذخیره می شد. برای ایجاد پیوند بین همه رابط ها نیاز بود که کدنویسی کنیم و نحوه کارکرد navigation را توضیح دهیم.

با Storyboard، تمام صفحات در یک فایل ذخیره می شوند. این کار باعث می شود که یک دید اجمالی بر نحوه نمایش بصری اپ داشته باشیم و ببینیم که صفحات چگونه به هم متصل می شوند. Xcode برای چیدمان Storyboard یک ویرایشگر داخلی فراهم می کند. ما می توانیم به سادگی، انتقال (تحت عنوان segues شناخته می شود) بین صفحات مختلف را به سادگی با استفاده از point و click تعریف کنیم. این بدان معنا نیست که برای طراحی رابط کاربری، نیازی به کد نویسی نداریم. اما باید توجه کنیم که Storyboard به طور قابل توجهی، میزان کدنویسی ما را کاهش داده است. در تصویر زیر، نحوه عملکرد Storyboard در Xcode نشان داده شده است.

Scene و Segue

هنگامی که با Storyboard ها کار می کنیم، Scene و Segues دو اصطلاحی هستند که همیشه با آنها مواجه هستیم. درون Storyboard، Scene به یک view controller و view آن اشاره دارد. هر Scene یک dock دارد، که برای ایجاد پایه اتصال بین view controller و view آن به کار می رود.

Segue بین دو Scene قرار می گیرد و انتقالات بین Scene را مدیریت می کند. Push و Modal دو نوع متداول از این انتقال ها می باشد.

ایجاد Navigation Controller در Storyboard

اکنون بیایید شروع به کدنویسی برای Storyboard خود کنیم. در این جلسه از آموزش  iOS، ما یک اپ ساده خواهیم ساخت که از دو ساختار UITableView و UINavigationController استفاده می کند. از table view برای نمایش فهرستی از دستور پخت ها استفاده می کنیم. وقتی کاربری هر کدام از دستور پخت ها را انتخاب کند، اپ به صفحه بعد جهت نمایش جزئیات دستور پخت، هدایت می شود. کار ساده ای است!

ابتدا، Xcode را باز می کنیم (مطمئن شوید که از Xcode 4.2 یا بالاتر استفاده می کنید) و یک پروژه جدید را با استفاده از تمپلت “Single View application” ایجاد می نماییم.

برای ادامه، روی کلید “Next” کلیک می کنیم. مطابق شکل زیر، تمام مقادیر موردنیاز را برای پروژه Xcode تکمیل می کنیم. باید اطمینان حاصل شود که گزینه “Use Storyboards” فعال شده باشد.

برای ادامه، روی کلید “Next” کلیک کنید. سپس Xcode محل ذخیره سازی پروژه “SimpleTable” را از شما می پرسد. یک پوشه را برای ذخیره سازی پروژه خود (برای مثال در دسکتاپ) انتخاب کنید.

ممکن است متوجه شده باشید که تفاوت های جزئی در پروژه Xcode نسبت به پروژه ای که در جلسات قبل کار کردیم، وجود دارد. فایل

.xib (interface builder)

با فایل MainStoryboard.storyboard جایگزین شده است.

به طور پیش فرض، Xcode یک view controller استاندارد ایجاد می کند. ما از navigation controller برای کنترل هدایت صفحات استفاده خواهیم کرد. لازم است، ابتدا view controller را به navigation controller تغییر دهیم.

Simply را انتخاب می کنیم، سپس از منو “Editor” را انتخاب می کنیم. بعد، “Embed in” و به دنبال آن “Navigation Controller”  را انتخاب می کنیم.

Xcode به طور خودکار RecipeBook View Controller را در Navigation Controller جاسازی می کند. صفحه نمایش باید شبیه تصویر زیر باشد:

قبل از این که ادامه دهیم، اجازه دهید یک بار دیگر اپ را اجرا کنیم و ببینیم ساختار اپ به چه صورت می باشد. روی کلید “Run” می کنیم. بعد از اجرای اپ، باید یک صفحه خالی را ببینیم؛ اما navigation bar باید به صفحه اضافه شده باشد. این کار نشان می دهد که ما با موفقیت RecipeBook View Controller را در Navigation Controller جاسازی کرده ایم.

افزودن Table View برای داده ها

در ادامه، ما یک ساختار table view برای نمایش دستور پختها، اضافه خواهیم کرد. “Table View” را در کتابخانه اشیاء پیدا کرده و به داخل “Recipe Book View Controller” درگ می کنیم.

باید توجه شود که وقتی که صفحه ویرایشگر در حالت zoom out (بزرگ) باشد، نمی توان  چیزی را داخل آن درگ کرد، اگر نتوانستید table view را داخل view controller درگ کنید، صفحه ویرایشگر را کوچک کرده و دوباره سعی کنید.

کار بعدی که باید انجام دهیم، نوشتن کد، برای پر کردن داده های جدول (مانند دستور پخت ها) می باشد. در بخش Project Navigator، گزینه “RecipeBookViewController.h” را انتخاب کنید. بعد از “UIViewController”، علامت “” را اضافه کنید. پس از انجام این کار، کد باید مانند زیر باشد:

#import <UIKit/UIKit.h>
 
@interface RecipeBookViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
 
@end

اگر آموزش های قبلی ما را، در خصوص Simple Table در دوره آموزش برنامه نویسی iOS مطالعه کرده باشید، باید تاکنون با کدها آشنایی داشته باشید. اگر درک کدها، هنوز برای شما دشوار است، توصیه می شود، دوباره به آموزش Simple Table مراجعه کرده و آن را بررسی نمایید.

در ادامه، “RecipeBookViewController.m” را انتخاب کرده و یک متغیر نمونه برای نگه داشتن داده های جدول تعریف می کنیم (مانند آرایه دستور پخت ها).

@implementation RecipeBookViewController {
    NSArray *recipes;
}

در متد “viewDidLoad”، کد زیر را برای مقداردهی اولیه آرایه “recipes” اضافه می کنیم.

- (void)viewDidLoad
{
    [super viewDidLoad];
 // Initialize table data
    recipes = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
}

در آخر، ما باید دو متد datasource را برای پر کردن داده های جدول، پیاده سازی کنیم، که عبارتند از: “tableView:numberOfRowsInSection” و “tableView:cellForRowAtIndexPath”. به خاطر دارید که این دو متد، جزء پروتکل UITableViewDataSource می باشند. در زمان پیکربندی UITableView، اجرای این متدها ضروری می باشند. اولین متد، برای اطلاع یافتن table view، از تعداد ردیف های جدول، استفاده می شود. متد دوم، برای پر کردن داده هر سلول از جدول به کار می رود. پس  بیایید کد زیر را اضافه کنیم:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [recipes count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"RecipeCell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }
    
    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
    return cell;
}

برای آگاهی شما، سورس کد کامل “RecipeBookViewController.m” در ادامه آورده شده است:

//
//  RecipeBookViewController.m
//  RecipeBook
//
//  Created by Simon Ng on 14/6/12.
//  Copyright (c) 2012 Appcoda. All rights reserved.
//
 
#import "RecipeBookViewController.h"
 
@interface RecipeBookViewController ()
 
@end
 
@implementation RecipeBookViewController {
    NSArray *recipes;
}
 
- (void)viewDidLoad
{
    [super viewDidLoad];
 // Initialize table data
    recipes = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
}
 
 
- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}
 
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [recipes count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"RecipeCell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }
    
    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
    return cell;
}
 
@end

در نهایت، ما باید ارتباط بین Table View و دو متدی را که ایجاد کردیم، برقرار کنیم. به Storyboard بر می گردیم. کلید کنترل صفحه کلید را فشار داده و نگه می داریم، شیء “Table View” را انتخاب کرده و به آیکون View Controller درگ می کنیم. صفحه نمایش باید شبیه تصویر زیر باشد:

هر دو کلید را رها می کنیم. یک صفحه pop-up با دو گزینه “dataSource” و “delegate” نمایان می شود. “dataSource” را برای ایجاد ارتباط بین Table View و data source آن، انتخاب می کنیم. مراحل فوق را تکرار کرده و ارتباط با delegate را نیز برقرار می کنیم.

قبل از این که اپ خود را تست کنیم، آخرین کاری که باید انجام دهیم، افزودن عنوان به  navigation bar می باشد. navigation bar را از بخش “Recipe Book View Controller” انتخاب کرده و در بخش “Attributes Inspector”، گزینه “Title” را پر می کنیم. بعد از انجام این کار، برای اعمال تغییرات، باید کلید “ENTER” زده شود.

اکنون، زمان اجرای اپ فرا رسیده است. کلید “Run” را کلیک کرده و اپ خود را تست می کنیم. اپ باید لیستی از دستور پخت ها را نشان دهد. این اپ بسیار شبیه به اپ Simple Table می باشد که قبلاً آن را ارتقاء داده بودیم. تفاوت اصلی آنها در Navigation Controller جاسازی شده ، می باشد.

معرفی Prototype Cell

به خاطر دارید چگونه سلول جدول را سفارشی کردیم؟ در چند جلسه قبل­تر، ما نحوه طراحی سلول سفارشی را با استفاده از Interface Builder، آموزش دادیم. با معرفی Prototype Cell در Storyboard، ایجاد سلول سفارشی بسیار ساده تر خواهد شد. Prototype Cell به ما این امکان را می دهد که چیدمان سلول جدول را به راحتی در Storyboard editor انجام دهیم.

در این آموزش، ما قصد نداریم وارد جزئیات سفارشی سازی شویم، فقط کافی است، “Disclosure Indicator” را در سلول اضافه کنیم.

برای اضافه کردن prototype cell، گزینه Table View را از بخش “Attributes Inspector” انتخاب می کنیم. مقدار “Prototype Cells” از “0” به “1” تغییر می دهیم. به محض اعمال این تغییر، Xcode به طور خودکار، prototype cell را نشان می دهد. برای نشان دادن table style دیگری، گزینه “Style” را از “Plain” به “Group” تغییر می دهیم.

در ادامه، “Prototype Cell” را انتخاب می کنیم. الان ما می توانیم گزینه های مربوط به سلول را سفارشی سازی نماییم. برای نشان دادن disclosure indication (علامت افشاء) برای هر سلول، “Accessory” را به “Disclosure Indicator” تغییر می دهیم. تعریف شناسه Reuse مهم می باشد. این شناسه به عنوان ID سلول عمل می کند. می توانیم از این شناسه برای اشاره به یک prototype cell خاص استفاده نماییم. در اینجا، ما شناسه را به نام “RecipeCell” تعریف می کنیم که با کدها نیز مطابقت داشته باشد.

حالا، اپ را دوباره اجرا می کنیم. با تغییراتی که اعمال کردیم، ظاهر اپ تفاوت کرده است. ما table style را به “Grouped” style تغییر داده و disclosure indicator را نیز اضافه نموده ایم.

افزودن Detail View Controller

به بخش انتهایی این آموزش رسیدیم. چیزی که انجام نداده ایم، افزودن detail view controller می باشد، که جزئیات دستور پخت را نشان می دهد. وقتی که کاربر روی هر دستور پختی ضربه می زند، Detail view controller باید نشان داده شود.

بسیار خوب! بیایید یک View Controller جدید به عنوان detail view controller اضافه کنیم.

هدف اولیه از این آموزش این است که نحوه پیاده سازی navigation controller را نشان دهیم. برای حفظ سادگی مطالب، از آوردن جزئیات بیشتر خودداری می کنیم. پس، فقط بیایید یک برچسب با نام دستور پخت را نشان دهیم. شیء label را از کتابخانه اشیاء درگ کرده و آن را سعی می کنیم در مرکز صفحه view قرار دهیم. حتی می توانیم اندازه و نوع فونت برچسب را برای بهتر دیده شدن، تغییر دهیم.

سپس، یک segue برای اتصال prototype cell و View Controller جدید، اضافه می کنیم. اضافه کردن شیء segue کار بسیار راحتی است. کلید کنترل صفحه کلید را فشار داده و نگه می داریم، روی prototype cell کلیک کرده و آن را به داخل View Controller درگ می کنیم.

هر دو کلید را رها می کنیم. یک صفحه pop-up نشان داده می شود که حاوی سه نوع

segue (push، modal و custom)

می باشد.

همان طور که قبلاً شرح دادیم، segue نوع انتقال بین sceneها را تعریف می کند. برای navigation استاندارد، ما از نوع “Push” استفاده می کنیم. پس از انتخاب کردن، Xcode به طور خودکار، scene و Push segue را به هم متصل می کند.

خوب! بیایید دوباره اپ را اجرا کنیم. با انتخاب هر کدام از دستور پخت ها، اپ، detail view controller را نشان می دهد. با این که detail view controller فقط یک برچسب را نشان می دهد، اما ما توانستیم کار مربوط به navigation را انجام دهیم.

موضوع جلسه بعد چیست؟

با این که آموزش این جلسه از برنامه نویسی iOS، طولانی بود، ولی بالاخره به پایان رسید. امیدواریم در انتها، درکی بهتری نسبت به Storyboard و نحوه طراحی navigation controller کسب کرده باشید. با این حال، هنوز به یک سؤال پاسخ نداده ایم: چگونه می توان نام دستور پخت را از “Recipe Book View Controller” به “Detail View Controller” ارسال کرد؟ در آموزش جلسه بعد، به این موضوع خواهیم پرداخت.

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