جلسه 27 ام آموزش iOS :آموزش ساخت منوی کشویی

جلسه بیست و هفتم : نحوه افزودن منوی کشویی کناری به اپ iOS

ممکن است تا به حال از خودتان پرسیده باشید: چگونه من می توانم منوی کشویی نوار کناری (slide-out sidebar menu) را در اپ خود ایجاد کنم؟ این سؤال بسیار متداولی است که برای بیشتر تازه کارها پیش می آید. بنابراین در این جلسه ، به شما نشان می دهیم که چگونه یک منوی ناوبری کشویی (slide-out navigation menu) همانند آن چه که در اپ فیس بوک می بینیم ، بسازیم.

برای افرادی که با منو slide out navigation ناآشنا هستند ، Ken Yarmost تعریف و توضیح خوبی را در مورد آن ارائه داده است:

Slide out navigation شامل یک پنل است که در زیر content area (ناحیه محتوایی) اصلی ، در سمت راست یا سمت چپ به صورت کشویی نمایان می شود و scroll view مستقل را به طور عمومی ظاهر می کند که به عنوان navigation (ناوبری) اصلی اپلیکیشن عمل می نماید.

از وقتی که اپ فیس بوک ، طراحی slide-out sidebar design را معرفی نمود ، این طراحی به سرعت به یک روش استاندارد برای پیاده سازی منو Navigation تبدیل شد. به راحتی می توانیم این الگوی طراحی را در بسیاری از اپ های محبوب مرتبط با محتوا ببینیم ، مانند Path ، Mailbox ، Gmail و غیره.

الگوی طراحی slide-out به ما این امکان را می دهد که یک منو navigation در اپ خود بسازیم ، بدون این که فضای صفحه نمایش را به هدر دهیم. به طور معمول ، منو navigation در پشت front view پنهان است. سپس ، منو می تواند توسط یک کلید List در navigation bar فعال شود. هنگامی که منو گسترش یافته و قابل مشاهده می شود ، کاربران می توانند آن را با استفاده از کلید list و یا به سادگی ، با کشیدن منو به سمت چپ ناحیه محتوا ، ببندند.

با وجود راه حل های بسیار زیاد و رایگان در GitHub ، ما در صدد نیستیم که منو slide-out navigation را از ابتدا ، بسازیم. در عوض ، ما از یک کتابخانه ای به نام SWRevealViewController استفاده خواهیم کرد. این کتابخانه عالی توسط John Lluch ، توسعه داده شده است و یک روش سریع و آسان برای قرار دادن منو کشویی ناوبری را فراهم می کند. این کتابخانه ، به صورت رایگان در دسترس است.

به خواندن این مقاله ادامه دهید و با ما در ساخت اپ آزمایشی (demo app) همراه باشید.

اپ demo در یک نگاه

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

• کاربر با ضربه زدن بر روی کلید list در بالا و سمت چپ navigation bar ، منو را فعال می کند.
• کاربر هم چنین می تواند از طریق کشیدن منو به سمت راست content area اصلی ، منو را باز نماید.
• هنگامی که منو ظاهر می شود ، کاربر می تواند آن را با ضربه زدن مجدد بر روی کلید List ، ببندد.
• کاربر هم چنین ، می تواند منو را با کشیدن ، به سمت چپ content area ، منو را ببندد.

ایجاد پروژه Xcode

با داشتن ایده اصلی از چیزی که قرار است بسازیم ، بیایید کار را شروع کنیم. می توانیم پروژه Xcode را از ابتدا و با طراحی رابط کاربری ، مطابق مراحل زیر ایجاد کنیم:

با این حال ، برای صرفه جویی در زمان انجام تنظیمات پروژه ، می توانند تمپلت Xcode پروژه را از اینجا download the Xcode project template دانلود کرده و کار را با آن شروع نمایید.

بسته پروژه در حال حاضر با موارد ذیل همراه است:

• یک Storyboard از پیش ساخته شده با تمام view controller های مورد نیاز.
• کلاس های view controller از پیش ساخته شده شامل MapViewController و PhotoViewController.
• MapViewController که برای نمایش یک نقشه پیاده سازی شده است.
• PhotoViewController  که برای نمایش یک تصویر در image view ، پیاده سازی شده است.
• تمام آیکون ها و عکس های موردنیاز برای اپ (با تشکر از Pixeden برای آیکون های رایگان)

Import کردن کتابخانه SWRevealViewController

همان طور که قبلاً اشاره کردیم ، ما از کتابخانه SWRevealViewController برای پیاده سازی منو کشویی استفاده خواهیم کرد. از این رو ، ابتدا کتابخانه را از اینجا download the library from GitHub دانلود کرده و فایل زیپ شده را extract می کنیم.

بعد از این که فایل را extract کردیم ، باید فایل های “SWRevealViewController.h” و “SWRevealViewController.m” را پبدا کنیم. در project navigator ، روی پوشه SidebarDemo  کلیک راست کرده و “New Group” را انتخاب می کنیم. نام گروه را “SWRevealViewController” قرار می دهیم. هر دو فایل را به پروژه Xcode خود Import کرده و آنها را در زیر بخش “SWRevealViewController” قرار می دهیم.

اتصال Front View و Rear View Controller

یکی از زیبایی های کتابخانه SWRevealViewController این است که پشتیبانی داخلی از Storyboard را فراهم می کند. هنگام پیاده سازی منوی کناری با استفاده از SWRevealViewController ، توسعه دهندگان باید SWRevealViewController را با یک front view controller و rear view controller ، با استفاده از segue ، متصل نمایید. front view controller ، کنترلر اصلی برای نمایش محتوا می باشد. در Storyboard ، این navigation controller است که با view controller دیگری ، جهت ارائه محتواهای خبری ، مرتبط است. در ظاهر ، rear view controller یک کنترلری هست که برای نمایش منوی ناوبری استفاده می شود. به طور معمول ، این منو با استفاده از UITableViewController پیاده سازی می شود.

در تمپلت پروژه Xcode ، ما برای شما view controller های مربوط به front و rear را از پیش ساخته ایم. کاری که شما باید انجام دهید این است که ، segue بین SWRevealViewController   و front/rear view controller را بسازید.

برای انجام این کار ، ابتدا ، initial view controller را انتخاب کرده و کلاس آن را به “SWRevealViewController” تغییر می دهیم.

در ادامه ، کلید کنترل را فشار داده و نگه می داریم. روی SWRevealViewController  کلیک کرده و آن را به Menu view controller درگ می کنیم. بعد از رها کردن کلید کنترل ، یک context menu برای انتخاب segue مشاهده می کنیم. در این مورد ، گزینه “reveal view controller set segue” را انتخاب می کنیم. این امر باعث تعریف یک segue سفارشی به نام “SWRevealViewControllerSetSegue” می شود. این segue سفارشی به SWRevealViewController  می گوید که view controller ، به initial view controller متصل شده است.

نکته: اگر شما از نسخه قدیمی SWRevealViewController استفاده می کنید، لطفا توجه داشته باشید که SWRevealViewControllerSegue در حال حاضر غیرقانونی است. شما باید ، SWRevealViewControllerSetSegue را به جای آن استفاده کنید.

روندهای مشابهی را برای اتصال SWRevealViewController  با navigation controller  مربوط به main view controller (حاوی News Frontpage) تکرار می کنیم.

Segue بین SWRevealViewController و navigation controller را انتخاب می کنیم. در attributes inspector ، شناسه segue را به “sw_front” تنظیم می کنیم. این شناسه پیش فرض است که نشان دهنده یک انتقال از front view controller می باشد.

برای segue بین SWRevealViewController و sidebar view controller ، شناسه segue را به “sw_rear” تنظیم می کنیم. این شناسه ، به SWRevealViewController  می گوید که کنترلر rear view (یعنی sidebar menu) را نمایش دهد.

اگر اپ را کامپایل و اجرا نماییم ، یک اپی را خواهیم دید که “News Frontpage” را نمایش می دهد. اما نمی توانیم منوی کناری را هنگامی بر روی کلید list ضربه می زنیم ، ببینیم. ما هنوز ، متد action را پیاده سازی نکرده ایم.

فایل “MainViewController.m” را که کنترلر کلاس “News Frontpage” است را باز می کنیم. عبارت import زیر را به آن اضافه می کنیم:

#import "SWRevealViewController.h"

در ادامه ، کد زیر را در متد viewDidLoad: اضافه می کنیم:

    SWRevealViewController *revealViewController = self.revealViewController;
    if ( revealViewController )
    {
        [self.sidebarButton setTarget: self.revealViewController];
        [self.sidebarButton setAction: @selector( revealToggle: )];
        [self.view addGestureRecognizer:self.revealViewController.panGestureRecognizer];
    } 

SWRevealViewController ، متد revealToggle: را برای هندل کردن باز و بسته شدن منو کناری فراهم می کند. همان طور که می دانید ، Cocoa از مکانیزم target-action برای برقراری ارتباط بین شیء کنترل و شیء دیگری استفاده می کند. ما هدف (target) کلید sidebar را به ظاهر کردن view controller ، و action را به متد revealToggle: ، تنظیم می کنیم. بنابراین ، وقتی که به کلید sidebar ضربه زده می شود ، متد revealToggle:  را برای نمایش منو کناری فراخوانی خواهد کرد. در نهایت ، ما هم چنین یک gesture recognizer ، اضافه می کنیم. نه تنها می توان از کلید list برای بالا آوردن منو کناری استفاده کرد ، بلکه کاربر می تواند برای فعال کردن sidebar ، ناحیه content area را به سمت راست بکشد.

سعی می کنیم اپ را در شبیه ساز iPhone کامپایل و اجرا نماییم. به کلید List ضربه می زنیم و منو sidebar باید ظاهر شود. دوباره روی کلید List ، برای بستن منو ، ضربه می زنیم. هم چنین ، می توانیم content area را به سمت راست بکشیم تا منو مطابق تصویر زیر باز شود:

قبل از این که کار را ادامه دهیم ، تکه کد مشابهی را به متد viewDidLoad: در دو فایل PhotoViewController.m و MapViewController.m اضافه می کنیم. اپ باید منو sidebar را هنگامی که کاربر کلید list را در هر دو این view controller ها ، ضربه می زند ، نشان دهد.

افزودن Menu Items در Navigation Menu

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

با این حال ، منو هنوز خالی هست. اکنون ، باید چند آیتم به منو اضافه کنیم و نحوه انتقال از یک آیتم ، به آیتم دیگر را نشان دهیم. sidebar view controller ، فقط یک table view controller ساده است. برای ساده نگه داشتن مطالب آموزشی ، ما sidebar menu را در storyboard ، طراحی خواهیم کرد.

سلول اول از Sidebar View Controller ، با عنوان “APPCODA” ، تعریف شده است. اگر شما این عنوان را دوست ندارید ، می توانید آن را به هر چیزی که ترجیح می دهید ، تغییر دهید. تنها چیزی که باید نسبت به آن اطمینان یابید ، این است که شناسه cell را تحت نام “title” نگه دارید ؛ زیرا بعداً در کدها به آن مراجعه خواهیم کرد.

بسیار خوب! بیایید چند آیتم اضافه کنیم. برای شروع ، prototype cell را انتخاب کرده و تعداد prototype cell را در attributes inspector  به 8 تغییر می دهیم. باید کار را مطابق تصویر زیر ، به اتمام برسانیم:

برچسب “APPCODA” را در دومین سلول ، به “News” تغییر می دهیم. به طور اختیاری ، می توانیم رنگ برچسب را به خاکستری تیره تغییر داده و فونت آن را در attributes inspector به “Avenir Next” تنظیم نماییم. در ادامه ، یک شیء image view  را از کتابخانه اشیاء به سلول ، درگ می کنیم. اندازه image view را به 38 در 38 تنظیم کرده و عکس را به “news.png” تغییر می دهیم.

سپس ، سلول را انتخاب کرده و در attributes inspector ، شناسه cell identifier را “news” ، قرار می دهیم. باید کار را مطابق تصویر زیر ، به اتمام برسانیم.

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

• (Comments (images را به comments.png و cell identifier را به comments ، تنظیم می کنیم.
• (Map (images را به map.png و cell identifier را به map ، تنظیم می کنیم.
• (Calendar (images را به calendar.png و cell identifier را به calendar ، تنظیم می کنیم.
• (Wishlist (images را به wishlist.png و cell identifier را به wishlist ، تنظیم می کنیم.
• (Bookmark (images را به bookmark.png و cell identifier را به bookmark ، تنظیم می کنیم.
• (Tag (images را به tag.png و cell identifier را به tag ، تنظیم می کنیم.

اگر همه چیز به درستی انجام شود ،  sidebar view controller  باید مطابق تصویر زیر باشد:

بعد از تکمیل رابط کاربری ، اجازه دهید ، کدها را برای نمایش سلول های جدول ، پیاده سازی کنیم. فایل “SidebarViewController.m” را انتخاب کرده و عبارت import زیر را به آن اضافه می کنیم:

#import "SWRevealViewController.h"

سپس ، متغیر menuItems را برای ذخیره کردن cell identifier مربوط به آیتم های منو ، تعریف می نماییم:

@implementation SidebarViewController {
    NSArray *menuItems;
}

متد viewDidLoad:  را مطابق کد زیر ، به روز رسانی می کنیم:

- (void)viewDidLoad
{
    [super viewDidLoad];
 
    menuItems = @[@"title", @"news", @"comments", @"map", @"calendar", @"wishlist", @"bookmark", @"tag"];
}

کد فوق ، بسیار ساده است. به سادگی آرایه menu item را با مقادیری از cell identifier ، مقداردهی اولیه می کنیم. سپس ، متد  numberOfSectionsInTableView: را برای بازگرداندن مقدار 1 و متد numberOfRowsInSection: را برای بازگرداندن تعداد درست ردیف های جدول ، ویرایش می کنیم:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // Return the number of sections.
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    // Return the number of rows in the section.
    return menuItems.count;
}

در آخر ، متد cellForRowAtIndexPath: را مطابق کد زیر ، تغییر می دهیم:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString *CellIdentifier = [menuItems objectAtIndex:indexPath.row];
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
    
    return cell;
}

این کد به سادگی ، cell identifier را از سلول جدول مشخص شده از آرایه menuItems جت نمایش ، برمی دارد. اکنون ، اپ را دوباره ، کامپایل و اجرا می نماییم. روی کلید list ضربه می زنیم. منو ناوبری کشویی با آیتم های منو ، مطابق تصویر زیر ، نمایش داده خواهد شد:

پیاده سازی Menu Item Selection

تا اینجا ، منوی sidebar جذابی را ساخته ایم. هنوز یک کار وجود دارد که باید انجام دهیم. در حال حاضر ، هیچ segue برای آیتم های منو ، تعریف نکرده ایم. وقتی که هر کدام از آیتم های منو را انتخاب می کنیم ، به view متناظر ، انتقال نمی یابیم.

برای ساده نگه داشتن اپ demo ، ما آیتم های منو را به سه view controller اتصال می دهیم. با این کار ، به خوبی ، به شما نحوه انجام مراحل را نشان خواهیم داد. کارهایی که می خواهیم انجام دهیم ، عبارتند از:

• برقراری اتصال آیتم سلول “News” با main view controller با استفاده از یک segue مربوط به “reveal view controller push controller”.
• برقراری اتصال آیتم سلول “Map” با main view controller با استفاده از یک segue مربوط به “reveal view controller push controller”.
• برای مابقی آیتم های منو ، آنها را به photo view controller با استفاده از نوع segue مشابه ، متصل می کنیم. اما تصاویر متفاوتی را برای آیتم های منوی متفاوت ، نمایش خواهیم داد.

بسیار خوب! به Storyboard برمی گردیم. ابتدا ، سلول map را انتخاب می کنیم. کلید کنترل را فشار داده و نگه می داریم. روی سلول map کلیک کرده و آن را به navigation controller مربوط به map view controller درگ کرده و segue مربوط به “reveal view controller push controller” را در زیر بخش Selection Segue ، انتخاب می کنیم.

روند مشابهی را برای آیتم سلول “News” تکرار می کنیم ، اما آن را به navigation controller مربوط به  main view controller متصل می کنیم.

برای مابقی آیتم های منو که شامل comments ،  calendar ، wishlist ، bookmark و tag می باشند ، تک به تک آنها را به  navigation controller  مربوط به photo view controller متصل کرده و segue identifier را به عنوان “showPhoto” ، قرار می دهیم. ما از این شناسه برای ایجاد تمایز این segue با دو segue قبلی که قبلاً ایجاد کرده ایم ، استفاده خواهیم کرد.

هنگامی که پیکربندی segue در Storyboard ، تکمیل شد ، فایل “SidebarViewController.m” را باز می کنیم. ابتدا ، عبارت import زیر را به آن اضافه می کنیم:

#import "PhotoViewController.h"

سپس ، متد prepareForSegue: را برای مدیریت انتقال ، اضافه می کنیم:

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    
    // Set the title of navigation bar by using the menu items
    NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
    UINavigationController *destViewController = (UINavigationController*)segue.destinationViewController;
    destViewController.title = [[menuItems objectAtIndex:indexPath.row] capitalizedString];
    
    // Set the photo if it navigates to the PhotoView
    if ([segue.identifier isEqualToString:@"showPhoto"]) {
        UINavigationController *navController = segue.destinationViewController;
        PhotoViewController *photoController = [navController childViewControllers].firstObject;
        NSString *photoFilename = [NSString stringWithFormat:@"%@_photo", [menuItems objectAtIndex:indexPath.row]];
        photoController.photoFilename = photoFilename;
    }
}

در کد فوق ، ما ابتدا ، شناسه سلول جاری را بازیابی می کنیم و آن را به عنوان title مربوط به navigation bar تنظیم می کنیم. برای این segue ها ، با شناسه “showPhoto” ، کنترلر  photo view controller فقط یک عکس ، نشان خواهد داد. در اینجا ، نام فایل عکسی که باید نمایش داده شود را تنظیم می کنیم. می گوییم که ، هنگامی که کاربر آیتم “Comments” را ضربه می زند ، ما تصویر “comments_photo.jpg” را نشان خواهیم داد.

کامپایل و اجرا کردن اپ نهایی

اکنون ، اپ را دوباره کامپایل و تست می نماییم. منو sidebar را باز کرده و آیتم map را ضربه می زنیم. اپ باید map view را بالا بیاورد. سعی می کنیم سایر آیتم های منو را تست کرده و نحوه عملکرد آنها را مشاهده و بررسی نماییم:

خلاصه

در این آموزش ، ما به شما نشان دادیم که چگونه از SWRevealViewController  برای پیاده سازی یک منو slide-out navigation ، مشابه آن چه که در اپ فیس بوک وجود دارد ، استفاده کنیم. اگر در GitHub ، جستجو کنید ، می توانید راه حل های دیگری را برای sidebar menu مانند GHSidebarNav و ViewDeck ، پیدا کنید. می توانید در مورد سایر کتابخانه ها ، کاوش کنید و ببینید کدامیک از آنها برای اپ شما ، مناسب تر هستند. اگر مایل هستید که ساخت sidebar menu را از ابتدا ، آموزش ببینید ، می توانید این آموزش  great tutorial را دنبال کنید.