现如今的生活中手机相册,微信朋友圈等滚动视图无处不在,
此外还有很多关于滚动视图的APP也天天出现在我们的生活中,今天就来简单介绍一下滚动视图的方法和实现,即相册的功能实现.
首先创建相册工程:
C1E10722-0302-4AEC-98DD-F4FA963B69E2.png
在AppDelegate.m中初始化Window并设置视图控制器:
初始化Window:
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
设置根视图控制器:
ViewController *vc = [[ViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:vc];
self.window.rootViewController = nav;
设置透明度:
nav.navigationBar.translucent = NO;
释放:
[vc release];
[nav release];
[_window release];
创建滚动视图的详情界面:
5E3996B4-5E71-4AAD-9CCD-5227E951EA15.png
基础工作做完在ViewController.m中添加图片信息:
因为图片的宽和高用到很多,所以在文件中宏定义图片的宽和高,以简化我们的代码量:
#define ScreenWidte [UIScreen mainScreen].bounds.size.width
#define ScreenHeight [UIScreen mainScreen].bounds.size.height
引入滚动视图详情界面头文件并定义滚动视图的属性:
9FE4047C-0D28-449F-A934-38E788E9BBC0.png
释放:
@implementation ViewController
- (void)dealloc
{
[_scrollView release];
[super dealloc];
}
定义相册的一些基本属性(颜色,titie等)
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationItem.title = @"相册";
self.navigationController.navigationBar.barTintColor = [UIColor blackColor];
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
}
将已有的图片素材拖入工程中,在loadview中定义图片的大小并循环加入图片:
A1555ABE-1DB9-4C93-8BF0-1B26C02663CC.png
在loadview中初始化图片:
- (void)loadView
{
[super loadView];
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidte, ScreenHeight - 64)];
self.scrollView.contentSize = CGSizeMake(ScreenWidte, 330 * 3);
[self.view addSubview:_scrollView];
[_scrollView release];
紧接着在loadview中循环添加图片:
//设置图片:(以下为竖屏模式下的滚动相册)
for (NSInteger i = 1; i <= 6; i++) {
UIImageView *imageView = [[UIImageView alloc] init];
if (i % 2 != 0) {
imageView.frame = CGRectMake(0,330 * (i / 2) , ScreenWidte / 2.0, 330);
#以6张图片为例,竖屏滚动
}
else
{
imageView.frame = CGRectMake(ScreenWidte / 2.0, 330 * ((i - 1) / 2), ScreenWidte / 2.0, 330);
}
imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.JPG", i]];
//添加tag值(以便后面找到点击的图片):
imageView.tag = 1000 + i;
//打开用户交互:
imageView.userInteractionEnabled = YES;
//添加轻拍手势:
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didTapImageView:)];
//添加视图并释放:
[imageView addGestureRecognizer:tapGesture];
[tapGesture release];
[self.scrollView addSubview:imageView];
[imageView release];
}
} #与上一步的load view的{对应
利用滚动视图的方法获取到轻拍图片并利用协议传值完成界面之间的跳转:
- (void)didTapImageView:(UITapGestureRecognizer *)tap
{
//获取到轻拍的图片:
NSInteger number = tap.view.tag - 1000;
NSLog(@"%ld", number);
//跳转界面:
DetailViewController *dVC = [[DetailViewController alloc] init];
dVC.num = number;
[self.navigationController pushViewController:dVC animated:YES];
//[dVC release];
}
以上都是一些界面实现的基本步骤,最重要的就是在详情界面中添加滚动视图的一些方法(利用偏移量来进行判断滚到第几张)
同样宏定义图片的宽和高,并签订滚动视图协议
B2A33805-6D70-4DC6-9AC8-252EA66C887B.png
自动释放:
-(void)dealloc
{
[_scrollView release];
[super dealloc];
}
在DetailViewController.h中设置滚动视图偏移量的属性(即现在是第几张图片):
#import <UIKit/UIKit.h>
@interface DetailViewController : UIViewController
@property(nonatomic, assign)NSInteger num;
@end
在viewDidLoad中利用偏移量的改变完成滚动视图的实现:
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
设置滚动视图偏移量:
self.scrollView.contentOffset = CGPointMake(ScreenWidte * (self.num - 1), 0);
显示当前第几张:
NSString *title = [NSString stringWithFormat:@"第%ld张",self.num];
[self.navigationItem setTitle:title]; (显示title便于观察变化)
为了双击图片放大返回时卡顿在第二界面设置一个按钮用来返回原界面:
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"add_icon@2x"] style:UIBarButtonItemStylePlain target:self action:@selector(didClickGoBackButton:)];
} #对应上面DidLoad的{
按钮的点击方法:
- (void)didClickGoBackButton:(UIBarButtonItem *)button
{
[self.navigationController popViewControllerAnimated:YES];
}
在load view中初始化视图坐标,并利用循环创建每一个视图的坐标(这一步比较麻烦,要仔细理解)
-(void)loadView
{
[super loadView];
//初始化坐标
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidte, ScreenHeight - 64)];
self.scrollView.contentSize = CGSizeMake(ScreenWidte * 6, ScreenHeight - 64);
//设置代理人(用于协议传值):
self.scrollView.delegate = self;
// 设置整页翻动
self.scrollView.pagingEnabled = YES;
//添加滚动视图
[self.view addSubview:_scrollView];
[_scrollView release];
//循环创建坐标:
for (NSInteger i = 1; i <=6; i++) {
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(ScreenWidte * (i - 1), 0, ScreenWidte, ScreenHeight - 64)];
imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.JPG", i]];
[self.scrollView addSubview:imageView];
[imageView release];
}
}
滚动视图实现方法:
-(void)scrollViewDidEndDecelerating:(UIScrollView
*)scrollView
{
//取偏移量:
NSInteger pageNumber = (long)(scrollView.contentOffset.x / ScreenWidte);
self.navigationItem.title = [NSString stringWithFormat:@"第%ld张", pageNumber + 1];
}
运行就能得到相册的效果:
84AC391F-AB38-47DA-8A6C-AA75E4276C00.png
滑动图片:
双击放大其中一个图片:
13ABB910-AC7B-402B-9FAF-DD81CFCB11A1.png
点击左侧加号按钮返回到相册界面:
CAEC51DF-BE8A-4A90-93D4-7BD07EA97929.png
BAD67B03-A2E4-43F2-BFC4-2559D323D479.png
