自定义UIPageControl 控件 一

分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

               

大家都见过iPhone上的那几个小点点了。那就是iPhone用来控制翻页的UIPageControl控件,但是许多人不会用UIPageControl,又不愿意去看Apple的文档和例子。所以首先我们来讲讲这个控件的使用。

1、新建项目UsingPageControl。删除MainWindow.xib文件。 在Resources组中添加几张图片,在这里我随便找了几张动物的图片,你也可以另外找几张。

2、编辑delegate类代码,#import "UsingPageControlViewController.h",在application:didFinishLaunchingWithOptions:方法中加入以下代码:

UIViewController *vc=[[UsingPageControlViewController alloc]init];

[window addSubview:vc.view];

3、加入框架QuartzCore.framework。然后新建类UsingPageControlViewController,继承UIViewController。在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)to;

-(CATransition *) getAnimation:(NSString *) direction;

@end

4、在implementation中,编辑init方法,把我们要用到的3个图片文件名放入到pages数组:

-(id)init{

if (self = [super init]) {

pages=[[NSMutableArray alloc]initWithObjects:@"Dolphin.png",

   @"Butterfly.png",

   @"Hippopotamus.png",

   nil];

}

return self;

}

5、编辑loadView方法,在上方放入一个UIPageControl用于翻页,在下方放入一个UIView用于显示图片,注意上下分开,不要重叠,避免UIPageControl被遮挡住:

-(void)loadView{

[super loadView];

CGRect viewBounds = self.view.frame;

viewBounds.origin.y = 0.0;

viewBounds.size.height = 460.0;

//控件区域

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;

// 设定翻页事件的处理方法

[pageCtr addTarget:self action:@selector(pageTurn:)

  forControlEvents:UIControlEventValueChanged];

[self.view addSubview:pageCtr];

// 页面区域

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]];

// 添加两个imageview,动画切换时用

for (int i=0; i<2; i++) {

[pageView addSubview:[[UIImageView alloc] initWithFrame:CGRectMake(0,

   0,

   contentFrame.size.width,

   contentFrame.size.height)]];

}

// 设置最上面的subview(显示的图片)

[[[pageView subviews] lastObject] setImage:[UIImage imageNamed:

[pages objectAtIndex:0]]];

[self.view addSubview:pageView];

}

6、翻页控件在感知到翻页动作时,会调用pageTurning方法:

-(void)pageTurn:(UIPageControl*)pageControl{

[self transitionPage:previousPage toPage:pageControl.currentPage];

previousPage=pageControl.currentPage;

}

7、transitionPage方法是这样定义的:

-(void)transitionPage:(int)from toPage:(int)to{

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

NSLog(@"currentpage:%d",to);

CATransition *transition;

if (from!=to) {

if(from<to){

transition=[self getAnimation:kCATransitionFromLeft];

}else{

transition=[self getAnimation:kCATransitionFromRight];

}

// 取出pageView的下面的图片作为准备显示的图片

UIImageView *newImage=(UIImageView *)[[pageView subviews] objectAtIndex:0];

// 将视图修改为要显示的图片

[newImagesetImage:[UIImage imageNamed:[pages objectAtIndex:to]]];

// 将pageView的上下图片交换

[pageView exchangeSubviewAtIndex:0 withSubviewAtIndex:1];

// 显示上面的图片,隐藏下面的图片

[[pageView.subviews objectAtIndex:0] setHidden:YES];

[[pageView.subviews objectAtIndex:1] setHidden:NO];

// 设置转换动画

[[pageView layer] addAnimation:transition forKey:@"pageTurnAnimation"];

}

}

8、其中getAnimation方法根据用户手指滑动的方向返回CATransition转换动画:

// 返回一个转换动画

-(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;

}

这是一个翻页动画,通过其subtype属性设定翻页从哪边开始:上、下、左、右4个方向。duration属性是动画转换的时间;timingFunction属性指定转换过程中要使用的特效,使用常量字符串指定5种不同的效果(但不知什么原因,在这里不管设成什么值,都只有一种效果:淡入淡出)。

程序最终效果如下:

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


           

分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

猜你喜欢

转载自blog.csdn.net/qq_43685389/article/details/87902866