这一部分,我们将实现滚动视图的分页功能,也就是说在停止拖曳滚动视图时,滚动视图将停留在一个页面。就像在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
其中,ph
otoList 数组存放所有要显示的图像,一页显示一张图像。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方法的代码:
CGSize PagedScrollViewSize = self.scrollView.frame.size;
// 设置scroll view的contentSize属性,这个是包含所有页面的scroll view的尺寸
self.scrollView.contentSize = CGSizeMake(PagedScrollViewSize.width * self.photoList.count, PagedScrollViewSize.height);
- (void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
在上面代码中,设置滚动视图的contentSize属性,需要包含所有子视图页面。
}