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

جلسه بیست و ششم: نحوه استفاده از UIPageViewController برای ساخت صفحات آموزشی

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

کلاس UIPageViewController ، در داخل iOS 5 SDK ، به عنوان مکانیزمی برای پیاده سازی یک صفحه با سبک چرخشی (turning style) در رابط کاربری ، معرفی شده است. کلاس UIPageViewController ، یک کلاس با قابلیت تنظیم بسیار بالا است که به توسعه دهندگان امکان پیکربندی موارد ذیل را می دهد:

• جهت نمایش صفحه – عمودی یا افقی.
• سبک انتقال – سبک صفحه چرخشی یا یک سبک نقطه محور (dot based style) .
• Axis (محورهای مختصات) که در حول آن ، صفحه می چرخد.

در این آموزش ، ما قصد داریم نحوه استفاده از UIPageViewController را برای پیاده سازی یک اپ ساده نشان دهیم ، که در آن کاربران اجازه دارند بین صفحات متعدد scroll کنند. نمونه هایی از این نوع اپ را می توان در پیاده سازی page view مربوط به بازی ها ، مانند Angry Birds جهت نشان دادن level های موجود در بازی ، یا در اپ هایی که شامل صفحات  tutorial/walkthrough  هستند ، مشاهده کرد.

پیش از iOS 5 ، ما مجبور بودیم که از کلاس UIPageControl استفاده کنیم و به طور صریح ، انیمیشن ها و انتقال بین صفحات را کنترل کنیم. این روند ، با معرفی کلاس UIPageViewController ، بسیار ساده تر شده است. ما سعی خواهیم کرد اپ خود را ساده نگه داریم و بر روی نحوه استفاده از کلاس UIPageViewController تمرکز کنیم. با این حال ، با داشتن درک پایه ای از page view controller ، شما می توانید به راحتی اپ خود را با صفحات آموزشی (tutorial screens) بسازید.

اپ Demo در یک نگاه

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

ایجاد پروژه

Xcode را باز کرده و یک پروژه جدید را با استفاده از تمپلت Single View Application ایجاد می کنیم. ممکن است انتخاب تمپلت Single View Application ، کمی عجب به نظر بیاید ، زیرا Xcode با یک تمپلت Page-Based Application همراه است که شامل یک اپ کاملاً کاربردی مبتنی بر UIPageViewController می باشد. با این حال ، این تمپلت کمی پیچیده است و زمان بیشتری را برای پاکسازی کدها از ما می گیرد. ما بهتر می توانیم مفهوم پشت UIPageViewController را از طریق Single View Application ارائه دهیم.

بسیار خوب! شروع می کنیم. در صفحه بعد ، نام پروژه را  PageApp قرار می دهیم و فیلد company identifier را نیز تکمیل می کنیم. گزینه Use Automatic Reference Counting را انتخاب می کنیم ، اما از آن جایی که ما قصد نداریم در این پروژه از Storyboard استفاده کنیم ، گزینه Use Storyboard را از حالت انتخاب خارج می کنیم. کلید Next و Create را کلیک می کنیم. سپس ، فایل APPViewController.xib را انتخاب کرده و رنگ پس زمینه (background) مربوط به view را به رنگ سیاه تغییر می دهیم.

ایجاد صفحات Tutorial

مرحله بعد ، پیاده سازی کلاس view controller می باشد که از آن برای نمایش پنج صفحه آموزشی استفاده می کنیم. از لیست تمپلت های موجود ، File > New > File… را انتخاب می کنیم. تمپلت “Objective-C class” را انتخاب می کنیم. کلاس را APPChildViewController نامگذاری کرده و آن را به عنوان یک زیر کلاس از UIViewController قرار می دهیم. هم چنین ، گزینه “With XIB for user interface” را جهت ایجاد رابط کاربری متناظر، انتخاب می کنیم.

فایل APPChildViewController.xib را که اخیراً ایجاد کردیم ، انتخاب می کنیم. رنگ View را به سیاه تغییر داده و اندازه عمودی صفحه view را به 512 point کاهش می دهیم تا کمی فضای آزاد برای نقطه (dot) های page controller ، باقی بماند (که به طور پیش فرض ارتفاع 36 نقطه دارد). در نهایت ، یک برچسب سفید UILabel را با اندازه فونت بزرگ در مرکز صفحه قرار می دهیم و محتوای آن را به “Screen #n” تغییر می دهیم. view حاصل شده باید شبیه تصویر زیر باشد:

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

در ادامه ، باید یک IBOutlet برای برچسب ایجاد کنیم. برای انجام این کار ، در حالی که فایل APPChildViewController.xib ، انتخاب شده است ، Editor را به حالت Assistant تغییر می دهیم. فایل APPChildViewController.h باید باز شده باشد. با فشار دادن و نگه داشتن کلید کنترل صفحه کلید ، UILabel را به فایل APPViewController.h درگ می کنیم و یک IBOutlet ایجاد می کنیم. نام آن را screenNumber قرار می دهیم. در نهایت ، یک خصیصه جدید از نوع NSInteger با نام index ایجاد می کنیم. فایل  APPChildViewControl.h حاصل شده ، باید شبیه کد زیر باشد:

#import <UIKit/UIKit.h>
 
@interface APPChildViewController : UIViewController
 
@property (assign, nonatomic) NSInteger index;
@property (strong, nonatomic) IBOutlet UILabel *screenNumber;
 
@end

خصیصه index ، به ما این امکان را می دهد که صفحه ای که در حال نمایش است را کنترل نماییم. برای انجام این کار ، هنگامی که ما یک صفحه فرزند را ایجاد می کنیم ، باید شاخص آن را از طریق خصیصه index تغییر دهیم. در عین حال ، متن برچسب را نیز به روز رسانی می کنیم. خط کد زیر را به انتهای متد viewDidAppear: در فایل APPChildViewController.m اضافه می کنیم:

self.screenNumber.text = [NSString stringWithFormat:@"Screen #%d", self.index];

مدیریت کردن View Controller ها

کلاس UIPageViewController ، فرق بین view controller و container controller را برجسته می کند. container controller ، برای نگهداری و مدیریت چندین view controller که در اپ نشان داده می شوند و هم چنین برای کنترل روشی که یک view controller به view controller دیگری سوئیچ می کند ، مورد استفاده قرار می گیرد. در اینجا ، UIPageViewController یک container controller است که کاربر را قادر می سازد ، بین صفحات محتوا حرکت کند ، جایی که هر صفحه توسط شیء view controller خودش مدیریت می شود.

برای کار با UIPageViewController ، باید APPViewController ، با پروتکل UIPageViewControllerDataSource مطابقت یابد. با پیاده سازی پروتکل data source ، ما به page view controller می گوییم که چه جیزی را در هر صفحه نمایش دهد.

فایل APPViewController.h را باز کرده و تعریف interface@ را تغییر می دهیم ، و یک خصیصه جدید برای نگهداری UIPageViewController اضافه می کنیم:

#import <UIKit/UIKit.h>
 
@interface APPViewController : UIViewController <UIPageViewControllerDataSource>
 
@property (strong, nonatomic) UIPageViewController *pageController;
 
@end

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

• viewControllerAfterViewController - view controllerای را که بعد از view controller جاری می آید فراهم می کند. به عبارت دیگر ، ما به اپ می گوییم که چه چیزی را در صفحه بعدی نمایش دهد.
• viewControllerBeforeViewController - یک view controller قبل از view controller جاری فراهم می کند. به عبارت دیگر ، ما به اپ می گوییم که چه چیزی را در صفحه قبل ، وقتی که کاربر به صفحه قبل سوئیچ می کند ، نمایش دهد.

خطوط کد زیر را قبل از پایان فایل APPViewController.c اضافه می کنیم:

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController {
    
    NSUInteger index = [(APPChildViewController *)viewController index];
    
    if (index == 0) {
        return nil;
    }
    
    index--;
    
    return [self viewControllerAtIndex:index];
    
}
 
- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController {
    
    NSUInteger index = [(APPChildViewController *)viewController index];
    
 
    index++;
    
    if (index == 5) {
        return nil;
    }
    
    return [self viewControllerAtIndex:index];
    
}

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

دو روش برای ایجاد View controller ها برای container وجود دارد. روش اول این است که می توانیم همه آنها را به یکباره ایجاد کرده و آنها در داخل container قرار دهیم. با این حال ، این روش توصیه نمی شود ، زیرا منابع بسیاری را مصرف می کند. روش دیگر ، ایجاد view controller فقط در زمان که موردنیاز است ، می باشد. در اینجا ، متد “viewControllerAtIndex” ، برای این منظور طراحی شده است. این متد ، پارامتر index را درگیر کرده و View controller متناظر را ایجاد می کند (یعنی APPChildViewController ).

متد زیر را در انتهای فایل APPChildViewController.m اضافه می کنیم:

- (APPChildViewController *)viewControllerAtIndex:(NSUInteger)index {
        
    APPChildViewController *childViewController = [[APPChildViewController alloc] initWithNibName:@"APPChildViewController" bundle:nil];
    childViewController.index = index;
    
    return childViewController;
    
}

در آخر ، باید به iOS ، تعداد dot ها را جهت نمایش در page view controller و این که کدام dot باید در شروع ، انتخاب شود را اعلام کنیم. دو متد زیر را به انتهای فایل APPChildViewController.m اضافه می کنیم:

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController {
    // The number of items reflected in the page indicator.
    return 5;
}
 
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController {
    // The selected item reflected in the page indicator.
    return 0;
}

کد بالا نیز بسیار ساده است. ما به سادگی به iOS می گوییم که ما 5 صفحه برای نمایش در page view controller داریم و صفحه اول نیز به صورت پیش فرض انتخاب شده است.

مقداردهی اولیه UIPageViewController

گام اول ، ایجاد و مقداردهی اولیه UIPageViewController می باشد. بهترین مکان برای انجام این کار ، متد viewDidLoad می باشد. فایل APPViewController.m را باز کرده و متد را تغییر می دهیم:

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    self.pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];
    
    self.pageController.dataSource = self;
    [[self.pageController view] setFrame:[[self view] bounds]];
    
    APPChildViewController *initialViewController = [self viewControllerAtIndex:0];
    
    NSArray *viewControllers = [NSArray arrayWithObject:initialViewController];
    
    [self.pageController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];
    
    [self addChildViewController:self.pageController];
    [[self view] addSubview:[self.pageController view]];
    [self.pageController didMoveToParentViewController:self];
    
}

بیایید ببینیم که این متد چه کاری انجام می دهد. ما ابتدا شیء UIPageViewController را ایجاد کرده و navigation style و navigation orientation را تعیین می کنیم. در اینجا ، ما از UIPageViewControllerTransitionStyleScroll ، به عنوان روش انتقال (transition) ، و از UIPageViewControllerNavigationOrientationHorizontal به عنوان جهت گیری (orientation) استفاده می کنیم. لطفاً توجه داشته باشید که اگر از جهت گیری افقی (horizontal orientation) و سبک scroll استفاده کنیم ، فقط انتقال با استفاده از dot ها ، در دسترس خواهد بود. سایر سبک های انتقال و جهت گیری ، به طور پیش فرض ، به یک سبک چرخش (turning style) صفحه ، سوئیچ می کند.

در ادامه ، data source را مشخص می کنیم ، در این مورد ، data source کلاس خودش می باشد. هم چنین ، فریم کنترلر را برای انتخاب حالت full screen ، تغییر می دهیم. سپس ، اولین صفحه فرزند را ایجاد کرده و صفحه ایجاد شده را به آرایه کنترلرها ، اضافه می کنیم. کنترلرهای بیشتری را به آرایه کنترلرها ، اضافه نمی کنیم ؛ زیرا تصمیم داریم که آنها را بر اساس نیاز ایجاد کنیم.

در نهایت ، باید کنترلر جاری را با کنترلر صفحه جدید خودمان عوض کنیم ، و page controller view را به view جاری اضافه کنیم.

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

اکنون زمان اجرا و شروع اپلیکیشن فرا رسیده است و این که ببینیم UIPageViewController چگونه کار می کند. باید بتوانیم page view controller را با استفاده از شبیه ساز iPhone ، تست نماییم. سعی می کنیم بین صفحات با کشیدن صفحات ، حرکت کنیم.

خلاصه

در این آموزش ، ما معرفی اولیه در مورد UIPageViewController ارائه کردیم. UIPageViewController ، یک کلاس بسیار مفید برای پیاده سازی صفحات آموزشی در اپ می باشد. سعی  کنید اپ نمونه را تغییر داده و صفحات آموزشی عالی تری را بسازید.

منتظر ما باشید! در آموزش های بعدی ، مطالب جذاب تری را برایتان ارائه خواهیم کرد.