Custom uipagecontrol Control (1)

We have seen those little dots on the iPhone. This is the uipagecontrol control that the iPhone uses to control page flip. However, many people do not use uipagecontrol and are unwilling to see Apple's documents and examples. So first, let's talk about the use of this control.

1. Create the usingpagecontrol project. Delete the mainwindow. XIB file. Add several images to the Resources Group. Here I randomly find several images of animals. You can also find several other images.

2. Edit the delegate class code, # import "usingpagecontrolviewcontroller. H", and add the following code to application: didfinishlaunchingwitexceptions: method:

Uiviewcontroller * Vc = [[usingpagecontrolviewcontroller alloc] init];

[Window addsubview: VC. View];

3. Add quartzcore. Framework to the framework. Create a class usingpagecontrolviewcontroller and inherit uiviewcontroller. Declare necessary variables in the interface:

# Import <Foundation/Foundation. h>

# Import <uikit/uikit. h>

# Import <quartzcore/quartzcore. h>

 

 

@ Interfaceusingpagecontrolviewcontroller: uiviewcontroller {

Uipagecontrol * pagectr;

Nsmutablearray * pages;

Uiview * pageview;

Int previouspage;

}

-(Void) transitionpage :( INT) from topage :( INT);

-(Catransition *) getanimation :( nsstring *) direction;

@ End

 

4. in implementation, edit the init method and put the three image file names we need into the pages array:

-(ID) Init {

If (Self = [Super init]) {

Pages = [[nsmutablearray alloc] initwithobjects: @ "dolphin.png ",

@ "Butterfly.png ",

@ "Hippopotamus.png ",

Nil];

}

Return self;

}

 

5. Edit the loadview method. Put a uipagecontrol on the top to flip the page. Put a uiview on the bottom to display the image. Note that the uipagecontrol should be separated up and down, so that the uipagecontrol should not be blocked:

-(Void) loadview {

[Super loadview];

 

Cgrect viewbounds = self. View. frame;

View bounds. Origin. Y = 0.0;

Viewbounds. Size. Height = 460.0;

// Control Area

Pagectr = [[uipagecontrol alloc] initwithframe: cgrectmake (viewbounds. Origin. X,

Viewbounds. Origin. y,

Viewbounds. Size. Width,

60)];

Pagectr. backgroundcolor = [uicolor blackcolor];

Pagectr. numberofpages = 3;

Pagectr. currentpage = 0;

// Set the handling method for page flip events

[Pagectr addtarget: Self action: @ selector (pageturn :)

Forcontrolevents: uicontroleventvaluechanged];

[Self. View addsubview: pagectr];

// Page Area

Cgrect contentframe = cgrectmake (viewbounds. Origin. X,

Viewbounds. Origin. Y + 60,

Viewbounds. Size. Width,

Viewbounds. Size. Height-60 );

Pageview = [[uiview alloc] initwithframe: contentframe];

[Pageview setbackgroundcolor: [uicolor browncolor];

// Add two imageviews for animation Switching

For (INT I = 0; I <2; I ++ ){

[Pageview addsubview: [[uiimageview alloc] initwithframe: cgrectmake (0,

0,

Contentframe. Size. Width,

Contentframe. Size. Height)];

}

// Set the top subview (displayed image)

[[Pageview subviews] lastobject] setimage: [uiimage imagenamed:

[Pages objectatindex: 0];

[Self. View addsubview: pageview];

 

}

6. When the page flip control detects the page flip action, it will call the pageturning method:

-(Void) pageturn :( uipagecontrol *) pagecontrol {

[Self transitionpage: previouspage topage: pagecontrol. currentpage];

Previouspage = pagecontrol. currentpage;

}

 

7. The transitionpage method is defined as follows:

-(Void) transitionpage :( INT) from topage :( INT) {

Nslog (@ "previouspage: % d", from );

Nslog (@ "currentpage: % d", );

Catransition * transition;

If (from! = ){

If (from <){

Transition = [self getanimation: kcatransitionfromleft];

} Else {

Transition = [self getanimation: kcatransitionfromright];

}

// Retrieve the image below the pageview as the image to be displayed

Uiimageview * newimage = (uiimageview *) [[pageview subviews] objectatindex: 0];

// Change the view to the image to be displayed

[Newimagesetimage: [uiimage imagenamed: [Pages objectatindex: To];

// Swap the last part of the pageview

[Pageview exchangesubviewatindex: 0 withsubviewatindex: 1];

// Display the image above and hide the image below

[[Pageview. subviews objectatindex: 0] sethidden: Yes];

[[Pageview. subviews objectatindex: 1] sethidden: No];

// Set the conversion Animation

[[Pageview layer] addanimation: Transition forkey: @ "pageturnanimation"];

}

}

 

8. The getanimation method returns the catransition conversion Animation Based on the direction of the user's finger sliding:

// Returns a conversion animation.

-(Catransition *) getanimation :( nsstring *) Direction

{

Catransition * animation = [catransition animation];

[Animation setdelegate: Self];

[Animation settype: kcatransitionpush];

[Animation setsubtype: direction];

[Animation setduration: 1.0f];

[Animation settimingfunction: [camediatimingfunction functionwithname: kcamediatimingfunctioneaseineaseout];

Return animation;

}

This is a flip-page animation. It uses the subtype attribute to set the top, bottom, left, and right directions of the flip-page. The duration attribute is the animation conversion time. The timingfunction attribute specifies the special effect to be used during the conversion process, and five different effects are specified using a constant string (but for some reason, here, no matter what value is set, there is only one effect: fade in and out ).

The final effect of the program is as follows:

Http://img.ph.126.net/OOXkrJ0gGIDLFYbTK-216g==/1347139238554061973.png