Detailed explanation of the method of tool bar switching views in IOS

Time:2021-1-10

In this paper, through examples to explain in detail the IOS development tool bar switch view method and principle explanation, I hope our collation is useful for you, learn together.

There are several typical multi view programs in IOS

(1) Tab bar application: there is a row of buttons at the bottom of the program. Tap one of the buttons to activate and display the corresponding view;

(2) Navigation based application: it uses navigation controller, which uses navigation bar to control multi-level view;

(3) Tool bar application: there is a toolbar at the bottom of the program. You can use the buttons in the toolbar to switch views. It is often confused with tab bar application.

The example to be done this time is to use the tool bar, which simply implements the view switching function and adds some effects when switching views. Before making an example, we should first understand the principle of view switching.

This article is from: Ma Kaidong cloud search reprint, please indicate the source website: http://makaidong.com

The original title of this article: using tool bar to switch views http://makaidong.com/yangxt/1/58141_ 12002051.html

Generally speaking, a multi view program needs at least three view controllers, one of which is the root controller. The so-called root controller refers to the first controller that the user sees and loads when the program is loaded.

Root controller is usually a subclass of UINavigationController or uitabbarcontroller, or a subclass of uiviewcontroller.

In the multi view program, the work of root controller obtains two or more other views, and displays the unused views according to the user input.

In addition to root controller, other views are regarded as content controller, which can be understood as various views that may be displayed.

In order to better understand the structure of multi view program, we start with empty application to create our program.

1. Create project:

Run Xcode 4.2 and create a new empty application named multiview. Other settings are as follows:

2. Create three view controllers:

Select file new new file to open the following window:

Find uiviewcontroller subclass and click next to open the following window:

Enter the name rootviewcontroller, and make sure that the subclass of uiviewcontroller is selected, and the two check boxes below are not selected; follow the same steps to create two new view controllers, named firstviewcontroller and secondviewcontroller respectively. After completion, the file will be displayed in project navigation as follows:

3. Create. Xib files for three view controllers:

Select file new new file to open the following window:

Select user interface on the left, view on the right and click next. In the new window, select iPhone from device family and click next to open the following window:

Enter the name rootview and click create to create a. Xib file. Use the same method to create two more. Xibs named firstview and secondview.

4. Modify app delegate:

4.1 click appdelegate. H to add the code, @ class rootviewcontroller before @ interface and @ property (strong, nonatomic) rootviewcontroller * rootviewcontroller before @ end. The code after adding is as follows:

view source print ?


#import <UIKit/UIKit.h> @class RootViewController; 
 @interface AppDelegate : UIResponder <UIApplicationDelegate> 
 @property (strong, nonatomic) UIWindow *window; 
 @property (strong, nonatomic) RootViewController *rootViewController; 
 @end 

4.2 click appdelegate. M to modify its code.

Add # import "rootviewcontroller. H" before @ implementation, and add @ synthesizelootviewcontroller after @ implementation; then modify the didfinishlaunchingwithoptions as follows: view source print? 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
 { 
 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; 
 // Override point for customization after application launch. 
 self.rootViewController = [[RootViewController alloc] initWithNibName:@"RootView" bundle:nil]; 
 UIView *rootView = self.rootViewController.view; 
 CGRect rootViewFrame = rootView.frame; 
 rootViewFrame.origin.y += [UIApplication sharedApplication].statusBarFrame.size.height; 
 rootView.frame = rootViewFrame; 
 [self.window addSubview:rootView]; 
 self.window.backgroundColor = [UIColor whiteColor]; 
 [self.window makeKeyAndVisible]; 
 return YES; 
 }

① self.rootViewController = [[RootViewController alloc] initWithNibName:@”RootView” bundle:nil];

This line of code is used to run the RootView.xib Initialize the rootviewcontroller in the file. Note that the suffix. Xib is not allowed in initwithnibname: @ “rootview”

② rootViewFrame.origin.y += [UIApplication sharedApplication].statusBarFrame.size.height;

So that the view of rootviewcontroller will not be blocked by the status bar

5. Modify rootviewcontroller. H:

Click rootviewcontroller. H to add two properties and a method, as follows:

view source print ?


 #import <UIKit/UIKit.h> 
 @class FirstViewController; 
 @class SecondViewController; 
 @interface RootViewController : UIViewController 
 @property (strong, nonatomic) FirstViewController *firstViewController; 
 @property (strong, nonatomic) SecondViewController *secondViewController; 
 - (IBAction)switchViews:(id)sender; 
 @end 

6. Open RootView.xib , select file’s owner, open identity inspector on the right, and select rootviewcontroller from the class drop-down menu

In this way, we can start from RootView.xib The file creates an outlet and an action to the rootviewcontroller.

7. For RootView.xib Add toolbar: open RootView.xib , drag a tool bar to the view, double-click the button on the tool bar, and change its name to switch Views:

8. Add action mapping:

Select the switch views button, press and hold control, drag to file’s owner, release the mouse and select switchviews method:

9. Select file’s owner, hold down the control key, drag to view, release the mouse and select View:

10. Modify rootviewcontroller. M:

Open the rootviewcontroller. M file and add the code before @ implementation:

view source print ? 


#import "FirstViewController.h" 
#import "SecondViewController.h"

Add code after @ implementation:

view source print ? 


@synthesize firstViewController; 
@synthesize secondViewController;

Next, modify the viewdidload method. This method is commented out by default. First remove the comments around it, and then modify the code as follows:

view source print ?


- (void)viewDidLoad { 
 self.firstViewController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil]; 
 [self.view insertSubview: firstViewController.view atIndex:0]; 
 [super viewDidLoad]; 
 } 

Add switchviews method:

view source print ? 


 - (IBAction)switchViews:(id)sender { 
 if (self.secondViewController.view.superview == nil) { 
 if (self.secondViewController == nil) { 
 self.secondViewController = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil]; 
 } 
 [firstViewController.view removeFromSuperview]; 
 [self.view insertSubview:self.secondViewController.view atIndex:0]; 
 } else { 
 if (self.firstViewController == nil) { 
 self.firstViewController = 
 [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil]; 
 } 
 [secondViewController.view removeFromSuperview]; 
 [self.view insertSubview:self.firstViewController.view atIndex:0]; 
 } 
 }

Modify the didreceivememorywarning method:

view source print ?


- (void)didReceiveMemoryWarning { 
 [super didReceiveMemoryWarning]; 
 if (self.firstViewController.view.superview == nil) { 
 self.firstViewController = nil; 
 } else { 
 self.secondViewController = nil; 
 } 
 } 

11. Open FirstView.xib File, select the file’s owner on the left, and then select class as firstviewcontroller in identity inspector; then press and hold the control key, drag the file’s owner icon to view, and select View in the pop-up menu. by SecondView.xib Do the same, but select secondviewcontroller as class.

12. Open FirstView.xib File, select view, open attribute inspector, and set as follows:

Yes SecondView.xib Do the same, but set the background color to red.

13. When you run the program, you will see the green background of the program when it is just started. After you tap the switch views button, the background will turn red. Constantly tap the button, the background changes.

14. Add the animation effect of switching background:

Open rootviewcontroller. M and modify switchviews as follows:

view source print ?


 - (IBAction)switchViews:(id)sender { 
 [UIView beginAnimations:@"View Flip" context:nil]; 
 [UIView setAnimationDuration:1.25]; 
 [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; 
 if (self.secondViewController.view.superview == nil) { 
 if (self.secondViewController == nil) { 
 self.secondViewController = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil]; 
 } 
 [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES]; 
 [self.firstViewController.view removeFromSuperview]; 
 [self.view insertSubview:self.secondViewController.view atIndex:0]; 
 } else { 
 if (self.firstViewController == nil) { 
 self.firstViewController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil]; 
 } 
 [UIView setAnimationTransition: UIViewAnimationTransitionCurlUp forView:self.view cache:YES]; 
 [self.secondViewController.view removeFromSuperview]; 
 [self.view insertSubview:self.firstViewController.view atIndex:0]; 
 } 
 [UIView commitAnimations]; 
 } 

Note that there are four constants that represent the switching effect:

view source print ?


UIViewAnimationTransitionFlipFromLeft 
UIViewAnimationTransitionFlipFromRight
UIViewAnimationTransitionCurlDown
UIViewAnimationTransitionCurlUp 

Flip from left, flip from right, scroll down and scroll up respectively.
After running, the page turning effect is as follows: