iOS UICollectionView 入门 07 点击cell放大图片

这一节,我们实现通过点击图片将图片放大显示的功能。

首先我们创建一个名为FlickrPhotoViewConroller的类,这个类继承于UIViewController。修改头文件内容如下:

#import <UIKit/UIKit.h>
@class FlickrPhoto;

@interface FlickrPhotoViewConroller : UIViewController
@property (nonatomic, strong) FlickrPhoto *flickrPhoto;
@end

声明outlet和action:

#import "FlickrPhotoViewConroller.h"
#import "Flickr.h"
#import "FlickrPhoto.h"

@interface FlickrPhotoViewConroller ()

@property (weak) IBOutlet UIImageView *imageView;
- (IBAction)done:(id)sender;

@end

打开storyboard,添加一个UIViewController到storyboard中,设置这个view的class为FlickrPhotoViewConroller。

从主view使用ctrl+drag创建一个到Flickr Photo view controller的modal segue。

选中这个segue,设置其identifier为ShowFlickrPhoto

添加一个toolbar和一个imageview到view中,修改toolbar按钮标题为Done,ctrl+drag连接按钮和FlickrPhotoViewController的done:方法。

再将imageView的outlet也连接上:

打开ViewController.m,添加以下代码到@interface区域中:

@property (nonatomic) BOOL sharing;

修改didSelectItemAtIndexPath方法:

    if (!self.sharing)
    {
        NSString *searchTerm = self.searchs[indexPath.section];
        FlickrPhoto *photo = self.searchResults[searchTerm][indexPath.row];
        [self performSegueWithIdentifier:@"ShowFlickrPhoto" sender:photo];
        [self.collectionView deselectItemAtIndexPath:indexPath animated:YES];
    }
    else
    {

    }

当用户点击某幅缩略图时,执行ShowFlickrPhoto segue。

#import "FlickrPhotoViewConroller.h"
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"ShowFlickrPhoto"])
    {
        FlickrPhotoViewConroller *flickrPhotoViewController = segue.destinationViewController;
        flickrPhotoViewController.flickrPhoto = sender;
    }
}

实现viewWillAppear方法,显示大图片到view中:

-(void)viewDidAppear:(BOOL)animated { // 1
    if(self.flickrPhoto.largeImage)
    {
        self.imageView.image = self.flickrPhoto.largeImage;
    }
    else
    { // 2
        self.imageView.image = self.flickrPhoto.thumbnail;
        // 3
        [Flickr loadImageForPhoto:self.flickrPhoto thumbnail:NO completionBlock:^(UIImage *photoImage, NSError *error) {
            if(!error) { // 4
                dispatch_async(dispatch_get_main_queue(), ^{ self.imageView.image =
                    self.flickrPhoto.largeImage;
                });
            }
        }];
    }
}

实现done方法,通过点击Done按钮返回到主view:

- (void)done:(id)sender
{
    [self.presentingViewController dismissViewControllerAnimated:YES completion:^{}];
}

程序执行效果如下:

时间: 2024-11-09 08:16:50

iOS UICollectionView 入门 07 点击cell放大图片的相关文章

iOS UICollectionView 入门 01 简介

当第一代ipad发布时,相册程序相当吸引眼球,它以独特的方式以多样的布局来显示照片,可以使扁平的表格view: 也可以是有层次的按分类进行查看: 还可以使用手势,以很炫的方式在不同的布局之间进行切换.我们可以使用gridview和一些其它的布局来实现这些,但是太麻烦了,从iOS6开始,我们可以使用UICollectionView来实现它,我们可以很容易的为程序添加自定义布局和自定义转换. UICollectionViewController解析 我们通过一个示例图,来看看UICollection

iOS UICollectionView 入门 03 从Flickr获取数据

Flickr是国外一个照片分享网站,它提供了供开发人员使用的API,通过这些API,我们可以搜索相片,添加相片也可以对相片做评论. 要使用Flickr API,需要通过以下网址进行注册: http://www.flickr.com/services/api/keys/apply/ 对于测试工程,Flickr有一个sample key,使用这个key无需注册. 将以下语句贴到浏览器地址栏,进行任意的搜索: http://www.flickr.com/services/api/explore/?me

iOS点击cell查看大图,点击大图还原小图-b

一.项目需求 用collectionView展示很多照片,点击某个照片,用全屏scrollView无限循环的方式查看图片.点击放大的图片,图片缩小到原先的尺寸. 如图gif1.gif所示,点击中间的图片,放大图片,滑动图片.再点击大图,图片回到相应的位置. gif1.gif 如图gif2.gif所示.当前显示的图片不在屏幕中,点击大图后,若图片在屏幕顶部,则回到顶部:若在底部,则回到底部. gif2.gif 二.常见场景 微博.微信的相册:九宫格展示照片,点击某个图片,图片添加到scrollVi

iOS点击cell查看大图,点击大图还原小图

一.项目需求 用collectionView展示很多照片,点击某个照片,用全屏scrollView无限循环的方式查看图片.点击放大的图片,图片缩小到原先的尺寸. 如图gif1.gif所示,点击中间的图片,放大图片,滑动图片.再点击大图,图片回到相应的位置. gif1.gif 如图gif2.gif所示.当前显示的图片不在屏幕中,点击大图后,若图片在屏幕顶部,则回到顶部:若在底部,则回到底部. gif2.gif 二.常见场景 微博.微信的相册:九宫格展示照片,点击某个图片,图片添加到scrollVi

ios点击头像放大并能伸缩拖动

点击头像放大,其实原理就是在头像处创建一个和头像一样大小的scrollview,然后让其放大至屏幕大小,点击屏幕取消时将其frame恢复之前大小,然后让其消失. 1.首先创建头像和用来创建点击手势的视图 AsyncImageView *touxiang=[[AsyncImageView alloc]init];            touxiang.isAcceptTouch=YES;            touxiang.tag=7758521;            touxiang.f

ios UITableView 获取点击cell对象

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell= [tableView cellForRowAtIndexPath:indexPath]; // 获取cell 对象 UILabel *name = (UILabel *)[cell.contentView viewWithTag:111]; // 获取昵称 _inp

李洪强iOS开发之-实现点击单行View显示和隐藏Cell

李洪强iOS开发之-实现点击单行View显示和隐藏Cell 实现的效果:  ....

IOS 取消表格单元格 TableViewCell 去掉高亮状态 点击Cell取消选择状态

以下是两种实现效果 1. 自定义cell 继承UITableViewCell 重写 -(void)setSelected:(BOOL)selected animated:(BOOL)animated { } -(void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated { } 里面不写任何东西 注意重写的时候一定要有带animated 方法,不然还是无效 2.点击单元格 取消选中单元格 //  点击单元格的时候取消选中单元格 -(

iOS UICollectionView 使用详解

// 代码创建 所属controller要遵循三个协议:UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init]; [flowLayout setItemSize:CGSizeMake(70, 100)];//设置cel