ios实战开发之UIScrollView图片浏览器

Sian

1、效果演示



2、基本说明

2.1 创建一个UIImageView显示背影图片(可选)；2.2 创建一个UIScrollView，大小与self.view相等，可以使用storyboard画，设置为当前控制器属性(连线IBOuylet)；
2.3 给scrollView添加多张图片，并将这些图片从左到右一字排开(按规律设置x值)；
2.4 设置scrollView的展示区域(contentSize)及相关配置，如滑动条是否显示等；
2.5 开启scrollView的pagingEnable功能，使得滑动图片时能自动分页展示；
2.6 添加UIPageControl控件，并设置基本属性(大小、位置、颜色等)；
2.7 设置scrollView的代理为当前控制器--让当前控制器遵守相关协议--在当前控制器中实现协议中的相关方法；
2.8 通过监听scrollView滑动，动态修改pageControl中当前页码，使得pageControl与当前图片一一对应；

3、关键代码

SAViewControl.h

1. //
2. //  SAViewController.h
3. //  UIScrollView
4. //
5. //  Created by yusian on 14-3-30.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <UIKit/UIKit.h>
11. @interface SAViewController : UIViewController
13. @property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
15. @end

复制代码

SAViewControl.m

1. //
2. //  SAViewController.m
3. //  UIScrollView
4. //
5. //  Created by yusian on 14-3-30.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SAViewController.h"
10. #define kCount 9
12. @interface SAViewController () <UIScrollViewDelegate>
13. {
14.     UIPageControl *_pageControl;
15. }
17. @end
19. @implementation SAViewController
21. - (void)viewDidLoad
22. {
23.     [super viewDidLoad];
24.    
25.     // 创建几个临时变量，尽量避免直接赋值写数字，考虑ios6、7的兼容性
26.     CGFloat height = self.view.frame.size.height;   // view的高度
27.     CGFloat width = self.view.frame.size.width;     // view的宽度
28.     CGRect tempF = CGRectMake(0, 0, width, height);
29.     self.scrollView.frame = tempF;  // scrollView的宽高与view保持一致
30.     CGFloat y = self.scrollView.frame.origin.y;     // scrollView的y值
31.    
32.     // 通过一个for循环创建多张图片并加入到scrollView，并将图片从左到右一字排开
33.     for (int i = 0; i < kCount; i++ ) {
34.    
35.         UIImageView *imageView = [[UIImageView alloc] init];    // 创建UIImageView
36.         [self.scrollView addSubview:imageView];     // 添加到scrollView
37.         
38.         // 图片文件名分别为001~009.jpg，图片位置一字排开，所以宽/高/y值都相等，x值从左到右分别相差一个图片宽度
39.         NSString *imgName = [NSString stringWithFormat:@"%03d.jpg", i + 1];
40.         imageView.image = [UIImage  imageNamed:imgName];
41.         imageView.frame = CGRectMake(width * i, y, width, height);
42.     }
43.    
44.     // 设置scrollView的属性
45.     self.scrollView.contentSize = CGSizeMake(width * kCount, 0);    //内容总宽度为9张图片宽度和，高度不变
46.     self.scrollView.showsHorizontalScrollIndicator = NO;    // 不显示横向滑动条
47.     self.scrollView.pagingEnabled = YES;    // 以一个scrollView展示区域大小自动分块显示，实现翻页效果
48.     [self.view addSubview:_scrollView];     // 将scrollView添加到view
49.    
50.     // 页码控件器相关属性(在这里主要展示为页码显示功能)
51.     _pageControl = [[UIPageControl alloc] init];
52.     [self.view addSubview:_pageControl];
53.    
54.     _pageControl.center = CGPointMake(width *0.5, height - 20);     // 位置
55.     _pageControl.bounds = CGRectMake(0, 0, width, 20);      // 大小
56.     _pageControl.numberOfPages = kCount;    // 页数
57.     _pageControl.currentPageIndicatorTintColor = [UIColor redColor];    // 当前页高亮颜色
58.     _pageControl.enabled = NO;  // 关掉相关控制功能，只显示效果
59.    
60.     self.scrollView.delegate = self;
61.     // 设置scrollView的代理为当前控制器(SAViewController)，当前控制器需要满足以下条件
62.     //  1、遵守UIScrollViewDelegate协议
63.     //  2、实现监听scrollView的某些方法，比如缩放、滚动等动作
64. }
66. // 监听滚动时的事件
67. - (void)scrollViewDidScroll:(UIScrollView *)scrollView
68. {
69.     // 滚动scrollView时取contentOffset属性，通过计算可以得到当处于第几张图片
70.     int currentPage = self.scrollView.contentOffset.x / self.scrollView.frame.size.width;
71.     // 将该值赋值给pageControl的currentPage属性，可实现动态显示当前页码
72.     _pageControl.currentPage = currentPage;
73. }
75. @end

复制代码

4、源代码下载
下载链接：

游客，本帖隐藏的内容需要积分高于 1 才可浏览，您当前积分为 0

5、参考链接
ios实战开发之xib基本介绍

tomios

站长费心了，这么详细的教程，让新手很方便

lihaitao

这个源码的链接貌似有点儿问题啊。。。

Miul

这个功能非常实用

Sian

lihaitao 发表于 2015-1-9 16:19
这个源码的链接貌似有点儿问题啊。。。

有什么问题？