آموزش صفحه بندی در iOS 6 Swift - به همراه مثال و نمونه کد

نحوه ایجاد UIPageViewController با استفاده از Storyboard

ما در جلسه بیست و ششم ، مبحث UIPageViewontroller را تحت پوشش قرار داده ایم. در آن آموزش ، نحوه ایجاد UIPageViewontroller  را با استفاده از Interface Builder نشان دادیم. برای این که بتوانیم UIPageViewontroller را با iOS 7 و Xcode 5 سازگاری دهیم ، به طور کامل تمام آموزش را بازنویسی می کنیم. هم چنین ، از Storyboard برای ایجاد UIPageViewontroller استفاده خواهیم کرد.

برای اولین بار که یک اپ راه اندازی می شود ، غالباً مجموعه ای از صفحات walk through نمایش داده می شود که معرفی مختصری از ویژگی های اپ را ارائه می دهند (tutorial screens). این یک روش متداول برای توضیح نحوه عملکرد اپ می باشد. در این آموزش ، ما به شما نشان می دهیم که چگونه با استفاده از UIPageViewController یک نوع مشابه از صفحات walk through را بسازیم.

کلاس UIPageViewController  اولین بار در iOS SDK معرفی شد و به توسعه دهندگان این امکان را می دهد که محتوای صفحاتی را بسازند که هر صفحه توسط view controller خودش مدیریت شود. این کلاس در iOS 6 ، برای ایجاد پشتیبانی از انتقال پیمایشی (scrolling transition) بیشتر بهبود یافته است. با page view ، کاربران به راحتی می توانند بین چندین صفحه از طریق حرکت ساده ، پیمایش کنند. page view controller محدود به ایجاد صفحات walkthrough screens نیست. ما می توانیم نمونه هایی از پیاده سازی page view را در اپ های بازی مشاهده نماییم ، مانند Angry Birds که برای نشان دادن level ها از این صفحات استفاده می نماید. در اپ های book نیز برای نمایش دادن محتوای صفحات از این قابلیت استفاده می شود.

UIPageViewController یک کلاس بسیار قابل تنظیم است. ما امکان تعریف موارد ذیل را داریم:

• جهت page view ها – عمودی یا افقی.
• سبک انتقال (transition) – سبک انتقال curl یا سبک انتقال scrolling.
• موقعیت spine (ستون فقرات) – فقط برای سبک انتقال curl قابل اجرا می باشد.
• فضای بین صفحات – فقط برای سبک انتقال scrolling قابل اجرا است تا فاصله بین صفحه ها تعریف شود.

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

بیایید کار را با هم شروع کنیم.

نگاهی بر اپ Demo

اپ demo که ما قصد داریم بسازیم ، بسیار ساده است. این اپ 4 صفحه را نمایش می دهد تا به کاربران معرفی مختصری در مورد رابط کاربری ارائه دهد. کاربران می توانند بین صفحات از طریق کشیدن صفحات حرکت نمایند. هر زمان که کاربر کلید “Start again” را ضربه می زند ، به صفحه اول آموزش برمی گردد. این نوع از صفحات walkthrough/tutorial نباید برای شما تازگی داشته باشد ، زیرا در اپ هایی مانند Snapguide و Airbnb مورد استفاده قرار گرفته اند.

ایجاد پروژه

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

بسیار خوب! بیایید کار را شروع کنیم. در صفحه بعد ، نام پروژه را  PageviewDemo قرار می دهیم و فیلد company identifier را نیز تکمیل می کنیم. گزینه Devices را با iPhone تکمیل می کنیم. کلید Next را کلیک کرده و پروژه را ایجاد می کنیم.

ایجاد Page View Controller در Storyboard

 در ادامه ،  Main.storyboard  را انتخاب می کنیم. طبق روال ، باید یک view controller پیش فرض را که توسط Xcode تولید شده است ، مشاهده کنیم. آن را همان طور که هست ، رها می کنیم. یک Page View Controller را از کتابخانه اشیاء به داخل Storyboard درگ می کنیم. سپس ، View Controller دیگری را نیز اضافه می کنیم و آن را نیز در همان Storyboard قرار می دهیم.

برای این پروژه ، view controller اصلی ، به عنوان view controller ریشه (root) مورد استفاده قرار می گیرد تا page view controller را هندل نماید. view controller را که اضافه کرده ایم برای نمایش محتوای صفحه مورد استفاده قرار می گیرد. در طول این مقاله ، view controller اصلی ، به عنوان root view controller و سایر view controller به عنوان page content controller مورد ارجاع قرار می گیرند.

ممکن است تعجب کنید که چرا ما فقط یک view controller واحد را برای نمایش دادن محتوای 4 صفحه اضافه می کنیم. آیا نباید به جای یکی از چهار view controller استفاده نماییم؟ همان طور که از نتایج نهایی می توان مشاهده کرد ، صفحات walkthrough بسیار شبیه به هم هستند. بهتر است که همان view controller را برای صفحات نمایش مختلف به اشتراک بگذاریم.

در ادامه ، یک Storyboard ID برای page view controller و page content controller تخصیص می دهیم. به سادگی کنترلر را انتخاب کرده و ID را در بخش Identity Inspector تنظیم می کنیم. Storyboard ID مربوط بهpage view controller  را به عنوان “PageViewController”  و نام ID مربوط به page content controller را به “PageContentController” تنظیم می کنیم. بعداً به این ID ها در داخل کدها مراجعه خواهیم کرد.

به طور پیش فرض ، سبک انتقال ( transition style) مربوط به page view controller به  Page Curl تنظیم شده است. سبک  Page Curl برای اپ های book می باشد. برای صفحه نمایش های walkthrough  ، ترجیح می دهیم که از سبک scrolling  استفاده نماییم. بنابراین ، در بخش Attribute Inspector مقدار transition style را به Scroll  تغییر می دهیم.

رابط کاربری مربوط به  page content view controller را طراحی خواهیم کرد. یک image view و یک label به داخل کنترلر درگ می کنیم. در مورد تغییر نوع فونت و اندازه آن آزاد هستیم. اما ، باید view controller طراحی شده شبیه به تصویر زیر باشد:

برای view controller پیش فرض ، یک کلید “Start again” را اضافه می کنیم و آن را در پایین صفحه نمایش ، قرار می دهیم.

ایجاد کلاس View Controller

قدم بعدی ایجاد کلاس view controller و تخصیص آن به view controller متناظر می باشد. از منو ، به بخش File > New > File … رفته و تمپلت  “Objective-C class”  را انتخاب می کنیم. نام کلاس را PageContentViewController  را قرار داده و آن را جزء زیر کلاس UIViewController قرار می دهیم.

به Storyboard بر می گردیم.  page content view controller را انتخاب کرده و در بخش  Identify Inspector مقدار custom class را به PageContentViewController  تنظیم می کنیم.

در ادامه ، outlet ها را برای image view و برچسب ایجاد خواهیم کرد. به Assistant Editor سوئیچ می کنیم و مطمئن می شویم که فایل PageContentViewController.h باز شده باشد. کلید کنترل صفحه کلید را فشار داده و نگه می داریم و image view را به فایل PageContentViewController.h درگ می کنیم و یک IBOutlet ایجاد می نماییم. نام image view را به backgroundImageView  تنظیم می کنیم. برای برچسب ، نام outlet را به titleLabel تنظیم می کنیم.

بعد از اعمال این تغییرات ، محتوای فایل PageContentViewController.h باید شبیه به کدهای زیر باشد:

#import <UIKit/UIKit.h>
 
@interface PageContentViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIImageView *backgroundImageView;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
 
@end

در ادامه ، root view controller را انتخاب کرده و مطمئن می شویم که فایل ViewController.h باز شده باشد. یک action برای کلید “Start again” ایجاد کرده و نام action را به “startWalkthrough” تنظیم می کنیم.

بسیار خوب! طراحی رابط کاربری را تکمیل نموده و تمام outlet ها را ایجاده کرده ایم. بیایید به بخش پیاده سازی کلاس های view controller وارد شویم.

پیاده سازی page content view controller

پیاده سازی page content view controller بسیار ساده است. ابتدا ، خصیصه های زیر را در فایل PageContentViewController.h اضافه می کنیم:

@property NSUInteger pageIndex;
@property NSString *titleText;
@property NSString *imageFile;

pageIndex ، ایندکس صفحه جاری (یا شماره صفحه) را ذخیره می کند.  view controller جهت نمایش یک تصویر و یک عنوان طراحی شده است. بنابراین ، دو پارامتر برای انتقال متن عنوان و فایل تصویری ایجاد می کنیم. سپس ، فایل PageContentViewController.m  را باز کرده و متد  viewDidLoad:  را تغییر می دهیم:

- (void)viewDidLoad
{
    [super viewDidLoad];
 
    self.backgroundImageView.image = [UIImage imageNamed:self.imageFile];
    self.titleLabel.text = self.titleText;
}

پیاده سازی Page View Controller

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

برای این که UIPageViewController  کار کند ، ما باید انتطباق لازم را با UIPageViewControllerDataSource  برقرار نماییم. Data source یک page view controller ، مسئول ارائه content view controller ها بر اساس تقاضا می باشد. از طریق پیاده سازی پروتکل data source ، ما به page view controller چیزی را که باید برای هر صفحه نمایش دهد ، اعلام می کنیم.

در این مورد ، ما از کلاس ViewController  به عنوان data source برای نمونه UIPageViewController  استفاده می کنیم. بنابراین ، لازم است که کلاس ViewController  را به عنوان پیاده سازی پروتکل UIPageViewControllerDataSource  اعلام کنیم.

کلاس ViewController  هم چنین ، مسئول ارائه داده page content (یعنی تصاویر و عنوان ها) می باشد. فایل ViewController.h را باز می کنیم. اعلان @interface را اصلاح می کنیم ، یک خصیصه جدید برای نگهداری UIPageViewController و خصیصه هایی را برای تصاویر و عنوان ها اضافه می کنیم:

#import <UIKit/UIKit.h>
#import "PageContentViewController.h"
 
@interface ViewController : UIViewController <UIPageViewControllerDataSource>
 
- (IBAction)startWalkthrough:(id)sender;
@property (strong, nonatomic) UIPageViewController *pageViewController;
@property (strong, nonatomic) NSArray *pageTitles;
@property (strong, nonatomic) NSArray *pageImages;
 
@end

در فایل ViewController.m ، مقادیر pageTitles  و pageImages را در متد viewDidLoad  مقداردهی اولیه می کنیم:

- (void)viewDidLoad
{
    [super viewDidLoad];
 
    _pageTitles = @[@"Over 200 Tips and Tricks", @"Discover Hidden Features", @"Bookmark Favorite Tip", @"Free Regular Update"];
    _pageImages = @[@"page1.png", @"page2.png", @"page3.png", @"page4.png"];
}

نکته: می توانید فایل های تصویری را از اینجا download image files دانلود کرده و آنها را به پروژه Xcode خود اضافه نمایید.

ما data model را برای محتوای صفحه ایجاد کرده ایم. در نهایت ، باید دو متد پروتکل UIPageViewControllerDataSource  را پیاده سازی کنیم:

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

خطوط کد زیر را قبل از end فایل ViewController.m اضافه می کنیم:

#pragma mark - Page View Controller Data Source
 
- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController
{
    NSUInteger index = ((PageContentViewController*) viewController).pageIndex;
    
    if ((index == 0) || (index == NSNotFound)) {
        return nil;
    }
    
    index--;
    return [self viewControllerAtIndex:index];
}
 
- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController
{
    NSUInteger index = ((PageContentViewController*) viewController).pageIndex;
    
    if (index == NSNotFound) {
        return nil;
    }
    
    index++;
    if (index == [self.pageTitles count]) {
        return nil;
    }
    return [self viewControllerAtIndex:index];
}

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

ممکن است متوجه شده باشید که متد viewControllerAtIndex:  را ایجاد نکرده ایم. این متد ، یک متد کمکی است که برای ایجاد page content view controller بر اساس درخواست طراحی شده است. این متد ، پارامتر ایندکس را می گیرد و page content controller متناظر را ایجاد می کند.

در فایل  ViewController.m ، متد کمکی را اضافه می کنیم:

- (PageContentViewController *)viewControllerAtIndex:(NSUInteger)index
{
    if (([self.pageTitles count] == 0) || (index >= [self.pageTitles count])) {
        return nil;
    }
    
    // Create a new view controller and pass suitable data.
    PageContentViewController *pageContentViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"PageContentViewController"];
    pageContentViewController.imageFile = self.pageImages[index];
    pageContentViewController.titleText = self.pageTitles[index];
    pageContentViewController.pageIndex = index;
    
    return pageContentViewController;
}

به خاطر دارید که ما یک Storyboard ID برای view controller ها ، در هنگام طراحی رابط کاربری تنظیم کرده ایم. ID به عنوان reference  برای ایجاد نمونه view controller استفاده می شود. برای معرفی یک View controller در storyboard ، می توانیم متد instantiateViewControllerWithIdentifier:  را با یک storyboard ID خاص استفاده کنیم:

PageContentViewController *pageContentViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"PageContentViewController"];

برای نمایش یک page indicator ، باید به iOS تعداد صفحات (یعنی تعداد dot ها) جهت نمایش داده شدن در  page view controller و این که کدام صفحه باید برای شروع انتخاب شود ، را اعلام کنیم. دو متد زیر را در انتهای فایل ViewController.m اضافه می کنیم:

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController
{
    return [self.pageTitles count];
}
 
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController
{
    return 0;
}

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

نکته: ما باید هر دو متد را به منظور نمایش page indicator پیاده سازی کنیم. هم چنین ، باید بدانیم که  page indicator فقط در حالت انتقال scroll کار می کند.

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

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

- (void)viewDidLoad
{
    [super viewDidLoad];
 // Create the data model    _pageTitles = @[@"Over 200 Tips and Tricks", @"Discover Hidden Features", @"Bookmark Favorite Tip", @"Free Regular Update"];
    _pageImages = @[@"page1.png", @"page2.png", @"page3.png", @"page4.png"];
    
    // Create page view controller
    self.pageViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"PageViewController"];
    self.pageViewController.dataSource = self;
    
    PageContentViewController *startingViewController = [self viewControllerAtIndex:0];
    NSArray *viewControllers = @[startingViewController];
    [self.pageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];
    
    // Change the size of page view controller
    self.pageViewController.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 30);
    
    [self addChildViewController:_pageViewController];
    [self.view addSubview:_pageViewController.view];
    [self.pageViewController didMoveToParentViewController:self];
 
}

بیایید ببینیم متد چه کاری انجام می دهد. ما ابتدا نمونه PageViewController  را ایجاد می کنیم. در ادامه ، data source را تعیین می کنیم ، در این مورد ، data source کلاس خودش است. سپس اولین page content controller را ایجاد می کنیم ، آن را به آرایه کنترلرها اضافه کرده و جهت نمایش دادن ، آن را به page view controller تخصیص می دهیم.

در نهایت ، اندازه page view controller را تغییر می دهیم و page view controller را به view جاری اضافه می کنیم.

سفارشی سازی Page Indicator

اگر اکنون اپ را کامپایل و اجرا نماییم ، اپ باید به درستی کار کند ، ممکن است متوجه شویم که page indicator نیست. در واقع ، page indicator وجود دارد ، اما رنگ نقطه ها مطابق با رنگ view می باشد. بیایید رنگ آن را تغییر دهیم.

در فایل  AppDelegate.m ، خطوط کدهای زیر را در متد didFinishLaunchingWithOptions: اضافه می کنیم:

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

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

برگشت به اولین صفحه

هنوز یک کار مانده که انجام نداده ایم. کلید “Start again” را هنوز پیاده سازی نکرده ایم. هنگامی که به این  کلید ضربه زده می شود ، انتظار داریم که page view controller به اولین صفحه باز گردد. می توانیم از متد setViewControllers:  از UIPageViewController  برای سوئیچ کردن صفحه استفاده کنیم. برای برگشت به اولین صفحه از page view controller ، متد startWalkthrough: از فایل ViewController.m را تغییر می دهیم:

- (IBAction)startWalkthrough:(id)sender {
    PageContentViewController *startingViewController = [self viewControllerAtIndex:0];
    NSArray *viewControllers = @[startingViewController];
    [self.pageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionReverse animated:NO completion:nil];
}

اپ را دوباره اجرا می کنیم. هنگامی که کلید “Start again” ضربه می زنیم ، اپ  ما را به اولین صفحه باز می گرداند.

خلاصه

در این جلسه ، ما آموزش اصول UIPageViewController را تحت پوشش قرار دادیم و نحوه پیاده سازی کنترلر را با استفاده از Storyboard نشان دادیم  UIPageViewController ، یک کلاس بسیار کاربردی برای پیاده سازی صفحه نمایش های walkthrough  در اپ می باشد. کاربرد UIPageViewController  نامحدود است. می توانیم از آن برای نمایش هر اطلاعاتی که دوست داریم استفاده کنیم ، مانند صفحات web view. UIPageViewController  کلاس بسیار قابل تنظیمی است. این آموزش فقط سبک انتقال scroll را پوشش داده است. اما ، آیا می دانید که به راحتی می توانید با استفاده از این کلاس ، یک برنامه کتاب ساده ایجاد کنید؟ به سادگی سبک انتقال را از scroll به page curl تغییر دهید و ببینید چه چیزی دریافت خواهید کرد. کار را در اینجا متوقف نکنید. سعی کنید گزینه های موجود را تغییر دهید و بیشتر در مورد UIPageViewController  یاد بگیرید.