zoukankan      html  css  js  c++  java
  • 自定义UIPageControl 控件(一)

    大家都见过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


  • 相关阅读:
    【学习笔记/题解】树上启发式合并/CF600E Lomsat gelral
    【学习笔记/题解】虚树/[SDOI2011]消耗战
    【题解】 [GZOI2017]小z玩游戏
    【题解】CF1426E Rock, Paper, Scissors
    【题解】CF1426D Non-zero Segments
    【题解】NOIP2018 填数游戏
    【题解】NOIP2018 旅行
    【题解】NOIP2018 赛道修建
    【题解】时间复杂度
    【题解】「MCOI-02」Convex Hull 凸包
  • 原文地址:https://www.cnblogs.com/encounter/p/2188463.html
Copyright © 2011-2022 走看看