一、UIScrollView
UIScrollView是所有滾動視圖的基礎,很重要,主要用于輪播圖,相冊等功能
當內(nèi)容超過一個屏幕時,為了將內(nèi)容完整呈現(xiàn),就可以使用UIScrollView
重要屬性
1.設置滾動范圍:contentSize:返回值為CGSize
2.設置分頁效果:(BOOL)pagingEnabled
3.偏移量:contentOffset:返回值為CGPoint,改變偏移量可以切換子視圖
4.設置滾動條是否顯示:
showsHorizontalScrollIndicator 水平方向
showsVerticallndicator 垂直方向
5.反彈效果:(BOOL)bounces
和縮放相關的屬性
1.最小縮放比例:minimumZoomScale:返回值CGFloat
2.最大縮放比例:maximumZoomScale:返回值CGFloat
3.當前的縮放比例:zoomScale
重要的位置屬性:automaticallyAdjustsScrollViewInsets
當視圖上有導航欄的時候,會比較麻煩,這個屬性不是ScrollView的屬性,是視圖控制器的屬性
當 automaticallyAdjustsScrollViewInsets 為 NO 時,滾動視圖就不會隨便延展
automaticallyAdjustsScrollViewInsets為 YES 時,滾動視圖會自動延伸
#define WIDTH self.view.frame.size.width
#define HEIGHT self.view.frame.size.height
-(void)viewDidLoad
{
#pragma mark UIScroll
//滾動視圖學習,當內(nèi)容超過一個屏幕時,為了將內(nèi)容完整呈現(xiàn)
UIScrollView *myScrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];
//設置滾動區(qū)域,這個屬性控制著能滾動的服務,這里設置為3倍屏幕寬度
myScrollView.contentSize = CGSizeMake(WIDTH*3, HEIGHT);
//設置分頁效果
myScrollView.pagingEnabled = YES;
//滾動條樣式
myScrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
//隱藏水平/垂直滾動條
myScrollView.showsHorizontalScrollIndicator = NO;
myScrollView.showsVerticalScrollIndicator = NO;
//設置tag
myScrollView.tag = 1001;
//設置反彈效果
myScrollView.bounces = YES;
//設置代理
myScrollView.delegate = self;
//偏移量,相對滾動視圖的原點的位置,屏幕從偏移量這個點開始顯示滾動視圖的內(nèi)容
myScrollView.contentOffset = CGPointMake(WIDTH,0);
//為滾動視圖添加子視圖
for (int i = 0; i < 3; i++) {
UIView *myView = [[UIView alloc]initWithFrame:CGRectMake(WIDTH*i, 0, WIDTH, HEIGHT)];
myView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
// [myScrollView addSubview:myView];
}
for (int i = 0; i < 3; i++) {
UILabel *myLabel = [[UILabel alloc]initWithFrame:CGRectMake(WIDTH*i, 0, WIDTH, HEIGHT)];
myLabel.font = [UIFont systemFontOfSize:220];
myLabel.text = [NSString stringWithFormat:@"第%d頁",i];
//讓字體根據(jù)Label的width適應大小
myLabel.adjustsFontSizeToFitWidth = YES;
//顏色隨機
myLabel.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
[myScrollView addSubview:myLabel];
}
//添加滾動視圖到父視圖
[self.view addSubview:myScrollView];
}
這樣就生成了三個頁面UILabel,可以通過手勢拖拽進行交換
二、UIScrollView的代理方法
UIScrollView的代理方法主要實現(xiàn)兩部分內(nèi)容:
1.監(jiān)視視圖的滾動狀態(tài)
首先看看監(jiān)視視圖的縮放
//開始拖拽視圖,只有觸摸對象滑動才會觸發(fā)
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
// NSLog(@"開始拖拽");
}
//停止拖拽
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
// NSLog(@"拖拽停止");
}
//拖拽結(jié)束,松開的時候
-(void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
//正在滾動
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
//視圖結(jié)束減速
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
//將要開始減速
-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
//拖動到了頂端
-(void)scrollViewDidScrollToTop:(UIScrollView *)scrollView
2.控制視圖的縮放
//返回需要縮放的視圖,必須為scrollView的子視圖
-(UIView*)viewForZoominglnScrollView:(UIScrollView*)scrollView:
//縮放結(jié)束
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
//變換中
-(void)scrollViewDidZoom:(UIScrollView *)scrollView
//將要開始變形
-(void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
三、一個比較復雜的實例
現(xiàn)在要實現(xiàn)一個簡單的相冊功能,每個照片還可以通過捏合來進行縮放,切換圖片之后之前的圖片要恢復原比例
同時添加了一個UIPageControl控件,與UIScrollView配合切換視圖
這里總共有三張圖片,加了第四張與第一張相同,用來模擬循環(huán)狀態(tài)
#define WIDTH (self.view.frame.size.width)
#define HEIGHT (self.view.frame.size.height)
#import "SecondViewController.h"
#import "PhotoScrollView.h"
@interface SecondViewController ()<UIScrollViewDelegate>
@property (nonatomic,retain)UIScrollView *albumScrollView;//相冊滾動視圖
@property (nonatomic,retain)UIPageControl *albunPageControl;//頁數(shù)小白點
@property (nonatomic,retain)NSMutableArray *photoArray;//照片數(shù)組
@end
@implementation SecondViewController
//_albumScrollView懶加載
-(UIScrollView *)albumScrollView
{
if (!_albumScrollView) {
_albumScrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];
_albumScrollView.contentSize = CGSizeMake(WIDTH*5, HEIGHT);
//翻頁設置
_albumScrollView.pagingEnabled = YES;
}
return _albumScrollView;
}
-(UIPageControl *)albunPageControl
{
if (!_albunPageControl) {
_albunPageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 600, WIDTH, 50)];
//添加方法
// [_albunPageControl addTarget:self action:@selector(pageControlChangeView:) forControlEvents:UIControlEventValueChanged];
}
return _albunPageControl;
}
//數(shù)組懶加載
-(NSMutableArray *)photoArray
{
if (!_photoArray) {
_photoArray = [[NSMutableArray alloc]initWithCapacity:2];
}
return _photoArray;
}
-(void)viewDidLoad
{
//添加滾動圖并設置代理
[self.view addSubview:self.albumScrollView];
_albumScrollView.delegate = self;
//添加PageControl
[self.view addSubview:self.albunPageControl];
//設置PageControl的頁數(shù)
_albunPageControl.numberOfPages = 3;
//給pageControl添加方法
[_albunPageControl addTarget:self action:@selector(pageControlChangeView:) forControlEvents:UIControlEventValueChanged];
//添加三張圖片
[self.photoArray addObject:[self addPhoto:CGRectMake(0, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s1.png"]Tag:1000]];
[self.photoArray addObject:[self addPhoto:CGRectMake(WIDTH, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s2.png"]Tag:1001]];
[self.photoArray addObject:[self addPhoto:CGRectMake(WIDTH*2, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s3.png"]Tag:1002]];
//添加一張與第一張重復的圖片,制造循環(huán)效果
[self addPhoto:CGRectMake(WIDTH*3, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s1.png"]Tag:1003];
}
//添加圖片函數(shù)
-(UIScrollView*)addPhoto:(CGRect)frame Image:(UIImage*)image Tag:(NSInteger)tag
{
//創(chuàng)建UIScrollView
UIScrollView *photoScrollView =[[UIScrollView alloc]initWithFrame:frame];
//創(chuàng)建UIimageView
UIImageView *photoImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
photoImageView.image = image;
//設置代理
photoScrollView.delegate = self;
//添加視圖縮放范圍,沒有這個縮放不了 找了半天。。。。。。。。。。。。。。。。。。。。。。。
photoScrollView.minimumZoomScale = 0.3;
photoScrollView.maximumZoomScale = 3;
//添加到父視圖
[photoScrollView addSubview:photoImageView];
[self.albumScrollView addSubview:photoScrollView];
return photoScrollView;
}
//pageControl點擊時進行滾動
-(void)pageControlChangeView:(UIPageControl*)sender
{
//根據(jù)頁數(shù)設置偏移量,加動畫
[_albumScrollView setContentOffset:CGPointMake(sender.currentPage*WIDTH, 0)animated:YES];
}
#pragma mark 代理
//實現(xiàn)代理縮放方法
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
for (id item in scrollView.subviews) {
if ([item isKindOfClass:[UIImageView class]]) {
return item;
}
}
return nil;
}
//在左右拖拽時實現(xiàn)方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//1.進行循環(huán)設置
//得到當前的偏移量
CGFloat offset_X = _albumScrollView.contentOffset.x;
//偏移到第四張之后,手動設置偏移量為0
if (offset_X >= WIDTH*3) {
_albumScrollView.contentOffset = CGPointMake(0, 0);
_albunPageControl.currentPage = 0;
}
else
{
//使PageControl與Scroll同步
_albunPageControl.currentPage = offset_X/WIDTH;
}
//在切換圖片的時候使照片恢復原來大小
//找到當前偏移值對應的數(shù)組index,但是向左右撥動又不一樣,有點麻煩
int index = (int)(offset_X/WIDTH)-1;
NSLog(@"index = %d",index);
// PhotoView *tempView = _photoArray[index];
//遍歷數(shù)組全修改了
for (UIScrollView *tempView in _photoArray) {
tempView.transform = CGAffineTransformMakeScale(1, 1);
}
//2.進行縮放恢復設置
//根據(jù)偏移量得到當前page
int numPage = offset_X/WIDTH;
//用數(shù)組要考慮越界問題
if (numPage > 0 && numPage < 2) {
UIScrollView *leftScrollView = _photoArray[numPage-1];
UIScrollView *rightScrollView = _photoArray[numPage+1];
//恢復比例
leftScrollView.zoomScale = 1.0;
rightScrollView.zoomScale = 1.0;
}
else if (numPage == 0)
{
UIScrollView *rightScrollView = _photoArray[numPage+1];
rightScrollView.zoomScale = 1.0;
}
else if (numPage == 2)
{
UIScrollView *leftScrollView = _photoArray[numPage-1];
//恢復比例
leftScrollView.zoomScale = 1.0;
}
}
//縮放時保持圖片在中央
-(void)scrollViewDidZoom:(UIScrollView *)scrollView
{
UIImageView *myImageView = scrollView.subviews[0];
float contentX = scrollView.contentSize.width;
float contentY = scrollView.contentSize.height;
//如果放大沒有超出邊界
if (contentX < WIDTH && contentY <HEIGHT) {
myImageView.center = self.view.center;
NSLog(@"w = %f,h = %f",contentX,contentY);
}
else //如果放大超出了屏幕frame
{
myImageView.center = CGPointMake(contentX/2, contentY/2);
}
for (id item in scrollView.subviews) {
NSLog(@"zssm = %@",item);
}
}
@end
實現(xiàn)效果: