iOS 6编程UIScrollView滚动视图和UIPageControl分页控件实现图像分页显示

UIScrollView 滚动视图-相关文章:

iOS 6编程(18)-UIScrollView滚动视图和UIPageControl分页控件的简单应用

iOS 6编程(22)-UIScrollView滚动视图结合UIImageView图像视图实现图像缩放效果

这一部分,我们将实现滚动视图的分页功能,也就是说在停止拖曳滚动视图时,滚动视图将停留在一个页面。就像在Apple的App Store浏览App介绍页面的屏幕截图时的效果一样。

在开始之前,我们先看看最终项目的运行效果–图像分页显示:

在项目中添加第二个场景,从对象库中拖放一个视图控制器到Storyboard中。然后,再拖放一个UIScrollView和一个UIPageControl 元素到视图中,如下所示:

滚动视图在上面,分页控件UIPageControl在UIScrollView对象的下面。需要注意的是,UIPageControl和UIScrollView是平行的,不要把UIPageControl作为UIScrollView的子视图。

最后,还需要设置一下主视图的背景色,这样UIPageControl才可以正常显示(UIPageControl默认是白色)。

下一步,我们在项目中添加PagedScrollViewController 视图控制器类,继承UIViewController类。

我们将使用这个类来负责实现分页滚动视图。打开Storyboard,选择刚刚添加的场景,在Identity inspector面板窗口,设置视图控制器的Class属性为PagedScrollViewController。

建立场景中滚动视图和分页控件连接到视图控制器中的输出口连接,如下是PagedScrollViewController.h头文件。另外,设置PagedScrollViewController类遵守UIScrollViewDelegate协议。

#import <UIKit/UIKit.h>
@interface PagedScrollViewController : UIViewController<UIScrollViewDelegate>
@property (strong, nonatomic) IBOutlet UIScrollView *scrollView;
@property (strong, nonatomic) IBOutlet UIPageControl *pageControl;
@end

和前面一个场景一样,设置视图控制器为滚动视图的委托。另外,在Attributes inspector面板窗口,启用滚动视图的Paging Enabled属性。

现在,我们打开PagedScrollViewController.m文件,在附加目录(Continuation Category)添加一些私有属性和方法,在@interface和@implementation指令之间。
#import "PagedScrollViewController.h"
@interface PagedScrollViewController ()
@property (nonatomic, strong) NSArray *photoList;
- (void)loadVisiblePage;
@end

其中,photoList 数组存放所有要显示的图像,一页显示一张图像。loadVisiblePage方法则负责在屏幕上加载特定页面或图像。
下面,我们首先实现viewDidLoad和viewWillAppear方法。
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
self.photoList = [NSArray arrayWithObjects:
[UIImage imageNamed:@"90s-girl.jpg"],
[UIImage imageNamed:@"90s-girl-1.jpg"],
[UIImage imageNamed:@"90s-girl-2.jpg"],
[UIImage imageNamed:@"90s-girl-3.jpg"],
nil];

NSInteger pageCount = self.photoList.count;

self.pageControl.currentPage = 0;
self.pageControl.numberOfPages = pageCount;

self.scrollView.frame = CGRectMake(0, 0, 320,420);
//self.scrollView.backgroundColor =   [UIColor whiteColor];

for (NSInteger i=0; i         CGRect frame;
frame.origin.x = self.scrollView.frame.size.width *i ;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
frame = CGRectInset(frame, 10.0f, 10.0f);

UIImageView *newPageView = [[UIImageView alloc] initWithImage:[self.photoList objectAtIndex:i]];
newPageView.contentMode = UIViewContentModeScaleAspectFill;
newPageView.frame = frame;

[self.scrollView addSubview:newPageView];
}
}

上述代码首先将项目中的图像添加到photoList 数组中,设置分页控件pageControl当前页和总共页数。接着,向滚动视图中一个一个添加图像视图。
下面是viewWillAppear方法的代码:
- (void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];

CGSize PagedScrollViewSize = self.scrollView.frame.size;
// 设置scroll view的contentSize属性,这个是包含所有页面的scroll view的尺寸
self.scrollView.contentSize = CGSizeMake(PagedScrollViewSize.width * self.photoList.count, PagedScrollViewSize.height);
}

在上面代码中,设置滚动视图的contentSize属性,需要包含所有子视图页面。

未完待续!!!请看第二部分的内容!

在《一步一步学习iOS 6 编程》PDF 电子书中有更详细的截图和细节说明。

一起学习GIS及其二次开发,一起进步!
原文地址:https://www.cnblogs.com/tuncaysanli/p/2728981.html