IOS development-tiled navigation-implemented based on split-screen navigation and case studies

Tile navigation mode is an important navigation mode. It is generally used for simple flat information browsing or tasks. Flat information refers to the non-subordinate hierarchical relationship between the information, such as flattening information between Beijing, Shanghai, and Harbin in Chinese cities, the relationship between Harbin and Heilongjiang Province is a subordinate hierarchy. The hierarchy information can be in label navigation and tree navigation.

This section describes tile navigation from a case. If I want to develop an iPhone-based "Gallery" app, there are currently only three famous paintings (the left is Picasso-weeping, the middle is Da Vinci-Mona Lisa, and the right is Rodin-thinker) included in the application. Since there is no hierarchy between the three famous paintings, they are flat.

Implementation Based on split-screen navigation

The split-screen navigation is the main implementation method of tiled navigation mode, mainly involving controls: the split-screen control (uipagecontrol) and scrollview. the split-screen control is a standard IOS control.

There are two types of gestures Based on the split-screen navigation: one is to flip the screen by clicking on the left (top) or right (bottom) of the small point, and the other is to slide the screen by hand. The total number of screens should be limited to 20, and smaller points of more than 20 split screen controls will overflow. In fact, if an application has more than 10 screens, it is no longer convenient to use the tiled Navigation Mode Based on the split-screen navigation.

Below we use the split-screen navigation mode to implement the "Gallery" application. Use the single view application template to create a project named pagecontrolnavigation. Drag the scrollview and pagecontrol controls to the design interface, place them in the appropriate position, and set the view background to black using properties.

 

Select the scrollview control in interface builder, open its property checker, and set the attributes in scrollers. In this case, the scrollview control does not display horizontal and vertical scroll bars, but it can be rolled or split.

 

Select the pagecontrol control in interface builder, open its property checker, set the "# of pages" attribute in pages to 3, and the current attribute to 0. Open the size checker and modify the width attribute to 200. The larger part of this attribute is to facilitate finger clicking.

 

Finally, you also need to define the output ports for the two controls and connect them. In addition, you need to define the changepage method for the split screen control to respond to the screen change event: and connect them.

The code added to the viewcontroller. h file is as follows:

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;- (IBAction)changePage:(id)sender;

 

 

The following three views are designed. The three View Controller views are dragged to the design interface of mainstoryboard. storyboard, and three imageviews are dragged to three different views.

Then, modify the image attribute of the three imageviews to the name of the famous image file.

After setting the image attribute of the imageview, select the View Controller and change the storyboard ID to page1, page2, and page3 respectively. Unlike the modal view example, we do not need to create a subclass of the View Controller. In this example, we only need to display some images. To process Action events, you need to customize the subclass of the View Controller.

After the design, let's look at the program code viewcontroller. h:

#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UIScrollViewDelegate>@property (strong, nonatomic) UIView *page1;@property (strong, nonatomic) UIView *page2;@property (strong, nonatomic) UIView *page3;@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;- (IBAction)changePage:(id)sender;@end

 

To respond to uiscrollview events, we implemented the uiscrollviewdelegate protocol in viewcontroller.

Let's take a look at the viewdidload method code in viewcontroller. M:

- (void)viewDidLoad{[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.self.scrollView.contentSize  = CGSizeMake(self.view.frame.size.width*3, self.scrollView.frame.size.height);self.scrollView.frame = self.view.frame;UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];UIViewController* page1ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page1"];self.page1 = page1ViewController.view;self.page1.frame = CGRectMake(0.0f, 0.0f, 320.0f, 420.0f);UIViewController* page2ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page2"];self.page2 = page2ViewController.view;self.page2.frame = CGRectMake(320.0f, 0.0f, 320.0f, 420.0f);UIViewController* page3ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page3"];self.page3 = page3ViewController.view;self.page3.frame = CGRectMake(2 * 320.0f, 0.0f, 320.0f, 420.0f);self.scrollView.delegate = self;[self.scrollView addSubview:self.page1];[self.scrollView addSubview:self.page2];[self.scrollView addSubview:self.page3];}

 

This method is mainly used for control initialization. Because the location of each control needs to be calculated, there are many codes, but there are basically no difficulties. Self. scrollview. Delegate = self is to assign the current view control (uiscrollviewdelegate implementation object) to the scrollview control to respond to event processing. Other events are scrollviewdidscroll: the code is as follows:

- (void) scrollViewDidScroll: (UIScrollView *) aScrollView{CGPoint offset = aScrollView.contentOffset;self.pageControl.currentPage = offset.x / 320.0f;}

 

 

When you slide the screen between the left and right, and the scrollview Control completes scrolling, You need to calculate and set the current screen currentpage of the split screen control. When you click the split screen control, the screen changes and the changepage is triggered as follows:

- (IBAction)changePage:(id)sender{[UIView animateWithDuration:0.3f animations:^{int whichPage = self.pageControl.currentPage;self.scrollView.contentOffset = CGPointMake(320.0f * whichPage, 0.0f);}];}

 

 

In the above Code, we re-adjusted the scrollview control offset based on the current screen property (currentpage) of the split screen control, and used [uiview animatewithduration: 0.3f animations: ^ {…}] Code to re-adjust the scrollview control offset.

Run the code to get the effect