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
