实例1-照片墙

1. 需要实现的功能

照片小图排列显示，点击任意一张图片可以切换成大图。
实现思路：根视图中显示小图，用滚动视图控制器来显示全部图片；另一个视图控制器来显示大图，用一个导航控制器来管理这两个视图的前进后退关系。

2. 实现小图排列显示

首先还是删除ViewController文件，在AppDelegate.m中添加代码，创建window和导航控制器：

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.
    
    //导航控制器框架结构
    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>
之后创建一个新文件VCRoot，在VCRoot.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; 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);
    //隐藏右侧滚动条
    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];
    
}

其中创建每个图片视图并设置他们的的位置用到了for循环，这里比较巧妙用取余和除法两个运算得到图片的行列数，然后错位以显示图片。

得到的效果如下：

屏幕快照 2016-12-02 下午8.42.31.png

3. 实现视图切换

为了创建一个用于显示大图片的视图，我们再新建一个视图控制器类型的文件VCImageShow。
我们用三种方法来实现这个功能，分别是传递图像标签，传递图片和传递图像视图。
首先在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中实现触发函数：

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;
    //创建显示视图控制器
    VCImageShow* imageShow=[[VCImageShow alloc]init];
    //将点击的图像赋值
    imageShow.imgView=imageView;
    //将显示视图控制器推出
    [self.navigationController pushViewController:imageShow animated:YES];
}

特点：代码最简单，但是有bug，就是点过的图片退回来之后就不能在小图中显示了，如图：

屏幕快照 2016-12-02 下午8.51.56.png

原因：一个视图对象只能有一个根视图，当我们把视图添加到新的父亲视图上时，就会从原来的父亲视图中删除。所以当我们赋给ImageShow视图了，这个图片视图就不在滚动视图上了。
所以传递视图的方法是不可行的。

  • 第二种方法：传递图片
    在VCRoot.m中实现触发函数，传递图片：
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;
    //创建显示视图控制器
    VCImageShow* imageShow=[[VCImageShow alloc]init];
    //将点击的图像赋值
    imageShow.image=imageView.image;
    //将显示视图控制器推出
    [self.navigationController pushViewController:imageShow animated:YES];
}

之后要去VCImageShow.m中创建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];
}

即可实现效果：

屏幕快照 2016-12-02 下午9.03.50.png
  • 第三种方法：传递图片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;

然后实现触发函数：

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;
    //创建显示视图控制器
    VCImageShow* imageShow=[[VCImageShow alloc]init];
    imageShow.imgTag=imageView.tag;
    [self.navigationController pushViewController:imageShow animated:YES];
}

在VCImageShow中利用传进来的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];
}

即可。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,509评论 6赞 504
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,806评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,875评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,441评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,488评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,365评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,190评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,062评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,500评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3赞 335
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1赞 347
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,559评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,167评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2赞 354

推荐阅读更多精彩内容