IOS开发学习笔记033-UIScrollView

1、滚动显示图片

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

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

 - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.

     // 1、添加 scrollView，并设置可视范围
     UIScrollView *scrollView = [[UIScrollView alloc] init];
     scrollView.frame = CGRectMake(, , , ); // 可视范围
     scrollView.backgroundColor = [UIColor grayColor];
     [self.view addSubview:scrollView];

     // 2、添加imageView
     UIImageView *imageView = [[UIImageView alloc] init];
     imageView.image = [UIImage imageNamed:@"1.jpg"];
     CGSize imageSize = imageView.image.size;
     imageView.frame = CGRectMake(, , imageSize.width, imageSize.height);

     [scrollView addSubview:imageView];

     // 3、设置滚动范围
     scrollView.contentSize = imageView.image.size;
 }

2、其他属性设置

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

3、移动图片

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

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

 // 上下左右移动
 - (IBAction)allBtn:(UIButton *)sender
 {
     [UIView animateWithDuration:1.0 animations:^{
         NSInteger btnTag = sender.tag;
         CGPoint point = _scrollView.contentOffset;

         switch (btnTag) {
             case : // 上
                 point.y -= ;
                 if (point.y < ) {
                     point.y = ;
                 }
                 break;
             case : // 下
                 point.y += ;
                 if(point.y > )
                 {
                     point.y = ;
                 }
                 break;
             case : // 左
                 point.x -= ;
                 if(point.x < )
                 {
                     point.x = ;
                 }

                 break;
             case : // 右
                 point.x += ;
                 if(point.x > )
                 {
                     point.x = ;
                 }
                 break;
             default:
                 break;
         }

         _scrollView.contentOffset = point;

     }];
 }

4、缩放图片

缩放图片简单流程：

1、设置代理 delegate

2、遵守协议 UIScrollViewDelegate

3、设置缩放比例 minimumZoomScale，maxmumZoomScale

4、实现缩放方法 viewForZoomingInScrollView

　　4、1、设置代理 delegate

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

　　4、2、遵守协议 UIScrollViewDelegate

 @interface ViewController () <UIScrollViewDelegate> // 遵守协议

 {
     UIScrollView *_scrollView;
     UIImageView *_imageView;
 }
 @end

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

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

　　4、4、实现缩放方法 viewForZoomingInScrollView

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

代码

 //
 //  ViewController.m
 //  UIScrolleView-大图片
 //
 //  Created by Christian on 15/5/26.
 //  Copyright (c) 2015年 slq. All rights reserved.
 //

 #import "ViewController.h"

 @interface ViewController () <UIScrollViewDelegate>

 {
     UIScrollView *_scrollView;
     UIImageView *_imageView;
 }
 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.

     // 1、添加 scrollView，并设置可视范围
     UIScrollView *scrollView = [[UIScrollView alloc] init];
     //scrollView.frame = CGRectMake(0, 0, 250, 250); // 可视范围
     scrollView.frame = self.view.bounds;
     scrollView.backgroundColor = [UIColor grayColor];
     [self.view addSubview:scrollView];

     // 2、添加imageView
     UIImage *image = [UIImage imageNamed:@"1.jpg"];
     _imageView= [[UIImageView alloc] initWithImage:image];
 //    CGSize imageSize = imageView.image.size;
 //    imageView.frame = CGRectMake(0, 0, imageSize.width, imageSize.height);
 //
     [scrollView addSubview:_imageView];

     // 3、设置滚动范围
     scrollView.contentSize = _imageView.image.size;

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

     // 获得当前显示区域位于图片的位置，左上角坐标
 //    scrollView.contentOffset = CGPointEqualToPoint(0, 0);
     _scrollView = scrollView;

     // 缩放图片,要遵守协议 UIScrollViewDelegate
     _scrollView.delegate = self;
     // 设置缩放比例
     scrollView.maximumZoomScale = 2.0;
     scrollView.minimumZoomScale = 0.2;
 }

 // 上下左右移动
 - (IBAction)allBtn:(UIButton *)sender
 {
     [UIView animateWithDuration:1.0 animations:^{
         NSInteger btnTag = sender.tag;
         CGPoint point = _scrollView.contentOffset;

         switch (btnTag) {
             case : // 上
                 point.y -= ;
                 if (point.y < ) {
                     point.y = ;
                 }
                 break;
             case : // 下
                 point.y += ;
                 if(point.y > )
                 {
                     point.y = ;
                 }
                 break;
             case : // 左
                 point.x -= ;
                 if(point.x < )
                 {
                     point.x = ;
                 }

                 break;
             case : // 右
                 point.x += ;
                 if(point.x > )
                 {
                     point.x = ;
                 }
                 break;
             default:
                 break;
         }

         _scrollView.contentOffset = point;

     }];
 }
 // 图片缩放,代理方法
 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
 {
     return _imageView;
 }

 @end

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

5、分页

　　5、1、少量图片展示

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

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

     CGFloat w = _scrollView.frame.size.width;
     CGFloat h = _scrollView.frame.size.height;
     for (int i = ; i < kCount; i ++)
     {
         UIImageView *imageView = [[UIImageView alloc] init];
         // 1、按照顺序添加图片，y值相同，x值递增
         imageView.frame = CGRectMake(i * w, , w, h);

         NSString *imageName = [NSString stringWithFormat:@"%d.jpg",i+];
         imageView.image = [UIImage imageNamed:imageName];

         [_scrollView addSubview:imageView];

     }
     // 隐藏水平滚动条
     _scrollView.showsHorizontalScrollIndicator = NO;
     // 2、启用分页
     _scrollView.pagingEnabled = YES;
     // 3、设置滚动范围，宽高
     _scrollView.contentSize = CGSizeMake(kCount * w, );

6、UIPageControl控件

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

     // page control控件
     // 1、初始化一个pageControl
     _pageControl = [[UIPageControl alloc] init];
     // 2、设置frame
     _pageControl.center = CGPointMake(w * 0.5, h - );
     _pageControl.bounds = CGRectMake(, , , );
     // 3、设置页数
     _pageControl.numberOfPages = kCount;
     // 4、设置选中页的颜色
     _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
     // 5、关闭点击小按钮附近的翻页功能
     _pageControl.enabled = NO;
     // 6、代理方法中实现滚动页码的改变

     // 7、添加到view
     [self.view addSubview:_pageControl];

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

 // 正在滚动时调用
 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
 {

     int page  = scrollView.contentOffset.x / scrollView.frame.size.width;
     //NSLog(@"scrolling:%d",page);
     // 6、设置当前页码
     _pageControl.currentPage = page;
 }

7、键盘处理

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

 - (IBAction)exitKeyboard
 {
     // 方法1：谁调出键盘，谁负责退出键盘，比较麻烦，需要各自退出
     //[_nameText resignFirstResponder];

     // 方法2：退出所有view的子控件的键盘
     [self.view endEditing:YES];

 }

推荐使用方法2

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

 - (void)viewDidLoad
 {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.

     UIToolbar *toolbar = [[NSBundle mainBundle] loadNibNamed:@"keyboard" owner:nil options:nil][];
     // 将toolbar显示到键盘顶部
     _nameText.inputAccessoryView = toolbar;
     _phoneText.inputAccessoryView = toolbar;
     _birthdayText.inputAccessoryView = toolbar;
     _addressText.inputAccessoryView = toolbar;
 }

8、MVC模式

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