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

@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

推荐阅读更多精彩内容