بازدید: ١٢٧۶

ایجاد یک اپلیکیشن جامع (Universal App) در IOS

 

آموزش برنامه نویسی درIOS: ایجاد یک اپلیکیشن جامع (Universal App)

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

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

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

 

آموزش اپلیکیشن جامع

 

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

 

ایجاد اپلیکیشن جامع با استفاده از Storyboard


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

 

آموزش اپلیکیشن جامع

 

شما دو فایل مختلف Storyboard را مشاهده می کنید( یکی برای آی فون / آی پاد لمسی و دیگری برای آی پد).  اگر به قسمت خلاصه پروژه بروید(به عبارتی دیگر برگه summary  را که در زیر تنظیمات پروژه قرار دارد انتخاب کنید)، دو بخش اطلاعات برای دستگاه های مختلف را مشاهده می کنید.

 

آموزش اپلیکیشن جامع

 

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


ساخت یک اپلیکیشن جامع ساده


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


ابتدا یک نمای تصویر را به سمت کنترلر نما بکشید و تصویر را به نام  background-menu.png نامگذاری کنید. سپس دکمه ای را به کنترلر اضافه کنید. در زیر Attributes Inspector ، نوع دکمه را به " custom "  تغییر دهید و تصویر دکمه را به نام button_play.png ذخیره کنید.

 

آموزش اپلیکیشن جامع

 

حال به نسخه آی پد Storyboard بروید. به طور پیش فرض، اکنون Xcode باید یک کنترلر نما ایجاد کند که برای آی پد سفارشی شده است. مجددا یک نمای تصویر را به سمت کنترلر نما بکشید. اکنون، تصویر را به نام background-menu~ipad.png ذخیره کنید. پسوند ~ipad نشان دهنده آن است که  تصویر برای iPad است. آنگاه یک دکمه به نما اضافه کنید و تصویر را به نام button_play~ipad.png  ذخیره کنید. همچنین نوع دکمه را " custom " بگذارید.

 

آموزش اپلیکیشن جامع

 

اکنون  شما یک اپلیکیشن جامع ساختید. کافی است آن را کامپایل کرده و اجرا کنید سپس آن را بر روی شبیه ساز آی فون و آی پد آزمایش کنید.

 

آموزش اپلیکیشن جامع

 

نمایش کلاس کنترلر


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

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

 

آموزش اپلیکیشن جامع

 

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

در ابتدا، یک اتصال  " Action "  بین دکمه Play  و ViewController.h  ایجاد کنید. همان عملکرد را برای دکمه های Play  در هر دو نسخه از Storyboard راه اندازی کنید .

 

آموزش اپلیکیشن جامع

 

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

 

آموزش اپلیکیشن جامع

 

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

 

آموزش اپلیکیشن جامع

 

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


ایجاد اپلیکشن جامع با استفاده از Interface Builder


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

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

 

آموزش اپلیکیشن جامع

 

بازکردن  تصاویر، آیکون اپلیکیشن و تصاویر اپلیکیشن



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

بازکردن تصاویر


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

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


    بازکردن تصویر برای آی فونی که صفحه لمسی آن Retina نیست (320 × 480)


    بازکردن تصویر برای آی فون 4 و 4S با صفحه لمسی Retina (640 × 960)


    بازکردن تصویر برای آی فون 5 با صفحه لمسی Retina (640 × 1136)


    بازکردن تصویر برای آی پدی که صفحه لمسی آن Retina نیست (1024 × 768)


    بازکردن تصویر برای آی پد با صفحه لمسی Retina (2048 × 1536)

 

 Xcode  قابلیتی به نام Asset Catalogs را ارائه می دهد که مدیریت بازکردن تصاویر و آیکون های اپلیکیشن را آسان می کند. در قسمت تنظیمات General  ، باید بتوانید قسمتهای App Icons  و Images sections را پیدا کنید.

 

آموزش اپلیکیشن جامع

 

با انگشت بر روی دکمه فلش Launch Images  ضربه بزنید تا  به تنظیمات مربوط به بازکردن تصاویر دسترسی پیدا کنید. تنظیمات مزبور شامل تمامی تنظیمات مربوط به بازکردن یک تصویر ثابت می باشد که اپلیکیشن در حین بازکردن تصویر نمایش می دهد. به سادگی می توانید تصویر را از Finder کشیده و آن را در مکان مناسب قرار دهید.

 

آموزش اپلیکیشن جامع

 

آیکون اپلیکیشن


همانند بازکردن تصاویر، شما مجبور به ارائه نسخه های متعددی از آیکون اپلیکیشن هستید که منطبق با خواسته های اپل باشد. اگر هر کدام از آیکون های اپلیکیشن را فراموش کنید، اپلیکیشن مربوطه قادر به ثبت نام در App Sore نخواهد بود.

شبیه به آنچه که در قسمت قبلی توضیح دادیم، شما مجبور به ارائه نسخه های مختلفی از آیکون های اپلیکیشن می باشید تا از رزولیشن های مختلف صفحه نمایش پشتیبانی کنند. اسامی فایلها را می توانید به دلخواه انتخاب کنید، ولی فرمت همه فایل های تصویری باید 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  است. کافی است آیکون خود را به سمت تصویر مربوط به تنظیم آیکون بکشید.

 

آموزش اپلیکیشن جامع

 

تصاویر اپلیکیشن



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

 

آموزش اپلیکیشن جامع

 

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

برای نمونه بیایید به دکمه  _buy.png  نگاهی بیاندازیم. فرض کنید می خواهید یک دکمه Buy  در storyboard اضافه کنید. برای نسخه آی فون storyboard ، شما باید دکمه  _buy.png  را به صورت یک تصویر اختصاص دهید، در حالی که باید از دکمه  _buy~ipad.png  در نسخه آی پد storyboard استفاده کنید. نیازی به تخصیص مستقیم @2x  تصاویر ندارید. iOS به طور خودکار تصاویر @2x را در ابزارهای دارای صفحه لمسی Retina بارگذاری می کند.

طراحی سایت و سئو توسط ضابط