码迷,mamicode.com
首页 > 移动开发 > 详细

iOS开发 - UIPageControl实现分页图片轮播器

时间:2015-05-22 11:40:45      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:分页   显示   效果   开发   

分页相关属性

只要将UIScrollView的pageEnabled属性设置为YESUIScrollView会被分割成多个独立页面,里面的内容就能进行分页展示

一般会配合UIPageControl增强分页效果,UIPageControl常用属性如下 
一共有多少页
@property(nonatomic) NSInteger numberOfPages;

当前显示的页码
@property(nonatomic) NSInteger currentPage; 

只有一页时,是否需要隐藏页码指示器
@property(nonatomic) BOOL hidesForSinglePage; 

其他页码指示器的颜色
@property(nonatomic,retain) UIColor *pageIndicatorTintColor;

当前页码指示器的颜色
@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;

分页图片轮播器实例

#define ImageCount 5
#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;


/**
 *  定时器
 */
@property(nonatomic,strong)NSTimer* timer;
@end


@implementation ViewController


- (void)viewDidLoad {
    [super viewDidLoad];
    //0.一些固定的尺寸参数
    CGFloat imageW=self.scrollView.frame.size.width;
    CGFloat imageH=self.scrollView.frame.size.height;
    CGFloat imageY=0;

    //1.添加imageCount个图片到scrollView中
    for (int i=0; i<ImageCount; i++) {
        UIImageView* imageView =[[UIImageView alloc]init];

        //设置frame
        CGFloat imageX=i*imageW;
        imageView.frame=CGRectMake(imageX, imageY, imageW, imageH);

        //设置图片
        NSString* name=[NSString stringWithFormat:@"img_0%d",i+1];
        imageView.image=[UIImage imageNamed:name];
        [self.scrollView addSubview:imageView];

    }
    //2.设置内容尺寸
    CGFloat contentW=ImageCount*imageW;
    self.scrollView.contentSize=CGSizeMake(contentW, 0);

    //3.隐藏水平滚动条
    self.scrollView.showsHorizontalScrollIndicator=NO;

    //4.分页
    self.scrollView.pagingEnabled=YES;
    self.scrollView.delegate=self;

    //5.设置pageControl的总页数
    self.pageControl.numberOfPages=ImageCount;

    //6.添加定时器(每隔2秒调用一次self的nextImage方法)
    [self addTimer];

}

/**
 *  添加定时器
 */
- (void)addTimer
{
    self.timer=[NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    //循环控制多线程
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}


/**
 *  移除定时器
 */

- (void)removeTimer
{
    [self.timer invalidate];
    self.timer=nil;
}


/**
 *  下一张图片
 */
- (void)nextImage
{
    //1.增加pageControl的页码
    int page=0;
    if (self.pageControl.currentPage==ImageCount-1) {
        page=0;
    }else{
        page=self.pageControl.currentPage+1;
    }
    //2.计算scrollView滚动的位置
    CGFloat offsetX=page*self.scrollView.frame.size.width;
    CGPoint offset=CGPointMake(offsetX, 0);
    [self.scrollView setContentOffset:offset animated:YES];
}


#pragma mark - 代理方法

/**
 *  当scrollView正在滚动就会调用
 */
- (void) scrollViewDidScroll:(UIScrollView *)scrollView
{
    //根据scrollView的滚动位置决定pageControl显示第几页
    CGFloat scrollW=scrollView.frame.size.width;
    int page=(scrollView.contentOffset.x+scrollW*0.5)/scrollW;
    self.pageControl.currentPage=page;
}

/**
 *  开始拖拽的时候调用
 */
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
    //停止定时器(一旦定时器停止了,就不能在使用了)
    [self removeTimer];
}

/**
 *  停止拖拽的时候调用
 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    //开启定时器
    [self addTimer];
}


@end

Storyboard

技术分享

效果图

技术分享

iOS开发 - UIPageControl实现分页图片轮播器

标签:分页   显示   效果   开发   

原文地址:http://blog.csdn.net/wangzi11322/article/details/45913241

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!