How to create a slide-out navigation panel in iOS (1)

This article describes how to create a slide-out navigation panel that resembles the Facebook and path iOS programs.

Swipe right

The slide-out design mode allows developers to add common navigation functions to the program without wasting valuable space on the screen. Users can slide out of the navigation panel at any time, and they can also see what is displayed on the current screen.

Now, some libraries on the internet have built-in slide-out design patterns, such as the Swrevealviewcontrollerdeveloped by John-lluch. If you're looking for a faster and easier way, then using the Swrevealviewcontroller Library can be a great way to do it.

However, if you are a DIY type programmer (like me), then you may want to understand how this functionality is implemented. In this article, you will see that the implementation of this feature is not complex. The slide-out navigation panel technology can be easily integrated into the program by means of less-than-many methods, and by ignoring complex and non-essential code.

start Then what is the function of the slide-out navigation panel created here?

iOS designer and developer Ken Yarmosh's explanation is more appropriate: "The slide-out navigation panel has a panel that slides out from the left or right side of the main screen, and then displays a vertical, independent scrolling view (Scroll view) in the panel, which is used as the main navigation for the program. ”

Note: Ken explains in detail the design patterns of the slide-out navigation panel in this article, and describes the benefits of this pattern: the new iOS design mode: slide-out navigation panel .

First download the startup Project for this article. This is a zip file, just save it locally and unzip it to get the project.

Then open the project in Xcode and look at the project's organizational structure:

The project is divided into 3 main folders:

assets: Contains all picture files and other non-code resources (such as attribution files). views: Contains all the xib files that are involved in this article. classes: Contains objective-c code files

Don't worry that there are many files in the assets, you don't need to modify them, all the resource files to be used are added.

There are 4 main view controllers in the Views folder. Here is an introduction:

Mainviewcontroller: This is one of the main pictures! This file needs to be added to your own project (some minor changes are required). Centerviewcontroller: This is the middle panel. The view controller can be replaced with your own view controller (remember that the button's action is also implemented) Leftpanelviewcontroller: the left panel. The view controller can be replaced with your own view controller. Rightpanelviewcontroller: the right panel. The view controller can be replaced with your own view Controller

Now open the APPDELEGATE.M file. Although you do not need to make any changes to this file, you should know that Mainviewcontorller is the container for the left, middle, and right view controllers. The controller is initialized in 19 lines of code:

1.self.viewcontroller = [[Mainviewcontroller alloc] initwithnibname:@ "Mainviewcontroller" bundle:nil];

Familiar with the construction of the project, the beginning of the start-from the front of the panel.

Find Center This section, I will place a centerviewcontroller in Mainviewconroller, Centerviewcontroller as a mainviewconroller child view Controller

Note: This section will use one of the new concepts in iOS 5: View Controller containment. If you're not familiar with it, first look at the 22nd chapter "Uiviewcontroller Containment" in IOS 5 by Tutorials .

Open the Mainviewcontroller.m file and add the following import statement to the top of the file:

1. #import "CenterViewController.h"

Next, add a constant definition:

1. #define CENTER_TAG 1

Next, add the following attribute in @interface to make it easier to control the center view.

[Email protected] (Nonatomic, Strong) Centerviewcontroller *centerviewcontroller;

Locate the Setupview and add the following code block inside:

1.self.centerviewcontroller = [[Centerviewcontroller alloc] initwithnibname:@ "Centerviewcontroller" bundle:nil];

2.self.centerviewcontroller.view.tag = Center_tag;

3.self.centerviewcontroller.delegate = self;

4.

5.[self.view AddSubview:self.centerViewController.view];

6.[self Addchildviewcontroller:_centerviewcontroller];

7.

8.[_centerviewcontroller Didmovetoparentviewcontroller:self];

The above code assigns a new Centerviewcontroller and assigns it to the Centerviewcontroller property. Then set the TAG of this view controller view to Center_tag.

The delegate is then set to Mainviewcontroller. It also means that you need to modify Mainviewcontroller to follow the Centerviewcontrollerdelegate protocol-just replace the top @interface line of the file with the following:

[Email protected] Mainviewcontroller ()

Finally, in the code for the Setupview method, use the Addsubview: method to add the view of the Centerviewcontroller to the Mainviewcontroller view, Also called Addchildviewcontoller: Adds _centerviewcontroller as a child view controller for Mainviewcontroller. Finally, the Didmovetoparentviewcontroller: method is called.

Compile and run the program and see a screen similar to the following:

The button at the top of the screen allows you to switch to the kitten (kitties) and puppy (puppies). Is there any better reason to create a slide-out navigation panel here? If you want to see different small animals here, then start sliding. First, start from the left!

The center panel is now added to the left side , but adding a Ieft view controller requires a few different actions. Go back to the mainviewcontroller.m file and add the following import statement to the top of the file:

1. #import "LeftPanelViewController.h"

Then define a constant:

1. #define LEFT_PANEL_TAG 2

Then add some properties to the @interface, similar to the Center view:

[Email protected] (Nonatomic, Strong) Leftpanelviewcontroller *leftpanelviewcontroller;

[email protected] (Nonatomic, assign) BOOL Showingleftpanel;

Now find the Getleftview method, remove the existing code and add the following code:

1.//init View If it doesn ' t already exist

2.if (_leftpanelviewcontroller = = nil)

4.\

4.//This is where you define the view for the left panel

5. Self.leftpanelviewcontroller = [[Leftpanelviewcontroller alloc] initwithnibname:@ "Leftpanelviewcontroller" bundle : nil];

6. Self.leftPanelViewController.view.tag = Left_panel_tag;

7. self.leftPanelViewController.delegate = _centerviewcontroller;

8.

9. [Self.view AddSubview:self.leftPanelViewController.view];

10.

[Self addchildviewcontroller:_leftpanelviewcontroller];

[_leftpanelviewcontroller didmovetoparentviewcontroller:self];

13.

_leftpanelviewcontroller.view.frame = CGRectMake (0, 0, self.view.frame.size.width, self.view.frame.size.height);

15.}

16.

17.self.showingleftpanel = YES;

18.

19.//Set up View shadows

20.[self Showcenterviewwithshadow:yes Withoffset:-2];

21st.

22.UIView *view = Self.leftpanelviewcontroller.view;23.return view;

The above code first checks to see if the Leftpanelviewcontroller property is nil, and if it is nil, Assigns and initializes a leftpanelviewcontroller to the Leftpanelviewcontroller property.

Next is the assignment of a tag and delegate--for the image selection, and the addition of the newly created view to the main view.

The Showingleftpanel property is then set to Yes and some visual processing is added, which is covered in the next section.

Finally, the view is returned to the caller. Why do you do this--in the later sections you'll see why.

Let's deal with the shadows below.

Don't forget the shadow effect in the code you just added above, you've seen the call to Showcenterviewwithshow:withoffset: method. This method creates and adds a shadow effect using the Quartzcore framework.

To access many of the wonderful features provided by the framework, add the following import statement to the top of the mainviewcontroller.m file:

1. #import < Quartzcore/quartzcore.h>

Similarly, a constant is defined at the top of the file, representing the fillet. This way, if you want to change the fillet, just change it in one place.

1. #define Corner_radius 4

Now find the Showcenterviewwithshadow:withoffset: Method and add the following code block:

1.if (value)

0.9

3. [_centerviewcontroller.view.layer Setcornerradius:corner_radius];

4. [_centerviewcontroller.view.layer Setshadowcolor:[uicolor Blackcolor]. Cgcolor];

5. [_centerviewcontroller.view.layer setshadowopacity:0.8];

6. [_centerviewcontroller.view.layer setshadowoffset:cgsizemake (offset, offset)];

7.

8.}

9.else

10.{

[_centerviewcontroller.view.layer setcornerradius:0.0f];

[_centerviewcontroller.view.layer setshadowoffset:cgsizemake (offset, offset)];

13.}

In the above code, if the value passed in is nonzero, a rounded corner and a shadow are set for the center view. Otherwise, the fillet is set to non-circular.

If you run the program now, you will not see the effect, because the above code is not used.

back to the left now you've got some of the material you need to slide the navigation panel, and then continue to finish with the Ieft view controller. Once you're done, you'll know how to move to the right.

In this article, in order to focus on several important places, I have connected the ibaction and iboutlet that are involved in the IB file. However, to implement your own DIY slide-out navigation panel, you need to know how the buttons in these IB are configured.

Take a look at this one about the Centerviewcontroller.xib file, and note the connection:

As in the Kitties button, has been connected to a iboutlet named LeftButton, and the button's touch up inside event is connected to a btnmovepanelright named Ibaction:. This button controls the slide of the center panel to show the Panel on the left.

Btnmovepanelright: It's still empty, so let's see how it's going to be implemented:

Open the Centerviewcontroller.m file and add the following code block to the Btnmovepanelright: method:

1.UIButton *button = sender;

2.switch (Button.tag) {

3. Case 0: {

4. [_delegate movepaneltooriginalposition];

5. Break;

6.}

7.

8. Case 1: {

9. [_delegate Movepanelright];

break;

11.}

12.

Default:

break;

15.}

The above code uses a switch statement to determine whether the center panel needs to be moved to the right, or to move it to the original middle position, by judging the LeftButton's Tag property. The LeftButton here is passed through the sender parameter. The button's tag setting of 0 indicates that the center panel has moved to the right and, if set to 1, that the center panel is already in the original middle position.

If you look at the Centerviewcontroller.xib file, you will see that I have set the tag default value of LeftButton to 1.

See the delegate method called in the code above? If you remember, before you configured the Centerviewcontroller example, it was set to Mainviewcontroller. Delegate. So the call here involves the related methods in Mainviewcontroller.

Before implementing these delegate methods, first look at the definition of the protocol centerviewcontrollerdelegate in the CenterViewController.h file:

As shown, the Protocol defines two optional Protocol methods, and a required protocol method, respectively: Movepanelleft, Movepanelright, and Movepaneltooriginalposition.

Because Centerviewcontroller's delegate is Mainviewcontroller, we add these delegate methods in Mainviewcontroller.

Open the Mainviewcontroller.m file and add the following two constant definitions:

1. #define Slide_timing. 25

2. #define PANEL_WIDTH 60

Then find the Movepanelright method and add the following code block to the inside:

1.UIView *childview = [self getleftview];

2.[self.view Sendsubviewtoback:childview];

3.

4.[uiview animatewithduration:slide_timing delay:0 options:uiviewanimationoptionbeginfromcurrentstate

5. animations:^{

6. _centerviewcontroller.view.frame = CGRectMake (self.view.frame.size.width-panel_width, 0, Self.view.frame.size.wi DTH, self.view.frame.size.height);

7.}

8. completion:^ (BOOL finished) {

9. if (finished) {

10.

_centerviewcontroller.leftbutton.tag = 0;

12.}

13.}];

Note: This method is called by Btnmovepanelright: Centerviewcontroller in the. For more information on how to implement delegate, please refer to: Apple Developer Documentation .

The code above is where miracles happen!

First call the Getleftview method, which returns a view, pushes the view behind it, and then enters the animation process: Use a animateWithDuration:animations:completion: block. The slide_timing and panel_width values used in the animation can be adjusted arbitrarily. Where slide_timing is the speed at which the animation is controlled, and panel_width is the width of the center view left on the screen after the animation is controlled.

Also, remember to set the LeftButton tag property to 0 for the sea. If you remember, this tag property is used to track the current position of the center view.

Now compile and run the program to see how it works.

When the program starts, click the Kitties button and the center panel should slide to the right and show the left panel. At this point, the effect shown on the screen is as follows:

Notice the rounded corners and shadows on the left edge of the center view-these two effects are the result of executing the Showcenterviewwithshadow:withoffset: (previously added method) method.

Click the Kitties button again-nothing has happened. This is because the Movepaneltooriginalposition method has not yet been implemented.

Go back to the mainviewcontroller.m file and add the following code block to the Movepaneltooriginalposition method:

1.[uiview animatewithduration:slide_timing delay:0 options:uiviewanimationoptionbeginfromcurrentstate

2. animations:^{

3. _centerviewcontroller.view.frame = CGRectMake (0, 0, self.view.frame.size.width, self.view.frame.size.height);

4.}

5. completion:^ (BOOL finished) {

6. if (finished) {

7.

8. [Self Resetmainview];

9.}

10.}];

Similarly, in the above code, a animateWithDuration:animations:completion: block is used to process the animation. This time, however, the location of the center view is animated to the original position.

When the animation is complete, the Resetmainview method is called. At present, the method has not been implemented concretely. In this method you need to reset the view, let's implement it!

Locate the Resetmainview method, and add the following code to the method:

1.//Remove left view and reset variables, if needed

2.if (_leftpanelviewcontroller! = nil)

3.{

4. [Self.leftPanelViewController.view Removefromsuperview];

5. Self.leftpanelviewcontroller = nil;

6.

7. _centerviewcontroller.leftbutton.tag = 1;

8. Self.showingleftpanel = NO;

7.3

10.

11.//Remove View Shadows

12.[self Showcenterviewwithshadow:no withoffset:0];

The upper code removes the left panel from view and resets the kitties button to 1 (indicating that the center view is currently in its original position), and also removes the fillet and shadow effects from the center view.

Compile and run the program, when you click the Kitties button and click the Kitties button again, center view will return to its original position, as shown in:

Not finished ... Source: The Broken Ship blog

Cocoachina is the world's largest Apple development Chinese community, the official daily time to push a variety of exciting research and development resources and tools, the introduction of app marketing experience, the latest corporate recruitment and outsourcing information, as well as the cocos2d engine, Cocos Studio Development Kit, the latest news and training information. Attention can be the first time to understand the latest product and service dynamics, in hand, the world I have!

Please search the number "Cocoachina" Follow us!

How to create a slide-out navigation panel in iOS (1)