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

}