UI控件笔记（十）：UI之UIScrollView\两种手势\第三方库\pagecontrol\相册制作

一、UIScrollView滚动视图

#import "MainViewController.h"

@interface
MainViewController ()<UIScrollViewDelegate>

@end

@implementation MainViewController

- (void)viewDidLoad {

[super
viewDidLoad];

//当用到滚动视图及其子类的时候，系统会默认使用自动布局，如果我们的代码没有用到自动布局，那么我们需要把当前VC的自动布局关了

self.automaticallyAdjustsScrollViewInsets =
NO;

//[self makeImage];//用UIImageView来添加一张大图

[self
makeScr];//用滚动视图来添加一张大图

// Do any additional setup after loading the view.

}

-(void)makeImage

{

UIImageView *img = [[UIImageView
alloc] initWithFrame:CGRectMake(0,
64, 530,
596)];

img.image = [UIImage
imageNamed:@"big.png"];

[self.view
addSubview:img];

[img release];

}

-(void)makeScr

{

UIScrollView *scr = [[UIScrollView
alloc] initWithFrame:CGRectMake(0,
64, 100,
100)];

scr.backgroundColor = [UIColor
redColor];

[self.view
addSubview:scr];

[scr release];

1、滚动视图要有一个滚动的范围，这个滚动的范围就是内容视图的大小，所以我们用contentSize来表示

scr.contentSize =
CGSizeMake(530,
596);//设置上面的滚动视图的可滚大小为530、596

//一般来说，滚动视图的内容视图大小都要大于他的frame，不然没法滚

//滚动视图设置完毕

2、把想要滚得东西贴在滚动视图上，就会随着滚动视图一起滚了，所以换一句话说，滚动视图的内容大小应该至少保证大于等于想滚的东西的大小

UIImageView *img = [[UIImageView
alloc] initWithFrame:CGRectMake(0,
0, 530,
596)];//按照正常大小来设置imageView

img.image = [UIImage
imageNamed:@"big.png"];

[scr addSubview:img];

[img release];

3、scrollview的属性

3.1、边界弹不弹

scr.bounces =
YES;

3.2、scrollview的代理

scr.delegate =
self;

3.3、分页属性

scr.pagingEnabled =
NO;

//按照scrollView的frame来分页，每一页都是一个frame的大小，最后不够的部分算一页

//平时做的时候，如果要用到分页，应该保证contentsize是frame的整数倍

3.4、显示或隐藏滑块

scr.showsVerticalScrollIndicator =
NO;

scr.showsHorizontalScrollIndicator =
NO;

3.5、能否滚动

scr.scrollEnabled =
YES;

3.6、偏移量,就是内容视图相对于frame视图的左上角坐标的x和y的偏移的值

scr.contentOffset =
CGPointMake(0,
0);

}

#pragma mark 滚动视图的代理方法

4、只要滚动视图在滚，就会调用下面的代理方法

-(void)scrollViewDidScroll:(UIScrollView *)scrollView

{

NSLog(@"偏移量x=%f,y=%f",scrollView.contentOffset.x,scrollView.contentOffset.y);

}

5、当滚动视图结束减速的时候，会调用下面方法

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

NSLog(@"哼哼哼哼哼%f,%f",scrollView.contentOffset.x,scrollView.contentOffset.y);

}

二、两种手势

#import "MainViewController.h"

@interface
MainViewController ()

{

int _width;

}

@end

@implementation MainViewController

- (void)viewDidLoad {

[super
viewDidLoad];

_width = 320;

[self makeUI];

[self
makeTapGesture];

[self
makePinGesture];

注意：手势们的父类都是UIGestureRecognizer，但是我们用的时候一般都只用子类

//UIGestureRecognizer

// Do any additional setup after loading the view.

}

-(void)makeUI

{

UITextField *text = [[UITextField
alloc] initWithFrame:CGRectMake(0,
64, _width,
44)];

text.borderStyle =
UITextBorderStyleLine;

text.userInteractionEnabled =
NO;

[self.view
addSubview:text];

[text release];

text.tag = 5000;

UIView *ff = [[UIView
alloc] initWithFrame:CGRectMake(0,
0, 320,
250)];

ff.backgroundColor= [UIColor
redColor];

text.inputView = ff;

}

1、单击手势

-(void)makeTapGesture//单击手势

{

UITapGestureRecognizer *tap = [[UITapGestureRecognizer
alloc]
initWithTarget:self
action:@selector(tapDown:)];

[self.view
addGestureRecognizer:tap];

[tap release];

}

2、单击手势事件

-(void)tapDown:(UITapGestureRecognizer*)tap//单击事件

{

NSLog(@"单机了");

//键盘收回

UITextField *text = (UITextField*)[self.view
viewWithTag:5000];

[text resignFirstResponder];

CGPoint gg = [tap
locationInView:self.view];

NSLog(@"%f,%f",gg.x,gg.y);

}

3、捏合手势

-(void)makePinGesture//捏合手势

{

UIPinchGestureRecognizer *pin = [[UIPinchGestureRecognizer
alloc]
initWithTarget:self
action:@selector(pinWorking:)];

[self.view
addGestureRecognizer:pin];

[pin release];

}

4、捏合手势事件

-(void)pinWorking:(UIPinchGestureRecognizer*)pin//捏合事件

{

//textField变长变短

NSLog(@"捏合了");

NSLog(@"%f",pin.scale);

UITextField *text = (UITextField*)[self.view
viewWithTag:5000];

text.frame = CGRectMake(0,
64, _width*pin.scale,
44);

}

三、第三方库（iCarousel.h、iCarousel.m）

#import <UIKit/UIKit.h>

#import "iCarousel.h"

@interface MainViewController :
UIViewController<iCarouselDataSource,iCarouselDelegate>//代理写这里

@property(nonatomic,retain)iCarousel *ica;

@end

#import "MainViewController.h"

@interface
MainViewController ()

@end

@implementation MainViewController

-(void)dealloc

{

self.ica =
nil;

[super dealloc];

}

- (void)viewDidLoad {

[super
viewDidLoad];

[self makeUI];

// Do any additional setup after loading the view.

}

-(void)makeUI

{

self.ica = [[iCarousel
alloc] initWithFrame:CGRectMake(0,
64, 320,
self.view.frame.size.height-64)];

self.ica.dataSource =
self;

self.ica.delegate =
self;

[self.view
addSubview:self.ica];

[self.ica
release];

//循环视图的样式

self.ica.type =
iCarouselTypeCoverFlow;

}

//下面是ica的代理方法们

1、设置一共有多少个页面

-(NSUInteger)numberOfItemsInCarousel:(iCarousel *)carousel

{

return 9;

}

2、设置每个页面都有什么，这个方法会被多次执行，有几个页面就被执行几次，所以不需要我们循环了

-(UIView*)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSUInteger)index

{

UIImageView *img = [[[UIImageView
alloc] initWithFrame:CGRectMake(0,
0, 150,
330)]
autorelease];

img.image = [UIImage
imageNamed:[NSString
stringWithFormat:@"火影0%d.png",index+1]];

return img;

}

3、同时可见的页面个数

-(NSUInteger)numberOfVisibleItemsInCarousel:(iCarousel *)carousel

{

return 3;

}

4、每一页的宽度

-(CGFloat)carouselItemWidth:(iCarousel *)carousel

{

return 120;

}

5、是否循环

-(BOOL)carouselShouldWrap:(iCarousel *)carousel

{

return
YES;

}

四、pagecontrol页面控制（图片下面的小白点）

@implementation MainViewController

- (void)viewDidLoad {

[super
viewDidLoad];

self.automaticallyAdjustsScrollViewInsets =
NO;

[self makeUI];

// Do any additional setup after loading the view.

}

-(void)makeUI

{

//做scrollView

UIScrollView *scr = [[UIScrollView
alloc]
initWithFrame:CGRectMake(0,
64,
320, self.view.frame.size.height-64)];//页宽==frame宽

scr.delegate =
self;//代理

scr.contentSize =
CGSizeMake(320, (self.view.frame.size.height-64)*9);//内容

scr.pagingEnabled =
YES;//分页

[self.view
addSubview:scr];

[scr release];

//做scrollView上的布局

for(int i =
1;i<10;i++)

{

UIImageView *imageView = [[UIImageView
alloc] initWithFrame:CGRectMake(5, (self.view.frame.size.height-64)*(i-1),
310, 468)];

imageView.image = [UIImage
imageNamed:[NSString
stringWithFormat:@"火影0%d.png",i]];

[scr addSubview:imageView];

[imageView release];

}

//pageControl

UIPageControl *page = [[UIPageControl
alloc]
initWithFrame:CGRectMake(0,
self.view.frame.size.height-30,
320,
30)];

page.backgroundColor = [UIColor
blackColor];

[self.view
addSubview:page];

[page release];

//1、pagecontrol的页数

page.numberOfPages =
9;

page.tag = 11000;

}

//停止减速，观察到了第几页，就是观察scrollView的contentoffset的x或者y

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

NSLog(@"%f",scrollView.contentOffset.y/504);

//可以通过offset的偏移量与frame的宽高的比值得到当前的页码

//让pagecontrol到对应的页码

//1、找到pagecontrol

UIPageControl *page = (UIPageControl*)[self.view
viewWithTag:11000];

//2、改变页码的显示

page.currentPage = scrollView.contentOffset.y/504;

}

五、相册制作

#import "MainViewController.h"

@interface
MainViewController ()<UIScrollViewDelegate>

{

int _page;

}

@end

@implementation MainViewController

//这个Main就是一个相册浏览VC

- (void)viewDidLoad {

[super
viewDidLoad];

_page =
0;//初始化页为第一页

self.title =
@"我的相册";

self.automaticallyAdjustsScrollViewInsets =
NO;

[self makeUI];

[self makePin];

// Do any additional setup after loading the view.

}

-(void)makeUI

{

//1、首先要有一个可以横着滚得scrollView

UIScrollView *scr = [[UIScrollView
alloc] initWithFrame:CGRectMake(0,
64, 320,
468)];//大scrollview，有9页

scr.delegate =
self;

scr.contentSize =
CGSizeMake(9*320,
468);

[self.view
addSubview:scr];

[scr release];

scr.tag = 8000;

scr.pagingEnabled =
YES;

//2、循环在每一页放一张图片，但是每一页不能直接放图片，而应该在每一页先放一个scrollView，再放图片

for(int i =
0;i<9;i++)

{

//循环9次，每一次向右移动320，换一页，但是每一页都是一个scrollview，为了每一页图片放大后，这一页可以单独滚动

UIScrollView *littleScr = [[UIScrollView
alloc] initWithFrame:CGRectMake(i*320,
0, 320,
468)];

littleScr.contentSize =
CGSizeMake(320,
468);//小scrollview的内容目前正好等于一页的大小

[scr addSubview:littleScr];

littleScr.tag =
8100+i;

//在每一个小scrollview上贴着你的照片，照片目前和小scrollview一样大，也就是全屏大

UIImageView *img = [[UIImageView
alloc] initWithFrame:littleScr.bounds];

img.image = [UIImage
imageNamed:[NSString
stringWithFormat:@"火影0%d.png",i+1]];

[littleScr addSubview:img];

[img release];

img.tag =
3000+i;

}

}

//停止减速，可以获得当前页，然后才能确定一会儿捏合的时候，哪副图会放大

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

_page = scrollView.contentOffset.x/320;

// NSLog(@"%d",_page);//这个页数用来找到小的scrollview和里面的imageView

for(int i =
0;i<9;i++)

{

UIScrollView *scr = (UIScrollView*)[self.view
viewWithTag:8100+i];

scr.contentSize =
CGSizeMake(320,
468);

UIImageView *img = (UIImageView*)[self.view
viewWithTag:3000+i];

img.frame =
CGRectMake(0,
0, 320, 468);

}

}

-(void)makePin

{

UIPinchGestureRecognizer *pin = [[UIPinchGestureRecognizer
alloc]
initWithTarget:self
action:@selector(pinWorking:)];

[self.view
addGestureRecognizer:pin];

[pin release];

}

-(void)pinWorking:(UIPinchGestureRecognizer*)pin

{

if(pin.scale <
1)//缩小

{

return;

}

//1、让当前_page页面的小scrollview的contentsize按照比例变大，使得当前页面图片的可滚范围变大

UIScrollView *currentLittleScr = (UIScrollView*)[self.view
viewWithTag:8100+_page];

//小scrollview的frame永远不变，所以我可以用小scrollview的frame的宽和高来做基本变量

currentLittleScr.contentSize =
CGSizeMake(currentLittleScr.frame.size.width*pin.scale, currentLittleScr.frame.size.height*pin.scale);

//2、把当前_page页面的图片的frame按照比例变大，这样图片可看的范围就大了

UIImageView *img = (UIImageView*)[self.view
viewWithTag:3000+_page];

img.frame = CGRectMake(0,
0, currentLittleScr.frame.size.width*pin.scale, currentLittleScr.frame.size.height*pin.scale);

}