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模式
主要三者之间的关系:控制器负责通信,控制器可以访问模型,模型不可访问控制器。视图可以访问控制器,控制器也可以访问视图。视图和模型之间不存在访问关系。