طراحی رابط کاربری

برای آغاز ، بیایید view controller را ، برای اکران دادن عکس فرمان پخت ، پیاده سازی نماییم. به Storyboard رفته و یک View Controller را ، از Object library ، درگ می‌کنیم. بعد ، یک Image View ، به آن اضافه میکنیم و ارتفاع و پهنا آن را به ترتیب به 320 و 200 ، تهیه طراحی اپلیکیشن در مشهد و تنظیم می نماییم. در انتها ، یک navigation bar به بالای کاغذ view ، اضافه کرده ، و یک گزینه Bar Button ، به آن اختصاص می‌دهیم. اسم گزینه کلید را ، “Close” ، قرار می‌دهیم. View Controller ، بایستی مشابه تصویر ذیل باشد:

از آن جایی که ، ما می‌خواهیم ، وقتی که مخاطب روی هر عکس امر پخت ، در collection view ، ضربه می‌زند ، view controller را اکران دهیم ، بایستی ، با استعمال از segue ، قسمت collection view را به view controller ، اتصال دهیم. کلید در اختیار گرفتن را فشار داده و نگه می‌داریم ، روی “Recipe View Cell” ، کلیک کرده و آن را به باطن View Controller ، درگ میکنیم. “Model” را برای قسمت style گزینش کرده و شناسه segue را به “showRecipePhoto” ، تهیه و تنظیم می‌کنیم.

در صورتیکه نرم افزار را کامپایل کرده و جاری ساختن نماییم ، وقتی که هر مورد از عکس های امر پخت را تعیین کنیم ، با یک view خالی مواجه خوا‌هیم شد. از آن جایی که طراحی کد را اعمال نداده ایم ، model view controller ، هیچ درکی از عکس تعیین گردیده امر پخت ، نخواهد داشت. به این ترتیب ، یک کلاس نو (تحت عنوان پایین کلاس UIViewControoler) ساخت‌و‌ساز کرده ، و اسم آن را “RecipeViewController” ، قرار می‌دهیم. در Storyboard ، قسمت view controller را که تولید کرده ایم ، گزینش نموده و custom class را روی RecipeViewController ، تهیه می‌کنیم.

در‌پی ، یک اتصال فی مابین image view و پوشه RecipeViewController.h ، ساخت خوا هیم کرد. کلید در دست گرفتن را فشار داده و نگه می‌داریم ، روی image view کلیک کرده و آن را به باطن فولدر “RecipeViewController.h” ، درگ می‌کنیم. اسم متغیر را “recipeImageView” ، قرار میدهیم. پروسه مشابهی را تکرار کرده و یک اتصال با از نوع “action”  ، با کلید close ، برقرار می‌کنیم.

قسمت کدنویسی

برای این که بقیه کنترلرها ، اسم عکس را پاس دهند ، یک خصیصه “recipeImageName”   نیز اضافه می‌کنیم. پوشه RecipeViewController.h ، می بایست مبنی بر کد ذیل باشد:

@interface RecipeViewController : UIViewController

@property (weak, nonatomic) IBOutlet UIImageView *recipeImageView;

@property (weak, nonatomic) NSString *recipeImageName;

- (IBAction)close:(id)sender;

@end

در حین اکران ، RecipeViewController  ، عکس فرمان پخت مشخص و معلوم گردیده را ، در image view ، بار گذاری خواهد کرد. به این ترتیب ، در فولدر RecipeViewController.m ، روال viewDidLoad  را بر پایه ی ذیل تغییر و تحول میدهیم.

- (void)viewDidLoad

{

[super viewDidLoad];

self.recipeImageView.image = [UIImage imageNamed:self.recipeImageName];

}

بسیار عالی! ما طراحی RecipeViewController را کامل شدن کردیم. البته ، هنوز ، یک فعالیت مانده میباشد. چه طور خواهیم توانست مورد گزینش گردیده از collection view را شناسایی کرده ، و اسم عکس آن را به RecipeViewController ، پاس دهیم؟ مشی prepareForSegue:sender: را در RecipeCollectionViewController ، طراحی خوا‌هیم کرد ، که source view controller ، مرتبط با segue  است. فولدر “RecipeBookViewController.m” را تعیین کرده و کد تحت را اضافه میکنیم: