1. 需要實現(xiàn)的功能
照片小圖排列顯示,點擊任意一張圖片可以切換成大圖。
實現(xiàn)思路:根視圖中顯示小圖,用滾動視圖控制器來顯示全部圖片;另一個視圖控制器來顯示大圖,用一個導(dǎo)航控制器來管理這兩個視圖的前進(jìn)后退關(guān)系。
2. 實現(xiàn)小圖排列顯示
首先還是刪除ViewController文件,在AppDelegate.m中添加代碼,創(chuàng)建window和導(dǎo)航控制器:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s4 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s6 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s7 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s8 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
//導(dǎo)航控制器框架結(jié)構(gòu)
self.window=[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
UINavigationController* nav=[[UINavigationController alloc]initWithRootViewController:[[VCRoot alloc]init]];
self.window.rootViewController=nav;
[self.window makeKeyAndVisible];
return YES;
}
</br>
之后創(chuàng)建一個新文件VCRoot,在VCRoot.m中設(shè)置導(dǎo)航控制器屬性,創(chuàng)建滾動視圖,打開并設(shè)置點擊手勢交互事件:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s5 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s6 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s7 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s8 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s9 {font-variant-ligatures: no-common-ligatures; color: #272ad8}span.s10 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s11 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s12 {font-variant-ligatures: no-common-ligatures; color: #008400}span.s13 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #008400}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.title=@"照片墻";
self.navigationController.navigationBar.translucent=NO;
self.navigationController.navigationBar.barTintColor=[UIColor yellowColor];
//滾動視圖
UIScrollView* sv=[[UIScrollView alloc]init];
sv.frame=CGRectMake(5, 10, 300, 400);
//畫布大小
sv.contentSize=CGSizeMake(300, 480*1.5);
//隱藏右側(cè)滾動條
sv.showsVerticalScrollIndicator=NO;
//打開交互事件
sv.userInteractionEnabled=YES;
self.view.backgroundColor=[UIColor whiteColor];
for (int i=0; i<15; i++) {
NSString* strName=[NSString stringWithFormat:@"%d.jpg",i+1];
UIImage* image=[UIImage imageNamed:strName];
UIImageView* iView=[[UIImageView alloc]initWithImage:image];
iView.frame=CGRectMake(3+(i%3)*100, 10+(i/3)*150, 90, 130);
[sv addSubview:iView];
//加手勢
iView.userInteractionEnabled=YES;
UITapGestureRecognizer* tap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(pressTap:)];
//單次單擊
tap.numberOfTapsRequired=1;
//單個手指
tap.numberOfTouchesRequired=1;
[iView addGestureRecognizer:tap];
}
[self.view addSubview:sv];
}
其中創(chuàng)建每個圖片視圖并設(shè)置他們的的位置用到了for循環(huán),這里比較巧妙用取余和除法兩個運算得到圖片的行列數(shù),然后錯位以顯示圖片。
得到的效果如下:

3. 實現(xiàn)視圖切換
為了創(chuàng)建一個用于顯示大圖片的視圖,我們再新建一個視圖控制器類型的文件VCImageShow。
我們用三種方法來實現(xiàn)這個功能,分別是傳遞圖像標(biāo)簽,傳遞圖片和傳遞圖像視圖。
首先在VCImageShow.h中聲明這三種方法要用到的變量:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #d12f1b}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #bb2ca2}span.s1 {font-variant-ligatures: no-common-ligatures; color: #78492a}span.s2 {font-variant-ligatures: no-common-ligatures}span.s3 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s4 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s6 {font-variant-ligatures: no-common-ligatures; color: #703daa}
#import <UIKit/UIKit.h>
@interface VCImageShow : UIViewController
//分別用以下三種方法將點擊的視圖傳遞下去
@property(nonatomic,assign)NSUInteger imgTag;
@property(nonatomic,retain)UIImage* image;
@property(nonatomic,retain)UIImageView* imgView;
@end
-
第一種方法:傳遞圖像視圖
在VCImageShow.m中:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s5 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s6 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s7 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s8 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s9 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s10 {font-variant-ligatures: no-common-ligatures; color: #272ad8}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor=[UIColor yellowColor];
//傳imgView:
self.title=@"圖片展示";
_imgView.frame=CGRectMake(0, 0, 320, 480);
[self.view addSubview:_imgView];
}
在VCRoot.m中實現(xiàn)觸發(fā)函數(shù):
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}span.s1 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures}span.s4 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s6 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s7 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s8 {font-variant-ligatures: no-common-ligatures; color: #703daa}
-(void)pressTap:(UITapGestureRecognizer*) tap
{
UIImageView* imageView=(UIImageView*)tap.view;
//創(chuàng)建顯示視圖控制器
VCImageShow* imageShow=[[VCImageShow alloc]init];
//將點擊的圖像賦值
imageShow.imgView=imageView;
//將顯示視圖控制器推出
[self.navigationController pushViewController:imageShow animated:YES];
}
特點:代碼最簡單,但是有bug,就是點過的圖片退回來之后就不能在小圖中顯示了,如圖:

原因:一個視圖對象只能有一個根視圖,當(dāng)我們把視圖添加到新的父親視圖上時,就會從原來的父親視圖中刪除。所以當(dāng)我們賦給ImageShow視圖了,這個圖片視圖就不在滾動視圖上了。
所以傳遞視圖的方法是不可行的。
-
第二種方法:傳遞圖片
在VCRoot.m中實現(xiàn)觸發(fā)函數(shù),傳遞圖片:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}span.s1 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures}span.s4 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s6 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s7 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s8 {font-variant-ligatures: no-common-ligatures; color: #703daa}
-(void)pressTap:(UITapGestureRecognizer*) tap
{
UIImageView* imageView=(UIImageView*)tap.view;
//創(chuàng)建顯示視圖控制器
VCImageShow* imageShow=[[VCImageShow alloc]init];
//將點擊的圖像賦值
imageShow.image=imageView.image;
//將顯示視圖控制器推出
[self.navigationController pushViewController:imageShow animated:YES];
}
之后要去VCImageShow.m中創(chuàng)建image并賦值:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #4f8187}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s5 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s6 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s7 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s8 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s9 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s10 {font-variant-ligatures: no-common-ligatures; color: #272ad8}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor=[UIColor yellowColor];
//傳imgView:
self.title=@"圖片展示";
_imgView=[[UIImageView alloc]init];
_imgView.frame=CGRectMake(0, 0, 320, 480);
_imgView.image=_image;
[self.view addSubview:_imgView];
}
即可實現(xiàn)效果:

-
第三種方法:傳遞圖片tag
在VCRoot的viewDidLoad里加一句tag:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}span.s1 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures}span.s3 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s4 {font-variant-ligatures: no-common-ligatures; color: #272ad8}
//圖像對象的tag值
iView.tag=101+i;
然后實現(xiàn)觸發(fā)函數(shù):
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Heiti SC Light'; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}span.s1 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures}span.s4 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}span.s5 {font: 11.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s6 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s7 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s8 {font-variant-ligatures: no-common-ligatures; color: #703daa}
-(void)pressTap:(UITapGestureRecognizer*) tap
{
UIImageView* imageView=(UIImageView*)tap.view;
//創(chuàng)建顯示視圖控制器
VCImageShow* imageShow=[[VCImageShow alloc]init];
imageShow.imgTag=imageView.tag;
[self.navigationController pushViewController:imageShow animated:YES];
}
在VCImageShow中利用傳進(jìn)來的tag值選取照片賦給顯示視圖:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #4f8187}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s3 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s4 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s5 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s6 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s7 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s8 {font: 11.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s9 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s10 {font-variant-ligatures: no-common-ligatures; color: #272ad8}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor=[UIColor yellowColor];
//傳imgView:
self.title=@"圖片展示";
_imgView=[[UIImageView alloc]init];
_imgView.frame=CGRectMake(0, 0, 320, 480);
_imgView.image=_image;
_imgView.image=[UIImage imageNamed:[NSString stringWithFormat:@"%lu.jpg",_imgTag-100]];
[self.view addSubview:_imgView];
}
即可。