جلسه 33 آموزش iOS : ایجاد یک اپ جهانی Universal با مثال

ایجاد یک اپ Universal

یک اپ جهانی (universal) ، اپ واحدی است که برای دستگاه های iPhone و iPad بهینه سازی شده باشد. از منظر کاربر ، این ویژگی ، بهترین تجربه کاربری را بدون دانلود کردن دو ورژن متفاوت از اپ را فراهم می کند. هنگامی که کاربر اپ universal را در iPhone باز می کند ، ورژن آیفون اپ را مشاهده خواهد کرد. اگر کاربر آن را در آیپد اجرا نماید ، ورژن آیپد اپ را مشاهده خواهد کرد ، بدون این که متفاوت از اپ ورژن آیفون باشد ، فقط طراحی سفارشی شده برای ورژن آیپد می باشد.

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

Xcode کدنویسی اپ های universal را ساده کرده است. این بدان معنی نیست که کل فرآیند خودکار انجام می شود. هنوز انجام این کار شامل کارهای زیادی می باشد که باید بر اساس آن view controller ها برای اندازه های مختلف صفحه نمایش ها ، بهینه سازی شوند. بدیهی است که view controller برای آیفون (و آیپد لمسی) از نوع آیپد آن متفاوت است.

در Xcode ، ما می توانیم رابط کاربری را ، هم با استفاده از Interface Builder (یعنی nib file) و هم با استفاده از Storyboard بسازیم. فرآیند ایجاد اپ universal بستگی به روشی دارد که ما برای طراحی UI استفاده می کنیم. در این آموزش ، ما شرح خلاصه ای از هر دو رویکرد ارائه خواهیم کرد و یک اپ demo بسیار ساده را خواهیم ساخت.

ایجاد اپ universal با استفاده از Storyboard

هنگامی که ما در ابتدا ، پروژه Xcode را ایجاد می کنیم ، با یک گزینه برای تعریف دستگاه های قابل پشتیبانی مواجه می شویم. گزینه “Universal” را انتخاب می کنیم. Xcode به طور خودکار یک پروژه ، برای تمام دستگاه های iOS تولید می کند.

ما دو فایل متفاوت Storyboard خواهیم دید – یکی برای آیفون/ آیپد لمسی و دیگری برای آیپد. اگر به بخش project summery برویم (یعنی تب summery در بخش setting پروژه) ، ما باید دو بخش از deployment info را برای دستگاه های مختلف ببینیم.

همان طور که در تصویر فوق مشاهده می شود ، هر دستگاه ، ورژن Storyboard خود را دارد. این همان چیزی است که بر اساس آن می توانیم رابط کاربری سفارشی را برای دستگاه های مختلف در یک پروژه Xcode واحد طراحی نماییم. ما ورژن متفاوتی از view ها یا view controller ها را در هر storyboard تعریف می کنیم. هنگامی که اپ را در آیفون باز می کنیم ، ورژن آیفون از storyboard مورد استفاده قرار می گیرد و viewهای مربوط به ورژن iPhone را مشاهده خواهیم کرد.

ساخت یک اپ universal ساده

ما یک اپ بسیار ساده را توسعه خواهیم داد که نحوه ایجاد اپ universal را با استفاده از Storyboard نشان می دهد. با فرض این که شما پروژه Xcode را برای دستگاه های جهانی ایجاد کرده اید (یا برای شروع کار ، تمپلت پروژه را از اینجا download the project template  دانلود کرده اید) بیایید ابتدا به سراغ نسخه storyboard آیفون ( یعنی MainStoryboard_iPhone.storyboard) برویم و UI آن را طراحی نماییم.

ابتدا یک image view را به داخل view controller درگ می کنیم و تصویر را به عنوان background-menu.png تنظیم می کنیم. سپس ، یک شیء button به کنترلر اضافه می کنیم. در بخش Attributes Inspector نوع کلید را به “custom”  تغییر داده و تصویر کلید را به  button_play.png تنظیم می کنیم. کار ما با storyboard با چیزی شبیه به تصویر زیر پایان می یابد.

اکنون ، به نسخه Storyboard آیپد سوئیچ می کنیم. به طور پیش فرض ، Xcode باید یک view controller را تولید نماید که برای آیپد سفارشی سازی شده است. دوباره ، یک image view به داخلی view controller درگ می کنیم. این بار ، تصویر را به عنوان  background-menu~ipad.png تنظیم می کنیم. پسوند ~ipad نشان می دهد که این یک تصویر جهت نمایش در آیپد می باشد. سپس یک شیء button به view اضافه کرده و تصویر کلید را به button_play~ipad.png تنظیم می کنیم. هم چنین ، نوع کلید را به گزینه “custom” تغییر می دهیم.

بسیار خوب ، ما یک اپ universal ساختیم. اپ را کامپایل کرده و اجرا می کنیم و آن را در هر دو شبیه ساز iPhone و iPad تست می کنیم.

کلاس view controller

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

iOS SDK ماکرو UI_USER_INTERFACE_IDIOM را برای ما فراهم می کند تا مسیرهای کد شرطی برای پشتیبانی از ویژگی های خاص دستگاه ها را ایجاد کنیم. این ماکرو به ما اجازه می دهد که به راحتی نوع دستگاه را تعیین کنیم. اگر دستگاه ، یک آیپد باشد ، مقدار برگشت داده شده ماکرو ، UIUserInterfaceIdiomPad خواهد بود. اگر دستگاه هم آیفون و یا آیپد لمسی باشد ، مقدار برگشت داده شده توسط ماکرو UIUserInterfaceIdiomPhone می باشد. عبارت شرطی مطابق کد زیر می باشد:

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) 
{
        // Place iPhone/iPod specific code here...
} else {
        // Place iPad-specific code here...
}

بیایید کار را در داخل مثال دنبال کنیم. پروژه Xcode حاوی یک کلاس ViewController می باشد که با view controller هر دو ورژن Storyboard آیفون و آیپد مرتبط است.

ابتدا ، یک ارتباط “Action” بین کلید Play و فایل ViewController.h ایجاد می کنیم. action مشابهی را به برای کلیدهای Play در هر دو ورژن Storyboard ها مرتبط می سازیم.

در فایل ViewController.m ، متد play:  را با کدهای زیر ویرایش می کنیم:

- (IBAction)play:(id)sender {
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
        // For iPhone
        UIAlertView *playAlert = [[UIAlertView alloc] initWithTitle:@"New Game" message:@"Start Playing..." delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
        [playAlert show];
        
    } else {
        // For iPad
        UIAlertView *playAlert = [[UIAlertView alloc] initWithTitle:@"Game Over" message:@"Just ended..." delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
        [playAlert show];
    }
}

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

اپ demo بسیار ساده است. اما ، نشان می دهد هنگامی که می خواهیم یک کلاس view controller متداول را به اشتراک بگذاریم ، چگونه می توانیم بین انواع دستگاه ها تمایز قائل شویم.

ایجاد اپ Universal با استفاده از Interface Builder

بسیار خوب، تا اینجا اصول توسعه اپ universal را آموختید. بعد از Storyboard ، شاید بخواهید که Interface Builder را برای ایجاد رابط کاربری استفاده نمایید. در این مورد ، ما دو فایل nib ایجاد خواهیم کرد – یکی برای آیفون و دیگری برای آیپد. فایل nib آیپد به طور متداول با modifier دستگاه “~ipad” نشان داده می شود.

ما وارد جزئیات کد مربوط به Interface builder نخواهیم شد. اما معمولاً ، یک بخش شرطی ، برای انتخاب فایل nib جهت لود بر اساس نوع دستگاه جاری داریم. قطعه کد مورد استفاده به شرح ذیل است:

+ (id) loadFromXib {
    NSString *xibName = NSStringFromClass(self);
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
        xibName = [xibName stringByAppendingString:@"~ipad"];
    }
    return [self loadFromXibNamed:xibName];
}

راه اندازی تصاویر ، آیکون اپ و تصاویر اپ

به غیر از دو ورژن از storyboard یا Interface builder ، ما باید دو ورژن از فایل های منبع را نیز بسازیم. به عنوان مثال ، اگر از تصاویر استفاده می کنیم ، ممکن است لازم باشد که ورژن های بزرگ تر (یا با وضوح بالاتر) را برای پشتیبانی از دستگاه های آیپد ، اضافه نماییم. برای حفظ سادگی مطالب ، ما به طور خلاصه سه نوع فایل منبع از جمله تصویر launch ، آیکون اپ و تصاویر آپ را مورد کنکاش قرار خواهیم داد.

تصاویر راه اندازی

اپ های universal  باید تصاویر راه اندازی را برای هر دو نوع دستگاه های آیفون و آیپد فراهم نمایند. به طور معمول ، ما باید یک نصویر راه اندازی را در جهت عمودی برای اپ های آیفون و هم چنین اپ های آیپد استفاده کنیم.

اپ های آیفون فقط به یک تصویر در جهت عمودی نیاز دارند ، در حالی که اپ های آیپد ، به طور معمول ، به تصاویر مختلفی در جهت های عمودی و افقی نیاز دارند. به طور خلاصه ، ما باید تصاویر launch زیر را برای اپ Universal فراهم کنیم:

• تصویر راه اندازی برای آیفون غیر از retina (320 در 480)
• تصویر راه اندازی برای آیفون retina 4 , 4S (640 در 960)
• تصویر راه اندازی برای آیفون retina 5 (640 در 1136)
• تصویر راه اندازی برای آیپد retina (1024 در 768)
• تصویر راه اندازی برای آیپد retina (2048 در 1536)

Xcode 5 قابلیت Asset Catalogs را معرفی می نماید که مدیریت تصاویر راه اندازی و آیکون آپ ها را ساده می کند. در بخش تنظیمات General مربوط به Target ، باید بخش های App Icons و Launch Images را پیدا کنیم:

روی کلید فلس از Launch Image برای دسترسی به مجموعه تصاویر launch کلیک می کنیم. مجموعه تصویر راه اندازی ، حاوی تمام نمایه های تصویر راه اندازی استاتیک می باشد که اپ در طول راه اندازی نمایش می دهد. ما به سادگی می توانیم تصویر را از Finder درگ کرده و آن را به image well مناسب تنظیم کنیم

برای دانستن الزامات تصویر راه اندازی ، می توانید به مرجع  Apple’s iOS Human Interface Guidelines مراجعه نمایید.

آیکون اپ

همانند تصویر راه اندازی ، ما باید ورژن های مختلفی از آیکون های اپ را فراهم کنیم تا مطابق با الزامات اپل باشند. اگر هر کدام از آیکون های اپ را فراموش کنید ، اپ نمی تواند به App Store ارسال شود.

شبیه به آن چه که در بخش قبل ، شرح دادیم ، ما باید ورژن های مختلفی از آیکون اپ را فراهم کنیم تا وضوح صفحات نمایش مختلفی را پشتیبانی کنند. نام فایل ها هر چیزی که ما می خواهیم ، می توانند باشند ، اما ، تمام فایل های تصویری باید در فرمت PNG باشند.

لیست زیر آیکون های موردنیاز برای اپل را نشان می دهد:

•  آیکون اپ برای آیفون غیر از retina – 57 در 57 پیکسل برای iOS 6 و پایین تر ، 60 در 60 پیکسل برای iOS 7
• آیکون اپ برای آیفون retina – 114 در 114 پیکسل برای iOS 6 یا پایین تر ، 120 در 120 پیکسل برای iOS 7
• آیکون اپ برای آیپد غیر از retina – 72 در 72 پیکسل برای iOS 6 یا پایین تر ، 76 در 76 پیکسل برای iOS 7
• آیکون اپ برای آیپد retina – 144 در 144 پیکسل برای iOS 6 یا پایین تر ، 156 در 156 پیکسل برای iOS 7

به طور اختیاری ، می توانیم آیکون را برای تنظیمات و فوکوس متراکم کنیم. asset catalog به وضوح ، اندازه مورد نیاز آیکون را نشان می دهد. برای تخصیص یک آیکون به اپ ، ساده ترین راه ، پیکربندی آن از طریق Asset Catalog می باشد. به سادگی آیکون خود را به image well از مجموعه آیکون درگ می کنیم.

تصاویر اپ

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

مشابه تصاویر راه اندازی ، ما از modifier دستگاه (~ipad) برای نشان دادن تصاویر آیپد استفاده می کنیم.

 بیایید button_buy.png  را به عنوان یک مثال در نظر بگیریم. می خواهیم که یک کلید Buy در storyboard اضافه کنیم. برای ورژن آیفون از storyboard ، باید button_buy.png  را به عنوان image تخصیص دهیم ، در حالی که در storyboard ورژن آیپد باید از button_buy~ipad.png استفاده کنیم. نیازی نداریم که تصاویر @2x را مستقیماً اختصاص دهیم. iOS به طور خودکار تصاویر @2x در دستگاه retina لود می کند.

اتمام کار

در این آموزش ، ما به شما معرفی بسیار خلاصه ای از یک اپ Universal را ارائه کردیم و نیازمندی های آن را مانند تصاویر راه اندازی ، آیکون اپ و فایل های منبع را بیان کردیم. اکنون ، شما باید ایده اصلی از نحوه عملکرد اپ های universal ایجاد شده با استفاده از Storyboard را دریافت کرده باشید. برای کسب اطلاعات بیشتر در مورد اپ های universal می توانید به مرجع Apple’s official developer doc نیز مراجعه نمایید.