جلسه یازدهم آموزش iOS : ایجاد Tab Bar Controller و Web View ها

این سومین مقاله، از سری مقالات Storyboardها می باشد. در جلسه قبل، نحوه انتقال داده بین view controllerها را با استفاده از segue، شرح دادیم. در این جلسه قصد داریم ، پروژه Storyboard خود را صیقل داده و ببینیم، چگونه می توانیم دو عنصر UI دیگر را در اپ iPhone استفاده نماییم.
در این جلسه، موارد ذیل را آموزش خواهیم داد:

• نحوه ایجاد Tab Bar Controller
• نحوه ساخت یک صفحه با استفاده از UIWebView

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

بررسی Tab Bar Controller و UIWebView :

ابتدا، اجازه بدهید طبق روال قبل، مقدمه مختصری در مورد Tab Bar Controller و UIWebView داشته باشیم. ممکن است شما با واژه “Tab Bar”، آشنا نباشید، اما غالباً در بسیاری از اپ های آیفون یافت می شود. به چند نمونه، از کاربردهای “Tab Bar” ، در اپ ها توجه نمایید. همه این اپ ها از Tab Bar controller، برای نشان دادن view متفاوت در هر tab، استفاده می کنند. به طور معمول، Tab Bar ، حداقل حاوی دو tab می باشد، برنامه نویس مجاز است، بسته به نیاز خود، حداکثر تا پنج tab، به اپ خود اضافه نماید.

UIWebView ، یک مؤلفه مفید، برای بارگذاری محتوای وب می باشد. در برخی از موارد، شما می خواهید یک صفحه وب را به صورت محلی، در اپ خود نمایش دهید، یا اجازه دهید، کاربران به صفحات وب خارجی، از درون اپ شما، دسترسی یابند. شما، به راحتی می توانید، شیء UIWebView ، را در اپ خود جاسازی کرده و یک درخواست برای بارگذاری محتوای وب، ارسال نمایید.

ایجاد یک Tab Bar Controller

اکنون به پروژه Xcode خود باز می گردیم. ابتدا، اجازه دهید، آن چه را که تاکنون انجام داده ایم،  به طور خلاصه، شرح دهیم. اگر آموزش، جلسه قبل را دنبال کرده باشید؛ می دانید که یک اپ ساده دستور پخت با استفاده از Navigation interface ، ساخته ایم. آن اپ، به طور کامل پیاده سازی نشده است، اما کار می کند.

در این جلسه قصد داریم، با صیقل دادن اپ خود، یک tab bar interface بسازیم. ممکن است، فکر کنید که این کار سخت است و نیاز به کدنویسی بسیاری دارد. حضور Storyboardها، همه چیز را ساده تر کرده است. جاسازی navigation controller، درون یک tab bar controller، به سادگی فقط با یک اشاره و کلیک انجام می شود.
ابتدا، “Navigation Controller” ، در MainStoryboard.storyboard را انتخاب می کنیم. سپس، “Editor” را از منو، انتخاب کرده و “Embed in” را باز کرده و در ادامه، “Tab Bar Controller” را انتخاب می کنیم. مطابق تصویر زیر:

همان طور که در شکل زیر می بینید، Xcode، به طور خودکار، navigation controller را درون یک tab bar controller ، قرار می دهد. فوق العاده آسان است، موافق هستید؟ ممکن است فکر کنید که این کار بی اهمیت است. قبل از این که اپل، ویژگی Storyboard را معرفی کند، لازم بود که کدنویسی کرده و یک NIB جداگانه جهت جاسازی tab bar controller ، طراحی می کردیم.

تغییر دادن نام Tab Bar Item

به طور پیش فرض، آیتم tab bar، نامگذاری نشده و آیکونی ندارد. آیتم tab ، در Navigation Controller را انتخاب می کنیم. برای تغییر دادن نام و انتخاب آیکون در Attributes Inspector ، آزاد هستیم. آیتم tab bar، به طور پیش فرض، برای شناسه “custom” تعریف شده است. هنگامی که tab bar، به حالت custom تنظیم می شود، به این معنا است که باید عنوان و تصویر را به صورت دستی، تعیین کنیم.

همچنین می توانیم از برخی از آیتم های داخلی tab bar ، که یک آیکون می تواند شامل آنها باشد (مانند More،  Favorites، Top Rated)، استفاده کنیم. اجازه دهید که این آموزش را ساده نگه داریم و از آیتم داخلی استفاده کنیم. “Featured” را به عنوان شناسه، انتخاب می کنیم. صفحه نمایش، باید شبیه تصویر زیر باشد:

اجرای اپ

اکنون، اپ آماده تست می باشد. کلید “Run” را کلیک کرده و ببینیم اپ چگونه کار می کند. اپ باید، بسیار شبیه آن چه که در جلسه قبل ساختیم، باشد، فقط tab bar باید به آن اضافه شده است.

اضافه کردن یک Tab جدید

ما از tab bar interface برای سازماندهی اپ خود برای حالت های عملیاتی مختلف، استفاده می کنیم. هر tab، توابع خاصی را ارائه می دهد. بدیهی است که، هنگامی که از tab bar controller ، استفاده می شود، حداقل دو tab، در یک اپ وجود دارد. بنابراین، ما قصد داریم، یک tab جدید، برای نمایش داده های صفحه “About” اپ، ایجاد کنیم.
شیء “Navigation Controller” ، را به داخل Storyboard، درگ می کنیم. navigation controller پیش فرض، با یک table view controller ، مرتبط است.

در ادامه، ما باید یک ارتباط، بین navigation controller جدید و tab bar controller موجود، ایجاد نماییم. کلید کنترل صفحه کلید را فشار داده و نگه می داریم، روی TabBarController کلیک کرده و اشاره گر ماوس را به داخل Navigation Controller جدید، می کشیم.

کلیدها را رها می کنیم. یک صفحه pop-up نمایش داده می شود. گزینه “Relationship – View Controllers”  را انتخاب می کنیم. این عمل، به Xcode می گوید که Navigation Controller ، بخشی از Tab Bar Controller می باشد.

به محض این که ارتباط برقرار شد، Tab Bar Controller، به طور خودکار، یک tab جدید اضافه می کند و آن را به Navigation Controller جدید، ارتباط می دهد.

آیتم tab bar از Navigation Controller جدید را به “More” تغییر می دهیم. Storyboard را ذخیره کرده و اپ را دوباره اجرا می کنیم. آیا Tab جدید “More” را مشاهده نمی کنید؟

ایجاد صفحه ‘About’ با UIWebView

Tab جدید “More” ، در حال حاضر، خالی می باشد. ما قصد داریم، آن را به یک صفحه web view ، برای نمایش دادن صفحه “About” اپ ، تبدیل کنیم. ابتدا، “Table View Controller”، را حذف کرده و آن را با یک View Controller ، جایگزین می کنیم. به سادگی ، “Table View Controller” را انتخاب کرده و کلید DELETE را برای حذف آن، کلیک می کنیم. سپس، شیء “View Controller” را از Object Library ، درگ می کنیم.

در حال حاضر، View Controller خالی، با Navigation Controller ، ارتباط ندارد. ما باید آن ها را بهم پیوند دهیم. کلید کنترل را فشار داده و نگه می داریم. Navigation Controller را انتخاب کرده و آن را به سوی View Controller ، درگ می کنیم.

مانند کاری که قبلاً انجام دادیم، گزینه “Relationship – View Controllers” را برای ایجاد ارتباط بین دو کنترلرها، انتخاب می کنیم.

هدف اصلی این view controller ، نمایش دادن صفحه وب “About” می باشد. iOS SDK ، یک شیء داخلی UIWebView ، برای نمایش دادن محتوای وب ، دارد. ما می توانیم، به سادگی شیء UIWebView را در هر view contoller ، جاسازی نماییم؛ سپس، به آن یک درخواست HTTP، ارسال کنیم. UIWebView به طور خودکار، محتوای وب را برای ما بارگذاری می کند. “Web View” را در Object Library ، پیدا کرده و آن را به داخل صفحه View Controller اضافه می کنیم.

تخصیص یک کلاس View Controller جدید

همان طور که در آموزش جلسه قبل، شرح دادیم، یک view controller خالی، با کلاس پیش فرض UIViewController، ارتباط داده شده است، که فقط می تواند، مدل مدیریت fundamental view را فراهم می کند. ظاهراً، این View Controller، نمی تواند با یک متغیر برای کنترل کردن UIWebView، همراه باشد. ما مجبور هستیم، یک کلاس View Controller جدید ایجاد کنیم، که از UIViewController  گسترش می یابد.
در Project Navigator، روی پوشه “RecipeBook” کلیک راست کرده و گزینه “New File …” را انتخاب می کنیم.

“Objective-C Class” را در بخش Cocoa Touch، به عنوان تمپلت کلاس، انتخاب می نماییم.

نام کلاس را “AboutViewController”، قرار می دهیم. این کلاس، به عنوان یک زیر کلاس از “UIViewController”، محسوب می شود. اطمینان یابید که گزینه “With XIB for user interface” به حالت uncheck، باشد. با توجه به این که، از Storyboardها برای طراحی رابط کاربری استفاده می کنیم، نیازی به ایجاد فایل جداگانه interface builder نداریم. کلید “Next” را کلیک کرده و فایل را در پوشه پروژه، ذخیره می کنیم.

در ادامه، view controller را با “AboutViewController” ارتباط می دهیم. به Storyboard editor بازگشته و view controller را انتخاب می کنیم. در بخش identity inspector، کلاس را به “AboutViewController” تغییر می دهیم.

استفاده از UIWebView برای بارگذاری یک درخواست

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

• افزودن “about.html” و “about.jpg” به پروژه Xcode خود.
• تخصیص یک متغیر برای UIWebView و وابسته کردن آن با شیء Web View در Storyboard.
• استفاده از متد loadRequest: method در UIWebView، برای بارگذاری محتوای وب.

افزودن صفحه ‘About.html’

کلاس UIWebView به ما اجازه می دهد، محتوای وب را به دو صورت محلی (locally) و از راه دور (remotely)، بارگذاری کنیم. می توانیم یک درخواست HTTP (برای مثال، http://www.google.com)، را جهت بارگذاری وب سایت از راه دور را،  به UIWebView ارسال کنیم. از سوی دیگر، می توانیم از UIWebView، بارگذاری صفحات وب جاسازی شده در اپ را درخواست نماییم.
شما می توانید صفحه about.html خود را بسازید. برای ایجاد راحتی، می توانید فایل مربوط به صفحه ‘about’ را از این قسمت  download the about.zip دانلود کرده و پس از extract کردن، همه فایل ها را به پروژه Xcode خود بیافزایید.
تخصیص یک متغیر برای UIWebView
فایل “AboutViewController.h” را انتخاب کرده و یک خصیصه جدید برای UIWebView اضافه می کنیم.
 

@interface AboutViewController : UIViewController
 
@property (nonatomic, strong) IBOutlet UIWebView *webView;
 
@end

به فایل “AboutViewController.m” رفته و synthesis  را برای متغیر، اضافه می کنیم. باید اطمینان حاصل شود که کد، درست زیر عبارت  “@implementation AboutViewController”، قرار داده شود.

@implementation AboutViewController
 
@synthesize webView;

طبق روال، نیاز به ایجاد ارتباط بین متغیر “webView” و visual web view داریم. در Storyboard editor، کلید command را فشار داده و نگه می داریم و سپس روی آیکون “View Controller” کلیک کرده و آن را به داخل شیء Web View، درگ می کنیم. کلیدها را رها می کنیم. یک صفحه Pop-up متغیرها را جهت انتخاب، نشان می دهد. متغیر “webView” را انتخاب می کنیم.

بارگذاری محتوای وب

داخل متد viewDiLoad، کد زیر را جهت بارگذاری صفحه “about.html”، اضافه می کنیم:
 

	- (void)viewDidLoad
{
    [super viewDidLoad];
 // Add code to load web content in UIWebView
    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle]pathForResource:@"about.html" ofType:nil]];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];
}

کلاس UIWebView، یک متد مناسب به نام “loadRequest:” جهت بارگذاری محتوای وب، فراهم می کند. کاری که ما باید انجام دهیم، انتقال یک درخواست URL به آن می باشد. خط 5، از کد بالا، مسیر سیستم از صفحه “about.html” را در قالب یک شیء NSURL، باز می گرداند. خط 6، یک NSURLRequest، با استفاده از URL، ایجاد می کند. واضح است که خط 7، درخواست را به web view، ارسال می کند.
تحویل نهایی
روی کلید “Run” کلیک کرده و سعی می کنیم، اپ را اجرا کنیم. اگر همه چیز به درستی انجام شده باشد، تحویل نهایی باید شبیه به تصویر زیر باشد. وقتی teb، “More” انتخاب می شود، باید به طور خودکار، صفحه “about.html” بارگذاری شود.

خلاصه

Storyboard، طراحی رابط کاربری در اپ iOS را ساده کرده است. همان طور که در این آموزش می بینید، بدون یک خط کد، ما توانستیم یک tab bar controller ایجاد کرده و سایر کنترلرها را در آیتم های tab جاسازی کنیم. هم چنین نشان دادیم که چگونه می توان، با استفاده از UIWebView، محتوای وب را بارگذاری نمود. UIWebView، عملکرد اساسی از یک مرورگر وب موبایل را ارائه می دهد. هر زمان که نیاز به نمایش صفحه وب، درون اپ، باشد، web view را جاسازی کرده و یک درخواست به آن ارسال می کنیم.

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