IOS开发学习笔记033-UIScrollView

1、滚动显示图片

如果图片过大，则需要滚动显示，这是需要用到类UIScrollView，可是实现控件的水平和垂直滚动。

可用三步实现：1 设置UIScrollView，2 设置UIImageView，3 设置UIScrollView的滚动范围。

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     // Do any additional setup after loading the view, typically from a nib.
 4     
 5     // 1、添加 scrollView，并设置可视范围
 6     UIScrollView *scrollView = [[UIScrollView alloc] init];
 7     scrollView.frame = CGRectMake(0, 0, 320, 480); // 可视范围
 8     scrollView.backgroundColor = [UIColor grayColor];
 9     [self.view addSubview:scrollView];
10     
11     // 2、添加imageView
12     UIImageView *imageView = [[UIImageView alloc] init];
13     imageView.image = [UIImage imageNamed:@"1.jpg"];
14     CGSize imageSize = imageView.image.size;
15     imageView.frame = CGRectMake(0, 0, imageSize.width, imageSize.height);
16     
17     [scrollView addSubview:imageView];
18     
19     
20     // 3、设置滚动范围
21     scrollView.contentSize = imageView.image.size;
22 }

2、其他属性设置

1     // 其他属性
2     // 是否显示滚动条
3     //scrollView.showsHorizontalScrollIndicator = NO;
4     // 弹簧效果
5     //scrollView.bounces = NO;
6     // 额外显示区域 top left bottom right
7     //scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20);
8

3、移动图片

添加四个按钮表示上下左右，通过按钮的tag来区分按钮。这里是使用3.5存得屏幕，分辨率大小固定，所以暂使用320*480。

给按钮绑定事件，然后实现方法如下：

 1 // 上下左右移动
 2 - (IBAction)allBtn:(UIButton *)sender
 3 {
 4     [UIView animateWithDuration:1.0 animations:^{
 5         NSInteger btnTag = sender.tag;
 6         CGPoint point = _scrollView.contentOffset;
 7 
 8         switch (btnTag) {
 9             case 1: // 上
10                 point.y -= 50;
11                 if (point.y < 0) {
12                     point.y = 0;
13                 }
14                 break;
15             case 2: // 下
16                 point.y += 50;
17                 if(point.y > 320)
18                 {
19                     point.y = 320;
20                 }
21                 break;
22             case 3: // 左
23                 point.x -= 50;
24                 if(point.x < 0)
25                 {
26                     point.x = 0;
27                 }
28 
29                 break;
30             case 4: // 右
31                 point.x += 50;
32                 if(point.x > 480)
33                 {
34                     point.x = 480;
35                 }
36                 break;
37             default:
38                 break;
39         }
40         
41         _scrollView.contentOffset = point;
42 
43     }];
44 }

4、缩放图片

缩放图片简单流程：

1、设置代理 delegate

2、遵守协议 UIScrollViewDelegate

3、设置缩放比例 minimumZoomScale，maxmumZoomScale

4、实现缩放方法 viewForZoomingInScrollView

　　4、1、设置代理 delegate

1     _scrollView.delegate = self; // 指向控制器

　　4、2、遵守协议 UIScrollViewDelegate

1 @interface ViewController () <UIScrollViewDelegate> // 遵守协议
2 
3 {
4     UIScrollView *_scrollView;
5     UIImageView *_imageView;
6 }
7 @end

　　4、3、设置缩放比例 minimumZoomScale，maxmumZoomScale

1     // 设置缩放比例
2     scrollView.maximumZoomScale = 2.0;
3     scrollView.minimumZoomScale = 0.2;

　　4、4、实现缩放方法 viewForZoomingInScrollView

1 // 图片缩放,代理方法
2 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
3 {
4     return _imageView; // 返回缩放对象
5 }

代码

  1 //
  2 //  ViewController.m
  3 //  UIScrolleView-大图片
  4 //
  5 //  Created by Christian on 15/5/26.
  6 //  Copyright (c) 2015年 slq. All rights reserved.
  7 //
  8 
  9 #import "ViewController.h"
 10 
 11 @interface ViewController () <UIScrollViewDelegate>
 12 
 13 {
 14     UIScrollView *_scrollView;
 15     UIImageView *_imageView;
 16 }
 17 @end
 18 
 19 @implementation ViewController
 20 
 21 - (void)viewDidLoad {
 22     [super viewDidLoad];
 23     // Do any additional setup after loading the view, typically from a nib.
 24     
 25     // 1、添加 scrollView，并设置可视范围
 26     UIScrollView *scrollView = [[UIScrollView alloc] init];
 27     //scrollView.frame = CGRectMake(0, 0, 250, 250); // 可视范围
 28     scrollView.frame = self.view.bounds;
 29     scrollView.backgroundColor = [UIColor grayColor];
 30     [self.view addSubview:scrollView];
 31     
 32     // 2、添加imageView
 33     UIImage *image = [UIImage imageNamed:@"1.jpg"];
 34     _imageView= [[UIImageView alloc] initWithImage:image];
 35 //    CGSize imageSize = imageView.image.size;
 36 //    imageView.frame = CGRectMake(0, 0, imageSize.width, imageSize.height);
 37 //    
 38     [scrollView addSubview:_imageView];
 39     
 40     
 41     // 3、设置滚动范围
 42     scrollView.contentSize = _imageView.image.size;
 43    
 44     // 其他属性
 45     // 是否显示滚动条
 46     //scrollView.showsHorizontalScrollIndicator = NO;
 47     // 弹簧效果
 48     //scrollView.bounces = NO;
 49     // 额外显示区域 top left bottom right
 50     //scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20);
 51     
 52     // 获得当前显示区域位于图片的位置，左上角坐标
 53 //    scrollView.contentOffset = CGPointEqualToPoint(0, 0);
 54     _scrollView = scrollView;
 55     
 56     
 57     // 缩放图片,要遵守协议 UIScrollViewDelegate
 58     _scrollView.delegate = self;
 59     // 设置缩放比例
 60     scrollView.maximumZoomScale = 2.0;
 61     scrollView.minimumZoomScale = 0.2;
 62 }
 63 
 64 // 上下左右移动
 65 - (IBAction)allBtn:(UIButton *)sender
 66 {
 67     [UIView animateWithDuration:1.0 animations:^{
 68         NSInteger btnTag = sender.tag;
 69         CGPoint point = _scrollView.contentOffset;
 70 
 71         switch (btnTag) {
 72             case 1: // 上
 73                 point.y -= 50;
 74                 if (point.y < 0) {
 75                     point.y = 0;
 76                 }
 77                 break;
 78             case 2: // 下
 79                 point.y += 50;
 80                 if(point.y > 320)
 81                 {
 82                     point.y = 320;
 83                 }
 84                 break;
 85             case 3: // 左
 86                 point.x -= 50;
 87                 if(point.x < 0)
 88                 {
 89                     point.x = 0;
 90                 }
 91 
 92                 break;
 93             case 4: // 右
 94                 point.x += 50;
 95                 if(point.x > 480)
 96                 {
 97                     point.x = 480;
 98                 }
 99                 break;
100             default:
101                 break;
102         }
103         
104         _scrollView.contentOffset = point;
105 
106     }];
107 }
108 // 图片缩放,代理方法
109 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
110 {
111     return _imageView;
112 }
113 
114 @end

源代码： http://pan.baidu.com/s/1o6FXo4E

5、分页

　　5、1、少量图片展示

如图所示，少量图片的分页，可以使用以上方式，直接创建一个scrollView和多个imageView。按照顺序将iamgeView添加到scrollView，每次滚动时只需改变scrollView的contentOffset属性就可以显示不同的图片.

可再viewDidLoad中添加如下代码，有5张图片用来显示

 1     CGFloat w = _scrollView.frame.size.width;
 2     CGFloat h = _scrollView.frame.size.height;
 3     for (int i = 0; i < kCount; i ++)
 4     {
 5         UIImageView *imageView = [[UIImageView alloc] init];
 6         // 1、按照顺序添加图片，y值相同，x值递增
 7         imageView.frame = CGRectMake(i * w, 0, w, h);
 8         
 9         NSString *imageName = [NSString stringWithFormat:@"%d.jpg",i+1];
10         imageView.image = [UIImage imageNamed:imageName];
11         
12         [_scrollView addSubview:imageView];
13     
14     }
15     // 隐藏水平滚动条
16     _scrollView.showsHorizontalScrollIndicator = NO;
17     // 2、启用分页
18     _scrollView.pagingEnabled = YES;
19     // 3、设置滚动范围，宽高
20     _scrollView.contentSize = CGSizeMake(kCount * w, 0);

6、UIPageControl控件

左右滑动，会显示当前页的位置，使用方式如下：

 1     // page control控件
 2     // 1、初始化一个pageControl
 3     _pageControl = [[UIPageControl alloc] init];
 4     // 2、设置frame
 5     _pageControl.center = CGPointMake(w * 0.5, h - 20);
 6     _pageControl.bounds = CGRectMake(0, 0, 150, 50);
 7     // 3、设置页数
 8     _pageControl.numberOfPages = kCount;
 9     // 4、设置选中页的颜色
10     _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
11     // 5、关闭点击小按钮附近的翻页功能
12     _pageControl.enabled = NO;
13     // 6、代理方法中实现滚动页码的改变
14 
15     // 7、添加到view
16     [self.view addSubview:_pageControl];

代理方法中实现定位到当前页

1 // 正在滚动时调用
2 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
3 {
4   
5     int page  = scrollView.contentOffset.x / scrollView.frame.size.width;
6     //NSLog(@"scrolling:%d",page);
7     // 6、设置当前页码
8     _pageControl.currentPage = page;
9 }

7、键盘处理

新建几个text field 控件，可以设置控件的属性keyboard type 为所需类型

 1 - (IBAction)exitKeyboard
 2 {
 3     // 方法1：谁调出键盘，谁负责退出键盘，比较麻烦，需要各自退出
 4     //[_nameText resignFirstResponder];
 5     
 6     
 7     // 方法2：退出所有view的子控件的键盘
 8     [self.view endEditing:YES];
 9     
10 }

推荐使用方法2

给键盘添加一个ToolBar，其中toolBar通过xib文件创建

 1 - (void)viewDidLoad
 2 {
 3     [super viewDidLoad];
 4     // Do any additional setup after loading the view, typically from a nib.
 5     
 6     UIToolbar *toolbar = [[NSBundle mainBundle] loadNibNamed:@"keyboard" owner:nil options:nil][0];
 7     // 将toolbar显示到键盘顶部
 8     _nameText.inputAccessoryView = toolbar;
 9     _phoneText.inputAccessoryView = toolbar;
10     _birthdayText.inputAccessoryView = toolbar;
11     _addressText.inputAccessoryView = toolbar;
12 }

8、MVC模式

主要三者之间的关系：控制器负责通信，控制器可以访问模型，模型不可访问控制器。视图可以访问控制器，控制器也可以访问视图。视图和模型之间不存在访问关系。