UIScrollView:滾動視圖
UIScrollView在IOS的UI開發(fā)中有著廣泛的應(yīng)用,可實現(xiàn)很多關(guān)于視圖滾動的效果,此篇以一個簡單的輪播圖Demo為例,簡要地介紹UIScrollView類的應(yīng)用(附完整代碼).
一.創(chuàng)建對象: UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:frame];
二.常用屬性:
1.滾動區(qū)域:scrollView.contentSize = CGSizeMake(500,800); 將scrollView的可滾動區(qū)域設(shè)置為寬500高800的矩形.
2.分頁:scrollView.pagingEnabled = YES; 設(shè)置scrollView滑動時按照創(chuàng)建時候的大小來分頁.
3.偏移量:scrollView.conntentOffset = CGPointMake(500,0);? 將scrollView顯示內(nèi)容的位置原點設(shè)置在坐標(biāo)(500,0)處.
4.彈簧效果:scrollView.bounces = YES;? 將scrollView滑動到邊界時的彈簧效果打開.
5.橫向滑動條:scrollView.showHorizontalScrollIndicator = NO; 關(guān)閉scrollView的橫向滑動條.
6.縱向滑動條:scrollView.showVerticalScrollIndicator = YES;? 打開scrollView的縱向滑動條.
7.代理:scrollView.delegate
三.scrollView與pageController的結(jié)合使用案例:實現(xiàn)若干張圖片的循環(huán)滑動(相冊功能)
在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;
導(dǎo)入5張圖片(命名為:1.jpg,…,5.jpg,注意:需將第1張和最后一張即第5張復(fù)制一份分別加到末尾和頭部,以實現(xiàn)循環(huán)效果,即一共七張圖片),添加到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并設(shè)置相關(guān)屬性:
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并設(shè)置相關(guān)屬性:
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添加并實現(xiàn)響應(yīng)方法:
[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協(xié)議,重寫scrollViewDidEndDecelerating(結(jié)束滾動即停止滑動)方法:
-(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;
}
引申:輪播圖
在滑動相冊中加入定時器,實現(xiàn)輪播圖功能:過程中只使用了三個imageView,可以實現(xiàn)若干張圖片的循環(huán)輪播(完整代碼):
#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;
//當(dāng)前所處位置
@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
{
//加載數(shù)據(jù)露该，只需要保存圖片的名稱即可
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
{
//創(chuàng)建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];
//創(chuàng)建三個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];
}
//設(shè)置圖片更換
-(void)setUIDataWithIndex:(NSInteger)index animate:(BOOL)animate
{
//計算當(dāng)前頁碼
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;
//設(shè)置動畫
self.scrollView.contentOffset = CGPointMake(0, 0);
[self.scrollView setContentOffset:CGPointMake(kScrollWidth, 0) animated:animate];
}
#pragma mark 代理協(xié)議方法
-(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];
}
//關(guān)閉定時器
-(void)stopTimer
{
[self.timer invalidate];
self.timer = nil;
}
//開始拖拽
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self stopTimer];
}
//結(jié)束拖拽
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self startTimer];
}
#pragma mark 計時器響應(yīng)方法
-(void)nextPage:(id)sender
{
[self setUIDataWithIndex:self.curIndex+1 animate:YES];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
