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。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFtaW5nd3U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

選中這個segue。設定其identifier為ShowFlickrPhoto

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFtaW5nd3U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

加入一個toolbar和一個imageview到view中，改動toolbarbutton標題為Done，ctrl+drag串連button和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方法。通過點擊Donebutton返回到主view：

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

程式運行效果例如以下：

iOS UICollectionView 入門 07 點擊cell放大圖片