Folosind ScrollStyle cu UIPageViewController

Una dintre modificările introduse cu iOS 6 este abilitatea de a utiliza UIPageViewController pentru a utiliza o animație derulantă în locul stilului standard de cotitură a paginii. Citiți mai departe pentru a afla cum putem folosi acest lucru pentru a crea cu ușurință un efect de vizualizare scrolling paginat!

Pentru a explora aceste modificări, vom crea o aplicație "rater de imagine", în care utilizatorii pot să treacă prin imagini diferite și să dea o evaluare fiecăruia. Deși premisa este de bază, vă va oferi o șansă bună de a începe să utilizați UIPageControl cu noul stil.

Pasul 1: Configurarea

Înainte de a începe, vom avea nevoie de niște poze. Săriți în Wikipedia și descărcați 5 fotografii diferite care sunt licențiate sub o comună de creație. Creați un nou proiect Xcode cu un șablon gol. Denumiți-o "ImageRater" sau ceva echivalent. De asemenea, asigurați-vă că dispozitivul vizat este setat la iPad, că povestea este dezactivată și că ARC este pornit.

Acest proiect va fi proiectat pentru a fi utilizat numai în orientarea peisajului. Înainte de a începe, deschideți setările proiectului și selectați numai orientările peisajului.

Pasul 2: Creați modelul de imagine și controlerul de vizualizare

Apoi, trebuie să creați obiectul model și să vizualizați controlerul responsabil pentru afișarea imaginii. Creați o nouă clasă numită "ImageModel", moștenind de la NSObject. Aceasta va fi o clasă de model simplă care conține un șir reprezentând numele fișierului imagine și un întreg care reprezintă imaginea "evaluare":

ImageModel.h

 @interface ImageModel: NSObject - (id) initWithImageName: (NSString *) imageName; @property (nonatomic, strong) NSString * imageName; @ ratingul (nonatomic) NSInteger; @Sfârșit

Am creat, de asemenea, o metodă init personalizată care va face mai ușoară crearea acestora cu un nume de imagine. În implementarea fișierului .m, metoda init este așa:

ImageModel.m

 @implementation ImagineModel - (id) initWithImageName: (NSString *) imageName auto = [super init]; dacă (auto) _imageName = imageName; _rating = 0;  întoarce-te;

Controlerul de vizualizare care va afișa imaginea va fi, de asemenea, foarte simplu. Creați o nouă clasă numită ImageViewController (moștenind UIViewController) și dați-i următoarele proprietăți (precum și importarea ImageModel.h):

ImageViewController.h

 #import "ImageModel.h" @interface ImageViewController: UIViewController @property (nonatomic, puternic) UIImageView * imageView; @property (nonatomic, puternic) UILabel * etichetă; @property (nonatomic, puternic) ImageModel * model; @Sfârșit

În fișierul .m, adăugați următorul cod:

ImageViewController.m

 - (vid) viewDidLoad [super viewDidLoad]; [auto.view setBackgroundColor: [UICcolor whiteColor]]; CGRectul insetFrame = CGRectMake (20, 80, auto.view.frame.size.width - 40, self.view.frame.size.height - 100); _imageView = [[UIImageView aloca] initWithFrame: insetFrame]; _imageView.backgroundColor = [UICcolor clearColor]; [_imageView setAutoresizingMask: UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight]; [_imageView setImage: [UIImage imageNamed: _model.imageName]]; [[vizualizare de sine] addSubview: _imageView];

Când se încarcă vizualizarea, vom seta culoarea de fundal a vederilor și vom configura imaginea.

Pasul 3: Configurați PageViewController

Creați o nouă clasă numită "RootViewController" (moștenirea de la UIViewController). Aceasta va fi locul în care se va întâmpla acțiunea. Acesta va conține PageViewController, eticheta care indică numele și clasarea imaginii, precum și un pas cu pas care permite utilizatorului să stabilească evaluarea pentru imagine.

Odată ce ați creat clasa, deschideți fișierul antet al delegațiilor aplicației, importați clasa RootViewController și setați-o ca proprietate:

AppDelegate.h

 #import "RootViewController.h" @interface AppDelegate: UIResponder  @property (puternic, nonatomic) fereastra UIWindow *; @property (puternic, nonatomic) RootViewController * viewController; @Sfârșit

Și în fișierul de implementare setați-l ca regulatorul de vizualizare rădăcină:

AppDelegate.m

 - (BOOL): aplicație (UIApplication *) didFinishLaunchingWithOptions: (NSDictionary *) launchOptions auto.window = [[UIWindow alocare] initWithFrame: [[UIScreen mainScreen] limite]]; // Punct de suprascriere pentru personalizare după lansarea aplicației. self.viewController = [[RootViewController alocare] init]; self.window.rootViewController = auto.viewController; [auto.window makeKeyAndVisible]; reveniți DA;

Deschideți fișierul .h al RootViewController și îi dați următoarele proprietăți și îl faceți conform metodelor UIPageViewControllerDataSource și Delegate:

RootViewController.h

 @interface RootViewController: UIViewController  @property (nonatomic, puternic) UIPageViewController * pageViewController; @property (nonatomic, puternic) NSMutableArray * modelArray; @property (nonatomic) NSInteger vcIndex; @property (nonatomic, puternic) UIStepper * rateStepper; @property (nonatomic, puternic) UILabel * imageLabel; - (void) stepperValueChanged: (id) expeditor; @Sfârșit

PaginaViewController va fi responsabil pentru afișarea ImageViewControllers iar matricea modelului va fi responsabilă pentru stocarea obiectelor imageModel. VcIndex va fi responsabil pentru urmărirea indexului actual al paginilor. RateStepper va permite utilizatorului să evalueze o imagine în sus sau în jos. ImageLabel va afișa numele și nota imaginii curente.

Metoda stepperValueChanged va actualiza modelul de imagine relevant, stabilindu-și rating-ul în sus sau în jos.

În fișierul .m al RootViewController importați ImageViewController și configurați controlorii de vizualizare pentru controlerul de vizualizare a paginilor:

RootViewController.m

 #import "ImageViewController.h" @implementare RootViewController - (void) vizualizareDidLoad [super viewDidLoad]; [[vizualizare de sine] setBackgroundColor: [UICcolor blackColor]]; _modelArray = [NSMutableArray arrayWithObjects: [[ImageModel alloc] initWithImageName: @ "cat.jpg"], [[ImageModel alloc] initWithImageName: @ "DawnFlight.jpeg"], [[ImageModel alloc] initWithImageName: @ "James.jpg"] , [[ImageModel alloc] initWithImageName: @ "MOS_KIM.jpg"], [[ImageModel alloc] initWithImageName: @ "Pterophorus.jpg"], nil]; _pageViewController = [[UIPageViewController alloc] initWithTransitionStyle: UIPageViewControllerTransitionStyleScroll navigareOrientation: UIPageViewControllerNavigationOrientation Opțiuni orizontală: [NSDictionary dictionaryWithObject: [NSNumber numberWithFloat: 50.0f] pentruKey: UIPageViewControllerOptionInterPageSpacingKey]]; _pageViewController.delegate = auto; _pageViewController.dataSource = auto;

Sunt câteva lucruri care se petrec aici. În primul rând, ne-am stabilit culoarea de fundal în negru. În al doilea rând, alocăm inițierea paginii noastreViewController cu tranziția scollStyle, orientarea orientării orizontale și un dicționar pentru opțiunile noastre. Dicționarul conține un NSNumber care prevede că trebuie să existe un spațiu de 50 de puncte între fiecare vizualizatorController. Apoi continuăm să ne stabilim ca delegat și sursă de date pentru paginaViewController.

Apoi, trebuie să configurați un ControlControl inițial pentru a începe cu:

RootViewController.m

 _pageViewController.delegate = auto; _pageViewController.dataSource = auto; ImageViewController * imageViewController = [[ImageViewController alocare] init]; imageViewController.model = [_modelArray objectAtIndex: 0]; NSArray * viewControllers = [NSArray arrayWithObject: imageViewController]; [self.pageViewController setViewControllers: vizualizareControllers direction: UIPageViewControllerNavigationDirectionForward animat: NU finalizare: nil]; [auto addChildViewController: _pageViewController]; [self.view addSubview: _pageViewController.view]; [_pageViewController didMoveToParentViewController: auto]; CGRect pageViewRect = auto.view.bounds; pageViewRect = CGRectInset (paginaViewRect, 40.0, 80.0f); auto.pageViewController.view.frame = pageViewRect; self.view.gestureRecognizers = _pageViewController.gestureRecognizers;

Aici vom crea un nou controler de vizualizare a conținutului, îl adăugăm la un tablou și apoi vom seta acel matrice ca proprietate viewControllers pentru pagina noastră de control. Apoi, adăugăm paginaViewController ca fiind copilul nostruViewController și apoi paginaViewControllersView la noi. Apoi, oferim un pic de inserție, astfel încât să nu ia întreaga viziune și să ne fixeze recunoașterea gesturilor cu cea a pageViewControllers, astfel încât totul să fie în sincronizare.

În cele din urmă, pentru a finaliza vizualizarea, trebuie să adăugăm pasul și eticheta care descrie imaginea:

RootViewController.m

 self.view.gestureRecognizers = _pageViewController.gestureRecognizers; _rateStepper = [[UIStepper alocare] initWithFrame: CGRectMake (40, 680, 40, 30)]; [_rateStepper addTarget: acțiune auto: @selector (stepperValueChanged :) forControlEvents: UIControlEventValueChanged]; [setatStepper setMinimumValue: 0]; [_rateStepper setMaximumValue: 10]; [_rateStepper setIncrementImage: [UIImage imageNamed: @ "arrowup"] pentruState: UIControlStateNormal]; [_rateStepper setDecrementImage: [UIImage imageNamed: @ "arrowdown"] pentruState: UIControlStateNormal]; [[vizualizare de sine] addSubview: _rateStepper]; _imageLabel = [[UILabel alocare] initWithFrame: CGRectMake (0, 0, auto.view.frame.size.width, 40)]; _imageLabel.backgroundColor = [UICcolor clearColor]; _imageLabel.textColor = [UICcolor whiteColor]; [_imageLabel setFont: [UIFont boldSystemFontOfSize: 20]]; [_imageLabel setAutoresizingMask: UIViewAutoresizingFlexibleWidth]; [_imageLabel setTextAlignment: NSTextAlignmentCenter]; ImageModel * model = [_modelArray objectAtIndex: 0]; _imageLabel.text = [NSString șirWithFormat: @ "% @ - Rating:% d", model.imageName, model.rată]; [[vizualizare de sine] addSubview: _imageLabel];

Cele mai multe dintre acestea ar trebui să fie destul de simplu. Principalul lucru pe care trebuie să-l acordăm este să stabilim imaginile "increment" și "decrement" pentru controlul pas cu pas. Va trebui să găsiți propriile imagini pentru acest lucru, dar ar trebui să fie ușor să faceți sau să găsiți niște icoane gratuite pe Google. Dacă nu puteți face acest lucru, puteți să ignorați personalizarea pas cu pas.

Dacă construim și executăm acum aplicația noastră, ar trebui să arate ceva de genul:

Acesta este un început bun, dar imaginile nu se derulează încă și pas cu pas cade aplicația. De asemenea, lipsesc indicatorii paginii. Să umplem aceste goluri:

Pasul 4: Completarea programului PageViewController

Trebuie să punem în aplicare metodele bazei de date care spun siteViewController care controale de vizualizare ar trebui să fie încărcate înainte și după cea curentă:

RootViewController.m

 #pragma mark - #pragma marcaje - UIPageViewControllerDelegate Metoda - (UIViewController *) pageViewController: (UIPageViewController *) pageViewController viewControllerBeforeViewController: (UIViewController *) viewController ImageViewController * contentVc = (ImageViewController *) viewController; NSUInteger currentIndex = [_modelArray indexOfObject: [conținutVc model]]; _vcIndex = currentIndex; [_rateStepper setValue: rating [[contentVc model]]; ImageModel * model = [_modelArray objectAtIndex: _vcIndex]; [_imageLabel setText: [NSString șirWithFormat: @ "% @ - Rating:% d", model.imageName, model.rating]]; dacă (currentIndex == 0) return zero;  ImageViewController * imageViewController = [[ImageViewController alocare] init]; imageViewController.model = [_modelArray obiectAtIndex: currentIndex - 1]; return imageViewController;  - (UIViewController *) pageViewController: (UIPageViewController *) pageViewController viewControllerAfterViewController: (UIViewController *) viewController ImageViewController * contentVc = (ImageViewController *) viewController; NSUInteger currentIndex = [_modelArray indexOfObject: [conținutVc model]]; _vcIndex = currentIndex; [_rateStepper setValue: rating [[contentVc model]]; ImageModel * model = [_modelArray objectAtIndex: _vcIndex]; [_imageLabel setText: [NSString șirWithFormat: @ "% @ - Rating:% d", model.imageName, model.rating]]; dacă (currentIndex == _modelArray.count - 1) return zero;  ImageViewController * imageViewController = [[ImageViewController alocare] init]; imageViewController.model = [_modelArray obiectAtIndex: currentIndex + 1]; return imageViewController;

Ambele metode sunt destul de similare. Mai întâi, obținem vizualizarea relevantă înainte sau după cea curentă (și o aruncăm într-un ImageViewController). Apoi, căutăm să găsim unde indexul modelului respectivController este în relație cu matricea noastră de modele. Odată găsită, setăm valoarea curentă vcIndex la currentIndex. De asemenea, asigurați-vă că actualizați valoarea curentă a pasajului și actualizați șirul de etichete pentru a afișa numele curent și valoarea de rating a imaginii.

Dacă indicele ar fi în afara limitelor (determinat prin ecuația 0 sau numărarea matricei modelului - 1), atunci nu vom returna un nou controler de vizualizare. Dacă există un model de încărcat, vom crea un nou ImageViewController, setăm modelul său la modelul relevant din matrice și vom returna ViewController.

Dacă construiți și rulați acum, paginile se vor defila, totuși în continuare lipsește vizualizarea indicatorului de pagină. Trebuie doar să implementăm următoarele metode de tip dataSource, după cum urmează:

RootViewController.m

 #pragma - marca #pragma - Metoda UIPageViewControllerDataSource - (NSInteger) presentationCountForPageViewController: (UIPageViewController *) pageViewController retur _modelArray.count;  - (NSInteger) presentationIndexForPageViewController: (UIPageViewController *) pageViewController return 0;

Este atât de ușor. Pentru metoda numărătoare, returnează pur și simplu numărătoarea matricei model și pentru indexul curent vom returna pur și simplu ce trebuie să înceapă la, care este 0.

Pasul 5: Evaluați imaginile

Toate eforturile depuse au fost făcute! Pentru a clasifica imaginile, pur și simplu implementați metoda "stepperValueChanged" și adăugați codul de mai jos:

RootViewController.m

 #pragma - marca #pragma - Metode private - (void) stepperValueChanged: (id) expeditor ImageModel * model = [_modelArray objectAtIndex: _vcIndex]; [setarea modelului: [valoare rată ridicată]]; [_imageLabel setText: [NSString șirWithFormat: @ "% @ - Rating:% d", model.imageName, model.rating]];

Obținem pur și simplu modelul la indexul actual, actualizăm ratingul pe baza ratingului pentru pasiști și apoi actualizăm textul etichetei.

Construiți și rulați aplicația acum și ar trebui să arate ceva de genul:

Învelire

Am acoperit modul de configurare a unui PageViewController foarte simplu folosind noul stil de tranziție de defilare fără a utiliza un xib sau storyboard. Acest lucru vă va oferi o înțelegere solidă a modului în care funcționează PageViewController și vă permite să îl modificați pentru a funcționa în propriile aplicații!

Cod