جلسه چهاردهم آموزش iOS : بهبود Detail View Controller در اپ

چند جلسه پیش ، ما نحوه استفاده از Segue در Storyboard ، را برای انتقال داده بین view controller های مختلف ، نشان دادیم. یک اپ ساده ، برای نمایش لیست دستور پخت ها ، ساختیم. وقتی کاربر ، روی هر دستور پختی، ضربه می زند، اپ ، کاربر را به صفحه جزئیات هدایت کرده و نام دستور پخت را نشان می دهد. این اپ بسیار ساده است. اما ، اگر نحوه عملکرد آن را خوب بفهمید، می تواند به عنوان مبنایی باشد ، که از آن در توسعه اپ های iOS حرفه ای ، استفاده نمایید.

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

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

نسخه نهایی

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

مرور مجدد نحوه انتقال داده در Segue

در آموزش Segue ، ما نحوه استفاده از Segue ، برای انتقال نام دستور پخت از List view ، به detail view ، را شرح دادیم که کد آن مطابق زیر می باشد:

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([segue.identifier isEqualToString:@"showRecipeDetail"]) {
        NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
        RecipeDetailViewController *destViewController = segue.destinationViewController;
        destViewController.recipeName = [recipes objectAtIndex:indexPath.row];
    }
}

ما به سادگی property (یعنی recipeName) را در RecipeDetailViewController ، برای انتقال نام دستور پخت ، تنظیم می کنیم. واضح است  که می توانیم خواص دیگر را در detail view controller برای انتقال سایر مقادیر مربوط به دستور پخت ، اضافه کنیم. اگر آموزش OOP، را خوانده باشید، می دانید که ، ایجاد کلاس Recipe و گروه بندی همه خصیصه ها درون یک کلاس ، کار بهتری است.

بیایید شروع کنیم

ابتدا ، پروژه Xcode project را دانلود کنید. از این پروژه به عنوان baseline ، برای ساخت اپ، استفاده خواهیم کرد.

ایجاد یک کلاس Recipe

در ابتدا، ما یک کلاس Recipe ، ایجاد خواهیم کرد. روی پوشه RecipeBook ، کلیک راست کرده و گزینه “New File …” را انتخاب می کنیم. تمپلت “Objective-C class” ( در بخش Cocoa touch) را انتخاب کرده و کلید “Next” را کلیک می کنیم. نام کلاس را “Recipe” ، قرار می دهیم که ، زیر کلاسی از “NSObject” ، می باشد. کلید “Next” را کلید کرده و فایل را در پوشه پروژه  Xcode ، ذخیره می کنیم.

هنگامی که کار تمام شد ، Xcode فایل های Recipe.h و Recipe.m را ایجاد خواهد کرد. در فایل header ، خواص کلاس Recipe را اضافه می کنیم:

@interface Recipe : NSObject
 
@property (nonatomic, strong) NSString *name; // name of recipe
@property (nonatomic, strong) NSString *prepTime; // preparation time
@property (nonatomic, strong) NSString *imageFile; // image filename of recipe
@property (nonatomic, strong) NSArray *ingredients; // ingredients
 
@end

در فایل پیاده سازی (یعنی Recipe.m)، دستور @synthesis را اضافه می کنیم. دستور @synthesis ، به کامپایلر می گوید که setter و getter ها را برای دسترسی به خواصی که ما در فایل header، تعریف کرده ایم، ایجاد کند.

@implementation Recipe
 
@synthesize name;
@synthesize prepTime;
@synthesize imageFile;
@synthesize ingredients;
 
@end

اکنون، ما کلاس Recipe را با خواص مختلف، شامل نام دستور پخت، مدت زمان پخت، تصویر و مواد اولیه است، ایجاد کرده ایم. بعداً ما از آن برای تعریف اشیاء recipe مختلف، استفاده کرده و آنها را به detail view controller ، انتقال خواهیم داد.

پر کردن داده های Recipe

برای حفظ سادگی آموزش، ما داده های مربوط به دستور پخت را درست در “RecipeBookViewController”، پر خواهیم کرد. در اپ های واقعی، این نوع از داده ها، معمولاً در یک فایل property list ، یا پایگاه داده ، ذخیره می شوند.

در متد “viewDidLoad” ، از فایل “RecipeBookViewController.m” ، اشیاء Recipe (با مدت زمان پخت و مواد اولیه و ... مختلف) را مقداردهی کرده و آنها را در آرایه “recipes” ، قرار می دهیم.

	- (void)viewDidLoad
{
    [super viewDidLoad];
    // Initialize table data
 
    Recipe *recipe1 = [Recipe new];
    recipe1.name = @"Egg Benedict";
    recipe1.prepTime = @"30 min";
    recipe1.imageFile = @"egg_benedict.jpg";
    recipe1.ingredients = [NSArray arrayWithObjects:@"2 fresh English muffins", @"4 eggs", @"4 rashers of back bacon", @"2 egg yolks", @"1 tbsp of lemon juice", @"125 g of butter", @"salt and pepper", nil];
    
    Recipe *recipe2 = [Recipe new];
    recipe2.name = @"Mushroom Risotto";
    recipe2.prepTime = @"30 min";
    recipe2.imageFile = @"mushroom_risotto.jpg";
    recipe2.ingredients = [NSArray arrayWithObjects:@"1 tbsp dried porcini mushrooms", @"2 tbsp olive oil", @"1 onion, chopped", @"2 garlic cloves", @"350g/12oz arborio rice", @"1.2 litres/2 pints hot vegetable stock", @"salt and pepper", @"25g/1oz butter", nil];
    
    Recipe *recipe3 = [Recipe new];
    recipe3.name = @"Full Breakfast";
    recipe3.prepTime = @"20 min";
    recipe3.imageFile = @"full_breakfast.jpg";
    recipe3.ingredients = [NSArray arrayWithObjects:@"2 sausages", @"100 grams of mushrooms", @"2 rashers of bacon", @"2 eggs", @"150 grams of baked beans", @"Vegetable oil", nil];
    
    Recipe *recipe4 = [Recipe new];
    recipe4.name = @"Hamburger";
    recipe4.prepTime = @"30 min";
    recipe4.imageFile = @"hamburger.jpg";
    recipe4.ingredients = [NSArray arrayWithObjects:@"400g of ground beef", @"1/4 onion (minced)", @"1 tbsp butter", @"hamburger bun", @"1 teaspoon dry mustard", @"Salt and pepper", nil];
    
    Recipe *recipe5 = [Recipe new];
    recipe5.name = @"Ham and Egg Sandwich";
    recipe5.prepTime = @"10 min";
    recipe5.imageFile = @"ham_and_egg_sandwich.jpg";
    recipe5.ingredients = [NSArray arrayWithObjects:@"1 unsliced loaf (1 pound) French bread", @"4 tablespoons butter", @"2 tablespoons mayonnaise", @"8 thin slices deli ham", @"1 large tomato, sliced", @"1 small onion", @"8 eggs", @"8 slices cheddar cheese", nil];
    
    Recipe *recipe6 = [Recipe new];
    recipe6.name = @"Creme Brelee";
    recipe6.prepTime = @"1 hour";
    recipe6.imageFile = @"creme_brelee.jpg";
    recipe6.ingredients = [NSArray arrayWithObjects:@"1 quart heavy cream", @"1 vanilla bean, split and scraped", @"1 cup vanilla sugar", @"6 large egg yolks", @"2 quarts hot water", nil];
    
    Recipe *recipe7 = [Recipe new];
    recipe7.name = @"White Chocolate Donut";
    recipe7.prepTime = @"45 min";
    recipe7.imageFile = @"white_chocolate_donut.jpg";
    recipe7.ingredients = [NSArray arrayWithObjects:@"3 1/4 cups flour", @"2 teaspoons baking powder", @"1/4 teaspoon salt", @"2 beaten eggs", @"2/3 cup sugar", @"2 ounces melted white chocolate", @"1/2 cup milk", nil];
    
    Recipe *recipe8 = [Recipe new];
    recipe8.name = @"White Chocolate Mocha";
    recipe8.prepTime = @"5 min";
    recipe8.imageFile = @"starbucks_coffee.jpg";
    recipe8.ingredients = [NSArray arrayWithObjects:@"2/3 cup whole milk", @"6 tablespoons white chocolate chips", @"coffee", @"whipped cream", nil];
    
    Recipe *recipe9 = [Recipe new];
    recipe9.name = @"Vegetable Curry";
    recipe9.prepTime = @"30 min";
    recipe9.imageFile = @"vegetable_curry.jpg";
    recipe9.ingredients = [NSArray arrayWithObjects:@"1 tablespoon olive oil", @"1 onion, chopped", @"2 cloves garlic", @"2 1/2 tablespoons curry powder", @"2 quarts hot water", nil];
    
    Recipe *recipe10 = [Recipe new];
    recipe10.name = @"Instant Noodle with Egg";
    recipe10.prepTime = @"8 min";
    recipe10.imageFile = @"instant_noodle_with_egg.jpg";
    recipe10.ingredients = [NSArray arrayWithObjects:@"1 pack of Instant Noodle", @"2 eggs", nil];
    
    Recipe *recipe11 = [Recipe new];
    recipe11.name = @"Noodle with BBQ Pork";
    recipe11.prepTime = @"20 min";
    recipe11.imageFile = @"noodle_with_bbq_pork.jpg";
    recipe11.ingredients = [NSArray arrayWithObjects:@"1 pack of Instant Noodle", @"BBQ pork", @"Salt and Pepper", nil];
    
    Recipe *recipe12 = [Recipe new];
    recipe12.name = @"Japanese Noodle with Pork";
    recipe12.prepTime = @"20 min";
    recipe12.imageFile = @"japanese_noodle_with_pork.jpg";
    recipe12.ingredients = [NSArray arrayWithObjects:@"1 pack of Japanese Noodle", @"2 green onions", @"2 garlic cloves, minced", @"4 boneless pork loin chops", nil];
    
    Recipe *recipe13 = [Recipe new];
    recipe13.name = @"Green Tea";
    recipe13.prepTime = @"5 min";
    recipe13.imageFile = @"green_tea.jpg";
    recipe13.ingredients = [NSArray arrayWithObjects:@"Green tea", nil];
    
    Recipe *recipe14 = [Recipe new];
    recipe14.name = @"Thai Shrimp Cake";
    recipe14.prepTime = @"1.5 hours";
    recipe14.imageFile = @"thai_shrimp_cake.jpg";
    recipe14.ingredients = [NSArray arrayWithObjects:@"8 oz (250g) peeled and deveined raw shrimp", @"2 tablespoons red curry paste", @"1 large egg", @"2 teaspoon fish sauce", @"1 tablespoon sugar", @"2 tablespoons coconut milk", @"2 tablespoons roughly chopped Thai basil leaves", nil];
    
    Recipe *recipe15 = [Recipe new];
    recipe15.name = @"Angry Birds Cake";
    recipe15.prepTime = @"4 hours";
    recipe15.imageFile = @"angry_birds_cake.jpg";
    recipe15.ingredients = [NSArray arrayWithObjects:@"12 tablespoons (1 1/2 sticks) unsalted butter", @"2 1/2 cups all-purpose flour", @"1 tablespoon baking powder", @"1 teaspoon salt", @"1 3/4 cups sugar", @"2 large eggs, plus 3 large egg yolks", @"1 cup of milk", nil];
    
    Recipe *recipe16 = [Recipe new];
    recipe16.name = @"Ham and Cheese Panini";
    recipe16.prepTime = @"10 min";
    recipe16.imageFile = @"ham_and_cheese_panini.jpg";
    recipe16.ingredients = [NSArray arrayWithObjects:@"2 tablespoons unsalted butter", @"4 cups thinly sliced shallots", @"2 teaspoons fresh thyme", @"1/4 cup grainy Dijon mustard", @"8 slices rustic white bread", @"8 slices Gruyere cheese", @"8 ounces sliced cooked ham", nil];
    
    recipes = [NSArray arrayWithObjects:recipe1, recipe2, recipe3, recipe4, recipe5, recipe6, recipe7, recipe8, recipe9, recipe10, recipe11, recipe12, recipe13, recipe14, recipe15, recipe16, nil];
 
}

طراحی مجدد Detail View Controller

در اصل، detail view controller ، فقط نام دستور پخت را نشان می دهد. ما قصد داریم ، اطلاعات بیشتری از دستور پخت را به کاربر ، نشان دهیم. ابتدا این بسته تصاویر  image pack را دانلود کرده و همه تصاویر را به پروژه ها، اضافه می کنیم.

تصویر @2x چیست؟

از زمان انتشار iPhone 4، با قابلیت نمایش Retina، اپ ها باید از وضوح مختلفی برای صفحه نمایش های متفاوت (یعنی 320Ï480، برای نسل قدیمی آیفون و 640Ï960 برای آیفون 4 یا بالاتر) پشتیبانی کنند. اپل ، کار پشتیبانی از وضوح چندگانه را برای توسعه دهندگان ، نسبتاً آسان نموده است.

اپلیکیشن ها ، باید شامل دو فایل جداگانه ، برای هر منابع تصویری باشد. یکی از فایل ها ، ورژن وضوح استاندارد از تصویر داده شده را فراهم می کند، و فایل دوم، ورژن وضوح بالاتر را برای همان تصویر، فراهم می سازد. قرارداد نامگذاری برای هر دو فایل تصویری، به شرح ذیل است:

Standard: <ImageName>.<filename_extension>
High resolution: <ImageName>@2x.<filename_extension>

کلاس UIImage ، تمام کارهای موردنیاز برای تصاویر با وضوح بالاتر را در اپ، مدیریت می کند. زمانی که یک تصویر با UIImage ، بارگذاری می شود، به طور خودکار، سطح وضوح صفحه نمایش، تعیین شده و فایل متناظر را بارگذاری می کند. برای مثال:

UIImage* anImage = [UIImage imageNamed:@"photo-frame"];

کد بالا، تصویر “photo-frame@2x.png” را در دستگاه با وضوح بالا، بارگذاری می کند. در حالی که، در سطح وضوح صفحه نمایش استاندارد، تصویر “photo-frame.png” را بارگذاری می کند.

Storyboard را انتخاب کرده و “Recipe Detail View Controller” را در آن ، پیدا می کنیم. ابتدا ، در درجه اول، “Label” مؤلفه را حذف کرده و یک image view به detail view، اضافه می کنیم. طول و عرض تصویر را در image view، به ترتیب، به 297 و 199 تنظیم می کنیم.

بخش attribute inspector را انتخاب کرده و تصویر را به “photo-frame.jpg”، تنظیم می کنیم. به محض این که  تنظیمات تصویر انجام شد ، تصویر به طور خودکار بارگذاری شده و نمایش داده می شود. این تصویر، برای نمایش یک photo frame ، مربوط به عکس دستور پخت، استفاده می شود.

در ادامه، image view  دیگری که به عنوان placeholder (حفره) برای عکس دستور پخت ، عمل می کند، اضافه می کنیم. Image view را از Object Library ، درگ کرده و آن را بر روی photo frame ، مانند شکل زیر، قرار می دهیم.

اکنون، یک برچسب افزوده و متن آن را به “Ingredients”، تغییر می دهیم. در بخش ، attribute insector، می توانیم ، اندازه فوت و نوع آن را با تغییر گزینه “Font”، تغییر دهیم. می توانیم از فونت پیش فرض سیستم استفاده کرده، و یا فونت دلخواه خود را انتخاب کنیم. در ادامه، برچسب دیگری را برای مدت زمان پخت، اضافه می کنیم. در آخر ، شیء Text View را به صفحه view ، درگ می کنیم. Text View، یک عنصر UI برای نمایش خطوط متنی چندگانه، می باشد. ما از Text View ، برای نمایش لیستی از مواد اولیه ، استفاده خواهیم کرد. به تصویر زیر، توجه کنید:

ایجاد ارتباط بین متغیرها و عناصر UI

با طراحی مجدد interface ، ما باید ارتباط بین کدها و عناصر UI را ایجاد کنیم. در بخش Storyboard ، “Recipe Detail View Controller” را انتخاب کرده و به صفحه Assistant Editor، سوئیچ می کنیم.

کلید کنترل را فشار داده و نگه می داریم، روی image view، کلیک کرده و آن را به “RecipeDetailViewController.h” درگ می کنیم. همین که اشاره گر را بین کلمات کلیدی “@interface” و “@end” قرار دهیم، یک دستوری (prompt) ، خواهیم دید که به ما اجازه می دهد ، یک outlet (پایه) وارد کنیم. نام متغیر outlet را “recipePhoto” ، قرار می دهیم.

مراحل مشابهی را برای برچسب “PrepTime” و TextView تکرار می کنیم. نام outlet برچسب PrepTime را “prepTimeLabel” ، و نام outlet برچسب text view، را “ingredientTextView” ، قرار می دهیم. در نهایت ، یک Property (خصیصه)، برای recipe ، اضافه می کنیم. این خصیصه ، به سایر کنترلرها، اجازه می دهد که جزئیات دستور پخت را انتقال دهند. بعد از اعمال تمام تغییرات، فایل RecipeDetailViewController.h ، باید مانند زیر باشد:

#import <UIKit/UIKit.h>
#import "Recipe.h"
 
@interface RecipeDetailViewController : UIViewController
 
@property (weak, nonatomic) IBOutlet UIImageView *recipePhoto;
@property (weak, nonatomic) IBOutlet UILabel *prepTimeLabel;
@property (weak, nonatomic) IBOutlet UITextView *ingredientTextView;
 
@property (nonatomic, strong) Recipe *recipe;
 
@end

متد viewDidLoad از فایل RecipeDetailViewController.m، را مطابق کد زیر، تغییر می دهیم.

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.title = recipe.name;
    self.prepTimeLabel.text = recipe.prepTime;
    self.recipePhoto.image = [UIImage imageNamed:recipe.imageFile];
 
    NSMutableString *ingredientText = [NSMutableString string];
    for (NSString* ingredient in recipe.ingredients) {
        [ingredientText appendFormat:@"%@\n", ingredient];
    }
    self.ingredientTextView.text = ingredientText;
    
}

در اینجا، ما کدی برای تنظیم Recipe Detail View ، اضافه می کنیم. خط 5 کد، عنوان navigation bar را به name of recipe ، تغییر می دهد. خط 6 و 7 ، برچسب مدت زمان پخت را پیکربندی کرده و تصویر دستور پخت را set می کند.

خط 9 تا 13، آرایه ingredient  را به متن چند خطی برای ingredient text view ، تبدیل می کند. کاراکتر “\n”، یک کاراکتر فاصله می باشد که می گوید: “Put a carriage return here”. به عبارت دیگر، نشانگر (indicator) ، خط جدید می باشد.

انتقال Recipe به Detail View Controller

همان طور که در جلسه آموزش Segue، یاد گرفتیم، Segue ها ، نقل و انتقالات بین view controller ها را مدیریت می کنند. هنگامی که یک segue ، شروع می شود ، قبل از این که انتقال بصری ، اتفاق افتد، storyboard runtime ، متد prepareForSegue:sender: method را از view controller جاری ، فراخوانی می کند. با پیاده سازی این متد ، ما می توانیم هر داده موردنیاز که باید نمایش داده شود، را به view  controller ، ارسال کنیم. اینجا، ما شیء دستور پخت انتخاب شده را به detail view controller ، انتقال می دهیم.

در متد prepareForSegue از فایل RecipeBookViewController.m، کد را به صورت زیر تغییر می دهیم:

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([segue.identifier isEqualToString:@"showRecipeDetail"]) {
        NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
        RecipeDetailViewController *destViewController = segue.destinationViewController;
        destViewController.recipe = [recipes objectAtIndex:indexPath.row];
    }
}

خط 5 از کد بالا، دستور پخت انتخاب شده را (بر اساس indexPath) تعیین می کند و  آن را به Recipe Detail View Controller، (یعنی متغیر destViewController) انتقال می دهد.

اجرای اپ

ما اپ را ساختیم! مرحله آخر، اجرای اپ است ، تا عملکرد آن را ببینیم. اگر اپ ، به درستی کار کند ، باید بتواند جزئیات دستور پخت را نشان دهد.

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

امیدواریم که از آموزشی این جلسه لذت برده باشید و از اپی که ساخته اید، راضی باشد. با این که اپ پیچیده ای  نیست ، اما برخی از عاصر متداول UI را همانند navigation controller و tab bar controller ، شامل می شود. پیشنهاد می کنیم که منتظر مبحث جلسه بعد نمانید ، و خودتان سعی کنید ، تغییرات کوچکی را در اپ اعمال کنید ، تا بهتر از آن چه که هست، شود. به طور مثال ، از table view (به جای text view) ، برای لیست مواد اولیه ، استفاده کنید، یا یک آیتم tab جدید ، اضافه کنید. همان طور که قبلاً گفته ایم، شما فقط با خواندن مطالب این آموزش ها، برنامه نویس خوبی نمی شوند. بلکه ، شما باید بر اساس مطالبی که یاد می گیرید ، کشف کنید ، اشتباه کنید ، بیاموزید، و مهم تر از همه کدنویسی کنید ، اپ را کمی تغییر دهید و آن را به اپ دلخواه خود تبدیل نمایید.