IOS开发系列之UIScrollView(滚动视图)的常用属性和应用举例(滑动相册、轮播图)

UIScrollView:滚动视图

      UIScrollView在IOS的UI开发中有着广泛的应用,可实现很多关于视图滚动的效果,此篇以一个简单的轮播图Demo为例,简要地介绍UIScrollView类的应用(附完整代码).

一.创建对象: UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:frame];
二.常用属性:
    1.滚动区域:scrollView.contentSize = CGSizeMake(500,800); 将scrollView的可滚动区域设置为宽500高800的矩形.
    2.分页:scrollView.pagingEnabled = YES; 设置scrollView滑动时按照创建时候的大小来分页.
    3.偏移量:scrollView.conntentOffset = CGPointMake(500,0);  将scrollView显示内容的位置原点设置在坐标(500,0)处.
    4.弹簧效果:scrollView.bounces = YES;  将scrollView滑动到边界时的弹簧效果打开.
    5.横向滑动条:scrollView.showHorizontalScrollIndicator = NO; 关闭scrollView的横向滑动条.
    6.纵向滑动条:scrollView.showVerticalScrollIndicator = YES;  打开scrollView的纵向滑动条.

    7.代理:scrollView.delegate

三.scrollView与pageController的结合使用案例:实现若干张图片的循环滑动(相册功能)
        
在ViewController中将定义scrollView和pageController两个属性:
#define WIDTH  [UIScreen mainScreen].bounds.size.width
#define HEIGHT  [UIScreen mainScreen].bounds.size.height
@property (nonatomic, retain) UIPageControl *pageController;
@property (nonatomic, retain) UIScrollView *scrollView;
 
导入5张图片(命名为:1.jpg,…,5.jpg,注意:需将第1张和最后一张即第5张复制一份分别加到末尾和头部,以实现循环效果,即一共七张图片),添加到self.scrollView中:
for (int i = 0; i < 7; i++) {
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i*WIDTH, 0, WIDTH, HEIGHT)];
        NSString *name = [NSString stringWithFormat:@"%d.jpg",i];
        imageView.image = [UIImage imageNamed:name];
        [self.scrollView addSubview:imageView];
    }

初始化self.scrollView并设置相关属性:
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
[self.view addSubview:self.scrollView];
self.scrollView.contentSize = CGSizeMake(WIDTH*7, HEIGHT);
self.scrollView.pagingEnabled = YES;

self.scrollView.delegate = self;

初始化self.pageController并设置相关属性:
self.pageController = [[UIPageControl alloc] initWithFrame:CGRectMake(0, HEIGHT - 30, WIDTH, 30)];
self.pageController.numberOfPages = 7;
self.pageController.currentPage = 0;

[self.view addSubview:self.pageController];

为self.pageController添加并实现响应方法:
[self.pageControlle addTarget:self action:@selector(pageAction:) forControlEvents:UIControlEventValueChanged];
-(void)pageAction:(UIPageControl *)page{//使滑动pageController的时候scrollView上的图片可以跟着滚动
    [self.scrollView setContentOffset:CGPointMake(WIDTH*(page.currentPage + 1), 0) animated:YES];

}

遵守UIScrollViewDelDelegate协议,重写scrollViewDidEndDecelerating(结束滚动即停止滑动)方法:
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    NSInteger page = self.scrollView.contentOffset.x/WIDTH;
    if (page == 6) {
        self.scrollView.contentOffset = CGPointMake(WIDTH, 0);
    }
    if (page == 0) {
        self.scrollView.contentOffset = CGPointMake(WIDTH*5, 0);
    }
    self.pageControl.currentPage = self.scrollView.contentOffset.x/WIDTH - 1;

}

引申:轮播图
在滑动相册中加入定时器,实现轮播图功能:过程中只使用了三个imageView,可以实现若干张图片的循环轮播(完整代码):


#import "ViewController.h"
#define kScrollWidth [UIScreen mainScreen].bounds.size.width
#define kScrollHeight [UIScreen mainScreen].bounds.size.height
@interface ViewController ()<UIScrollViewDelegate>
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) NSMutableArray *dataArray;
//定义三个imageView
@property (nonatomic, strong) UIImageView *beforeImage;
@property (nonatomic, strong) UIImageView *currentImage;
@property (nonatomic, strong) UIImageView *lastImage;
//当前所处位置
@property (nonatomic, assign) NSInteger curIndex;
//计时器
@property (nonatomic, strong) NSTimer *timer;
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    [self loadImageData];
    [self createUI];
    [self setUIDataWithIndex:0 animate:NO];
    [self startTimer];
}
-(void)loadImageData
{
    //加载数据，只需要保存图片的名称即可
    self.dataArray = [[NSMutableArray alloc] init];
    for (int i = 0; i < 10; i++) {
        NSString *imgName = [NSString stringWithFormat:@"%d.jpg", i];
        [self.dataArray addObject:imgName];
    }
}
-(void)createUI
{
    //创建ScrollView
    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScrollWidth, kScrollHeight)];
    self.scrollView.contentSize = CGSizeMake(kScrollWidth*3, kScrollHeight);
    self.scrollView.contentOffset = CGPointMake(kScrollWidth, 0);
    self.scrollView.pagingEnabled = YES;
    self.scrollView.delegate = self;
    self.scrollView.showsHorizontalScrollIndicator = NO;
    self.scrollView.showsVerticalScrollIndicator = NO;
    [self.view addSubview:self.scrollView];
    
    //创建三个imageView属性
    self.beforeImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kScrollWidth, kScrollHeight)];
    [self.scrollView addSubview:self.beforeImage];
    
    self.currentImage = [[UIImageView alloc] initWithFrame:CGRectMake(kScrollWidth, 0, kScrollWidth, kScrollHeight)];
    [self.scrollView addSubview:self.currentImage];
    
    self.lastImage = [[UIImageView alloc] initWithFrame:CGRectMake(kScrollWidth*2, 0, kScrollWidth, kScrollHeight)];
    [self.scrollView addSubview:self.lastImage];
}
//设置图片更换
-(void)setUIDataWithIndex:(NSInteger)index animate:(BOOL)animate
{
    //计算当前页码
    NSInteger count = self.dataArray.count;
    if (index >= count) {
        index = index%count;
    }
    if (index < 0) {
        index = count + index;
    }
    //前一页页码
    NSInteger upIndex = index-1;
    upIndex = upIndex>=0?upIndex:count-1;
    
    //后一页页码
    NSInteger downIndex = index+1;
    downIndex = (downIndex>=count) ? 0:downIndex;
    
    //更换图片
    self.beforeImage.image = [UIImage imageNamed:self.dataArray[upIndex]];
    self.currentImage.image = [UIImage imageNamed:self.dataArray[index]];
    self.lastImage.image = [UIImage imageNamed:self.dataArray[downIndex]];
    
    self.curIndex = index;
    
    //设置动画
    self.scrollView.contentOffset = CGPointMake(0, 0);
    [self.scrollView setContentOffset:CGPointMake(kScrollWidth, 0) animated:animate];
    
}
#pragma mark 代理协议方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSInteger page = scrollView.contentOffset.x/kScrollWidth;
    if (page < 1) {
        [self setUIDataWithIndex:self.curIndex-1 animate:NO];
    }
    else if (page > 1)
    {
        [self setUIDataWithIndex:self.curIndex+1 animate:NO];
    }
}
//开启定时器
-(void)startTimer
{
    [self.timer invalidate];
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(nextPage:) userInfo:nil repeats:YES];
}
//关闭定时器
-(void)stopTimer
{
    [self.timer invalidate];
    self.timer = nil;
}
//开始拖拽
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self stopTimer];
}
//结束拖拽
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self startTimer];
}
#pragma mark 计时器响应方法
-(void)nextPage:(id)sender
{
    [self setUIDataWithIndex:self.curIndex+1 animate:YES];
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end