iOS6에서 UICollectionView 시작하기 : Part 2 / 2

Brandon Trebitowski Brandon Trebitowski

이 포스트는 중국어 간체, 영어, 스페인어, 터어키어 언어로도 제공됩니다.

Learn how to use UICollectionView in iOS 6!

Ray로 부터 : 이 글은 iOS6 feast 중 iOS6 네번째 튜토리얼이다. 이 튜토리얼은 우리 책인 iOS6 By Tutorials의 한 챕터이다. 내 친구이자 튜토리얼 팀의 새로운 멤버, Brandon Trebitowski에 의해 쓰여졌다. 즐겨주길 바란다!

이 포스트는 iOS 튜토리얼 팀 멤버이자 소프트웨어 개발자, 그리고brandontreb.com의 운영자,  Brandon Trebitowski에 의해 쓰여졌다.

첫번째 튜토리얼에서, UICollectionView를 이용해 그리드형식으로 사진을 나타내는 방법을 보았다. 두번째이자 마지막 파트인 이 튜토리얼에서는 collectionView와 상호작용하고 또 커스텀할수 있는 방법에 대해 계속 배워나갈 것이다.

헤더 더하기

자 이제 앱을 더 멋지게 해보자! 유저에게 사진세트들에 대한 문구를 제공해줄 수 있는 헤더가 결과값 위 있다면 더 멋진 모습일 것이다.
헤더는 UICollectionReusableView 라는 새로운 클래스를 사용하여 만들 것이다.이 클래스를 그냥 헤더와 풋터를 위한  collectionViewCell의 한 종류라 생각하자.
이 뷰는 스토리보드 내에서 만들어 클래스와 연결 시킬 수 있다. 먼저 FileNewFile…로 들어가 새로운 파일을 삽입하자. iOSCocoa TouchObjective-C class template 선택하고 Next를 클릭. 클래스 이름은 FlickrPhotoHeaderView 그리고 서브클래스는 UICollectionReusableView로 지정한다. Next Create클릭하여 파일을 저장하자.

코딩을 시작하기전, 두 outlet을 설정해 주어야 한다. FlickrPhotoHeaderView.m를 열고 아래의 코딩을 #import 라인 아래에 더하자:

@interface FlickrPhotoHeaderView ()
@property(weak) IBOutlet UIImageView *backgroundImageView; 
@property(weak) IBOutlet UILabel *searchLabel;
@end

 

두 IBOutlet을 클래스 내에 정의하였다.   UILabel은 주어진 item들의 검색어들을 보여줄 것이고 imageView는 배경을 나타낼 것이다. imageView는 UILabel에 맞게 다이나믹하게 사이즈가 변경될 것 임으로 outlet과 연결되어야 한다.

다음으로, MainStoryboard.storyboard를 열고 왼쪽에 있는 Scene Inspector안에 있는 collection view를 클릭하자(아마 처음 메인뷰에서 조금 내려오면 보일 것이다). Attributes Inspector를 열고 Accessories 아래에 있는 Section Header box를 체크하자.

왼편 scene inspector를 보면 UICollectionReusableView가 자동으로 CollectionView아래로 더해져 있을 것이다. UICollectionReusableView를 클릭하면 이제 subview를 더할 수 있게 된다. 좀 더 작업공간을 늘리기 위해 뷰아래쪽에서 흰색 핸들을 클릭하여 아래로 늘려주어 90pixel 높이로 맞춰준다(혹은, Size Inspector를 이용하여 정확하게 사이즈를 입력할 수도 있다).

 

UICollectionReusableView 위로 Object Library내에 ImageView를 끌어 중간에 올린다. 여기서 imageView의 크기는 중요하지 않지만(하지만 적어도 400 point보다는 커야한다) 뷰의 중심에 정렬되어 있어야 한다. 메뉴에서 EditorAlign를 선택하여 horizontal과 vertical을 중간으로 해주어 객체를 중심에 위치하게 할 수잇다. 혹은 image의 mode를 center로 해 줄 수도 있다.
다음, imageView위로 label을 드래그, 가이드 라인에 맞춰 센터에 맞춰준다. 폰트 사이즈를 System 32.0로 바꿔주고 정렬은 center, 텍스트의 색깔은 오두운 파란색 계열로 지정해 준다. 이 과정을 끝내고 나면 아래와 같은 화면을 볼 수 있을 것이다:


마지막 스텝은 UICollectionReusableView가 FlickrPhotoHeaderView의 서브클래스라는 것을 선언하고 이 전에 만들어두었던 outlet들과 연결 시켜주는 것이다.
Scene inspector에서 Collection Reusable View를 클릭하고  Identity Inspector를 열어보자. class를 FlickrPhotoHeaderView로 지정하고 Attributes Inspector를 열고 Identifier를 FlickrPhotoHeaderView로 바꿔준다. 이 identifier는 이 뷰를 dequeue할때 쓰일 것이다.
또, Attributes inspector에서 Reuse Identifier를 FlickrPhotoHeaderView로 해준다.이것은 코드로 헤더를 정의 하는 것과 같다. 다음, Outlet Inspector를 열고 각각에 맞는 outlet과 인터페이스 요소들을 연결시켜준다(backgroundImageView와 searchLabel).

지금 앱을 실행시켜도 아마 헤더가 보이지 않을 것이다. 왜냐하면 우리가 이 전에 collectionView:viewForSupplementaryElementOfKind:atIndexPath: 를 주석처리해 놓았기 때문이다.
자 그럼 이제 고쳐보자. ViewController.m를 열고 아래와 같이 임포트하자:

#import "FlickrPhotoHeaderView.h"

 

다음, collectionView:viewForSupplementaryElementOfKind:atIndexPath: 주석을 없애고 다음과 같이 코드를 넣자.

- (UICollectionReusableView *)collectionView: (UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    FlickrPhotoHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:
UICollectionElementKindSectionHeader withReuseIdentifier:@"FlickrPhotoHeaderView" forIndexPath:indexPath];
    NSString *searchTerm = self.searches[indexPath.section]; [headerView setSearchText:searchTerm];
    return headerView;
}

 

위 코드에서는 각 섹션 헤더 뷰를 dequeue하였고 셀에 대한 검색어를 가져왔다.이 것을 통해 헤더가 각각의 섹션을 보여준다는것은 collectionView에게 알려준다. setSearchText라는 생소한 메소드가 에러를 만들고 있는 것을 볼 수 있을 것이다. 코드를 통해 고쳐보자!
FlickrPhotoHeaderView.h를 열고 아래 코드를 @end 위에 넣어보자:

-(void)setSearchText:(NSString *)text;

 

다음, FlickrPhotoHeaderView.m로 가서 다음 코드를 더해준다:

-(void)setSearchText:(NSString *)text { 
    self.searchLabel.text = text;
    UIImage *shareButtonImage = [[UIImage imageNamed:@"header_bg.png"] resizableImageWithCapInsets:
    UIEdgeInsetsMake(68, 68, 68, 68)];
    self.backgroundImageView.image = shareButtonImage;
    self.backgroundImageView.center = self.center; 
}

 

setSearchText메소드에서 배경이미지를 설정해줄 새 UIImage를 빌드하고 , 라벨 텍스트 설정하고, 라벨의 텍스트를 센터로 정렬해 준다.

자 이제 빌드하고 실행시켜보면 거의 완성된 모습을 볼 수 있다.

Cell과 상호작용하기

 

이 튜토리얼의 마지막 섹션은 터치와 탭핑을 통해 collectionView와 상호작용하는 방법이다. 두가지 다른 방법을 사용 할 것이다. 첫번째 방법은 모달 뷰를 띄어 이미지를 더 크게 보는것이고 두번째는 다중선택을 하여 이미지들을 이메일로 공유하는 것이다.

하나씩 선택하기

 

첫 번째로 할 일은 유저가 셀을 선택했을 때 나타날 모달뷰 컨트롤러를 만드는 것이다.
FileNewFile… 로 가서 iOSCocoa TouchObjective-C class template를 선택하고 Next를 클릭한다. 다음, 클래스이름을 FlickrPhotoViewController로 정하고 서브클래스로 UIViewController를 지정, Targeted for iPad를 체크해준다. 스토리뷰내에서 뷰를 설정할 것이므로 With xib for user interface은 체크하지 않도록 한다. Next를 클릭하고 Create를 선택하여 클래스를 만든다.

FlickrPhotoViewController.h를 열고 아래와 같이 코드를 변경해주자:

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

 

이것은 모달뷰로 띄워질 FlickrPhoto 객체를 public property로 더한 것이다.
이제,FlickrPhotoViewController.m를 열고 파일 상단에 임포트를 해주자:

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

 

다음 코드를 @interface 섹션 내 상단에 더해준다:

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

 

Outlet은 앞으로 보여질 이미지를 위한 것이며 Action은 유저가 뷰를 닫기 위해 Done 버튼을 눌렀을때 쓰이는 것이다.
이어서, 파일 끝 부분에 done:메소드를 더하자:

- (IBAction)done:(id)sender {
    // TODO
}

 

이제 MainStoryboard.storyboard를 열자. Object Library에서 viewController 객체를 드래그해서 넣자. 뷰컨트롤러를 선택하고 Identity Inspector에서 클래스 이름을 FlickrPhotoViewController로 바꿔주자.

 

다음으로는, main view controller 를 control+drag 하여 새로 넣은 Flickr Photo View Controller와 연결시켜주자.context 메뉴가 뜨면서 새롭게 넘어가는 효과(segue)를 선택할 수 있게 해 줄것이다. 메뉴에서 modal을 선택해주자.

다음 스텝은 효과를 설정해 주는 것이다. 먼저, segue를 클릭하고 Attributes Inspector를 열어준다. Identifier를 ShowFlickrPhoto로 설정해주고 Presentation을  Form Sheet로 바꿔준다.이제, Flickr Photo View Controller가 Form Sheet 사이즈로 줄어든 것을 볼 수 있을 것이다.

이제, toolbar와 imageView를 Flickr Photo View Controller의 메인뷰에 드래그 하여 넣자. toolbar 내 버튼의 텍스트를 “Done”으로 바꿔주고 Scene Inspector 내 Flickr Photo View Controller로 control+drag하여 연결 시켜준다.
또, control+drag를 하여 Flickr Photo View Controller와 삽입해 두었던 imageView도 연결시켜준다. outlet이 뜨면 imageView를 선택해라.

ViewController.m를 열고 @interface 섹션안에 다음 property를 넣자:

@property (nonatomic) BOOL sharing;

 

다음 소스를 collectionView:didSelectItemAtIndexPath: 메소드 내에 넣자(이 함수는 셀을 클릭했을때 collectionView에서 받는 콜백함수이다):

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

 

만약 유저가 “공유”모드가 아니라면, 사진을 클릭했을때 ShowFlickrPhoto에 지정된 효과가 실행된다. 사진을 sender로 그냥 보낸 것이 아니다. 이것은 모달뷰가 띄워졌을 때 어떠한 사진이 띄워져 있는 건지 알려준다. 마지막으로 선택이 해지 되었을 때, 하이라이트 효과를 사라지게 한다.

이제 이 클래스를 제대로 돌아가게 하기위한 메소드가 하나만이 남았다. 뷰를 넘어가는 효과가 실행되기 전,  prepareForSegue:sender 메소드가 먼저 불려져 온다.
ViewController.m 상단에 FlickrPhotoViewController 임포트 하는 것을 잊지말자:

#import "FlickrPhotoViewController.h"

 

다음, 파일의 끝부분에 아래의 코드를 더해주자:

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

 

이 메소드는 단지 segue의 sender (이 경우 사진을 탭한것)를 받고 viewController의 flickrPhoto property를 설정해 주는 것이다. (이 경우 FlickrPhotoViewController의 instance) 자, 이제 다 연결 시켜주자.
빌드하고 앱을 실행시켜보자. 그리고 검색을 하고 사진을 누르면 비어있는 image view가 모달뷰로 뜨는 것을 볼 수 있을 것이다.

왜 아무것도 없는 뷰가 뜬 걸까?? 왜 사진이 떠 있지 않는 걸까? 왜냐하면 FlickrPhotoViewController 내에서 이미지뷰 위에 있는 사진 이미지를 다루게 할 수 있는 코드가 아직 없기 때문이다.  FlickrPhotoViewController.m를 열고 아래의 코드를 더해서 고쳐보자:

-(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;
                }); 
            }
        }]; 
    }
}


한 섹션씩 알아보자.

  1. 만약 큰 사진으로 띄어져 있다면 그대로 imageView를 보여 준다.
  2. 만약 큰 사진이 아니라면 섭네일을 늘려서 보여준다(페이스북 앱에서도 이 방법을 사용하고 있다).
  3. Flickr에게서 큰 사이즈의 사진을 로드해온다.
  4. 만약 에러가 발생하지 않았다면, 큰 사진을 보여주기 위해 메인 스레드에서 이미지뷰를 업데이트한다.

 

다시 빌드하고 실행시켜 보자. 검색하고 결과 값을 클릭하면 이미지가 떠 있는 모달뷰를 볼 수 있을 것이다. 처음에는 흐릿한 사진 일 것이다. 하지만 섬네일에서 큰 사이즈의 사진으로 바뀌면서 선명해 질 것이다.

Note: 만약 풀 이미지를 로드해 오기전 섬네일 사진일 뜰 때 문제가 생긴다면 UIImageView에서 Content Hugging Priority와 Content Compression Resistance Priority를 적게 설정해 보자. (예를 들어 1)

멋지다! 하지만 이미지 창을 닫고 다른 이미지를 보기위해 “Done” 버튼을 누르면, 아무런 작동하지 않는 것을 발견할 것이다. 이런, done: 메소드 작성하는 것을 까먹고 있었다.

아래 코드를 FlickrPhotoViewController.m 내 비어있는 done메소드 대신 넣자:

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

 

이제, 유저가 Done버튼을 누르면 뷰가 사라질 것이다.

Multiple selection 다중 선택

 

이 튜토리얼의 마지막 할 일은 유저가 여러 사진을 선택하고 친구들과 공유 할 수 있게 해 주는 것이다. UICollectionView에서 다중선택하는 방법은 UITableView의 방법과 아주 유사하다. 그냥 collectionView에게 다중선택을 허용하라고 말해주면 된다.
다중 선택하기는 다음과 같은 단계로 진행된다:

  1. 유저가 “Share”버튼을 누름으로써 UICollectionView에게 다중선택을 하겠다고 말해주면 sharing property가 YES로 바뀌어 진다.
  2. 유저가 공유하고 싶은 사진들을 여러게 선택하면 그 것들을 정렬에 넣어준다.
  3. 유저가 “Done”버튼(전에 Share 버튼)을 선택하면 메일 보내기 창이 뜬다.
  4. 이메일 내용 부분에 이미지들을 보여주는 HTML이 들어간다.
  5. 유저가 메일보내기 혹은 취소 버턴을 눌렀을때, 사진들은 선택 해지가 되고 collection view는 하나만 고를 수 있는 싱글선택 모드로 돌아간다.

먼저 선택된 사진들을 담아 둘 수 있는 array만들기 부터 시작하자.
ViewController.m를 열고 다음 property 정의를 @interface 섹션에 더하자:

@property(nonatomic, strong) NSMutableArray *selectedPhotos;

 

다음 코드를 viewDidLoad: 하단에 넣어주자 :

self.selectedPhotos = [@[] mutableCopy];

 

자 이제 array 정의와 함께 내용물을 넣을 차례다.collectionView:didSelectItemAtIndexPath: 메소드 안에 ”Todo: Multi-Selection” 주석 대신 아래의 코드를 넣자:

NSString *searchTerm = self.searches[indexPath.section]; 
FlickrPhoto *photo = self.searchResults[searchTerm][indexPath.row]; 
[self.selectedPhotos addObject:photo];

 

이 코드는 단순히 사진이 선택되어지고 그 사진들을 selectedPhotos array에 더해준다.
다음으로, collectionView:didDeselectItemAtIndexPath 안 주석 대신 아래와 같이 코딩해준다:

if (self.sharing) {
    NSString *searchTerm = self.searches[indexPath.section]; 
    FlickrPhoto *photo = self.searchResults[searchTerm][indexPath.row];
    [self.selectedPhotos removeObject:photo]; 
}

 

이 코드는 유저가 실수로 선택한 사진들을 선택해지 할 수 있도록 해준다.
자 이제, shareButtonTapped: 메소드를 아래와 같이 채워주자:

-(IBAction)shareButtonTapped:(id)sender {
    UIBarButtonItem *shareButton = (UIBarButtonItem *)sender; 
    // 1
    if (!self.sharing) {
        self.sharing = YES;
        [shareButton setStyle:UIBarButtonItemStyleDone]; 
        [shareButton setTitle:@"Done"];
        [self.collectionView setAllowsMultipleSelection:YES];
    } else { 
        // 2
        self.sharing = NO;
        [shareButton setStyle:UIBarButtonItemStyleBordered]; 
        [shareButton setTitle:@"Share"];     
        [self.collectionView setAllowsMultipleSelection:NO];
        // 3
        if ([self.selectedPhotos count] > 0) { 
            [self showMailComposerAndSend];
        }
        // 4
        for(NSIndexPath *indexPath in self.collectionView.indexPathsForSelectedItems) { 
            [self.collectionView deselectItemAtIndexPath:indexPath animated:NO]; 
        }
        [self.selectedPhotos removeAllObjects]; 
    }
}

이 코드에서는 :

  1. 만약 유저가 지금 “공유” 모드가 아니라면, UICollectionView는 다중선택할수 있게 하고 “Share”버튼의 텍스트를 “Done”으로 바꿔준다.
  2. 유저가 공유 모드에서 “Done”버튼을 누르면 버튼의 텍스트가 “Share”로 바뀌고 UICollectionView의 다중선택을 불가하게 해야한다.
  3. 먼저 유저가 사진을 선택했는지 체크하고 만약 선택된 사진이 있다면 showMailComposerAndSend메소드를 부른다.
  4. 선택된 모든 셀을 선택 해지시키고 selectedPhotos array에서 모든 사진을 삭제한다.

 

아직 showMailComposerAndSend 메소드를 완성 시키지 않았기 때문에 어플리케이션이 실행 되지 않을 것이다. 이제 코드를 작성해보자 . MFMailComposeViewController 메소드를 쓰기위해 프로젝트에 MessageUI framework를 반드시 임포트해주어야 한다. 먼저 Project Navigator에서 루트를 클릭하고 Flickr Search target를 선택한다. 그리고 Build Phases를 클릭하고 Binary With Libraries menu 링크를 펼쳐준다. (+) 버튼을 누르고 MessageUI framework를 찾아서 Add 해주자.


그리고 ViewController.m의 상단에 MessageUI framework 상속하는 코드를 반드시 넣어준다:

#import <MessageUI/MessageUI.h>

 

그리고 ViewController가 MFMailComposeViewControllerDelegate 상속 받을 수 있도록 @interface 라인을 아래와 같이 바꿔주자:

@interface ViewController () <UITextFieldDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, MFMailComposeViewControllerDelegate>

 

이제 준비가 다 끝났으면 파일 끝부분에 showMailComposerAndSend 메소드를 작성한다:

-(void)showMailComposerAndSend {
    if ([MFMailComposeViewController canSendMail]) {
        MFMailComposeViewController *mailer = [[MFMailComposeViewController alloc] init];
        mailer.mailComposeDelegate = self;
        [mailer setSubject:@"Check out these Flickr Photos"];
        NSMutableString *emailBody = [NSMutableString string]; 
        for(FlickrPhoto *flickrPhoto in self.selectedPhotos)
        {
            NSString *url = [Flickr flickrPhotoURLForFlickrPhoto: flickrPhoto size:@"m"];
            [emailBody appendFormat:@"
",url];
        }
        [mailer setMessageBody:emailBody isHTML:YES];
        [self presentViewController:mailer animated:YES completion:^{}];
    } else {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Mail Failure" message:@"Your device doesn't support in-app email" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
        [alert show]; 
    }
}

이 코드에서는 우선 유저가 메일을 보낼 수 있는지 체크해준다. 만약 디바이스 내에 아무런 이메일 계정이 설정 되어있지 않다면 false로 리턴시켜고 유저에게 알려준다.
이메일의 내용은 첨부파일이 아니라 바로 이미지를 보여줄 수 있는  HTML로 작성 될 것이다. 이메일의 제목과 내용이 설정되면 메일보내기 창은 사라진다.
이제 유저가 “보내기” 혹은 “취소”버튼을 눌렀을 때의 액션을 설정해 주어야 한다. ViewController.m의 하단에 메일보내기 창을 위한 delegate메소드를 더해 주자:

- (void)mailComposeController: (MFMailComposeViewController *)controller didFinishWithResult:(MFMailComposeResult)result error:(NSError *)error {
    [controller dismissViewControllerAnimated:YES completion:^{}];
}

이제 유저가 “Done” 버튼을 클릭하면 메일보내기 창이 사라진다. 이제 실행시켜서 여러장의 사진을 공유 해보자.

여기 하나의 이슈가 아직 남아있다. 사진을 선택했을때, 그것을 보여줄 수 있는 방법이 없다. 유저는 그 사진들을 선택했는지 안했는지를 알수있는 방법이 없는 것이다. 이 문제는 FlickrPhotoCell의 selectedBackgroundView를 통해 간단히 해결 할 수 있다.

FlickrPhotoCell.m를 열고 initWithFrame:메소드를 지우자 그리고 다음의 코드를 대신 넣어주자:

-(id)initWithCoder:(NSCoder *)aDecoder { 
    self = [super initWithCoder:aDecoder]; 
    if (self) {
        UIView *bgView = [[UIView alloc] initWithFrame:self.backgroundView.frame]; 
        bgView.backgroundColor = [UIColor blueColor]; 
        bgView.layer.borderColor = [[UIColor whiteColor] CGColor]; 
        bgView.layer.borderWidth = 4;
        self.selectedBackgroundView = bgView; 
    }
    return self; 
}

xib 파일을 처음 초기화되면 initWithCoder: 메소드가 실행된다. 위 코드는 파란색 배경과 흰색 테두리의 뷰를 만들고 그것을 셀의 selectedBackgroundView로 설정해준다. 셀이 언제든 selected 상태가 되면 선택된 상태를 알려주기 위해 뷰의 배경이 selectedBackgroundView로 자동적으로 바뀐다.

이제 앱을 빌드하고 실행시킨후 몇몇개의 사진을 선택하고 “Share”버튼을 눌러보자. 다음과 같은 화면을 볼 수 있을 것이다:

와! 정말 깔끔하게 알수 있게 되었다. 다시 사진을 선택하게되면 선택이 해지 되면서 파란색 하이라이트는 사라진다는 것을 명심하자.

앞으로..

이 튜토리얼 시리즈의 예제 프로젝트는 여기서 다운 받을 수 있다.
축하해! 드디어 UICollectionView 를 이용해 그리드 뷰 형식의 완전 멋진 Flickr사진 브라우저 만들기를 끝냈다.

이 과정을 통해, 우리는 커스텀 UICollectionViewCell만들기, UICollectionReusableView를 사용해 헤더만들기, 테이블 열을 선택 시 액션취하기, 다중선택하기 등등을 배웠다.

같은 어플리케이션을 iOS6 이전 버전에서 만든다면 정말 힘들고 문제를 해결해 줄 또 다른 라이브러리를 찾게 만들게 할 것이다. 이제 CollectionView도  우리가 잘 알고 좋아하는 UITableView처럼 쉽게 사용할 수 있다!

하지만 아직 더 남았다. 지금까지는 그냥 UICollectionView의 겉만 핥았을 뿐이다. iOS 6 By Tutorials의 다음 챕터에서는, “사진스택 보여주기”, “Pinterest 스타일”, “커버플로우 스타일”과 같은 커스텀 레이아웃 만들기 이다.
이 챕터가 새로운 iOS6 CollectionView의 편리성과 가능성에 대해서 보여주었길 바란다.

만약 UICollectionView 또는 이 튜토리얼에 대한 질문, 코멘트가 있다면  아래 댓글을 남겨주길 바란다!

이 포스트는 iOS 튜토리얼 팀 멤버이자 소프트웨어 개발자, 그리고 brandontreb.com의 운영자,  Brandon Trebitowski에 의해 쓰여졌다.

Brandon Trebitowski
Brandon Trebitowski

Brandon Trebitowski is a software developer and author from Albuquerque, New Mexico. Brandon holds a BS in Computer Science from The University of New Mexico and has been developing software for the last 10 years. In 2010, he coauthored the book iPhone & iPad In Action published by Manning publishing.

Brandon is currently the Director of Mobile Engineering for ELC Technologies and a regularly blogs at http://brandontreb.com.

User Comments

0 Comment

Other Items of Interest

Ray의 월간 뉴스레터

Sign up to receive a monthly newsletter with my favorite dev links, and receive a free epic-length tutorial as a bonus!

Advertise with Us!

Hang Out With Us!

Every month, we have a free live Tech Talk - come hang out with us!


Coming up in May: Procedural Level Generation in Games with Kim Pedersen.

Sign Up - May

Coming up in June: WWDC Keynote - Podcasters React! with the podcasting team.

Sign Up - June

Vote For Our Next Book!

Help us choose the topic for our next book we write! (Choose up to three topics.)

    Loading ... Loading ...

Our Books

Our Team

Tutorial Team

  • Felipe Laso Marsetti

... 55 total!

Editorial Team

  • Ryan Nystrom

... 21 total!

Code Team

  • Orta Therox

... 1 total!

번역 팀

  • Victor Grushevskiy
  • Marina Mukhina
  • Vitaliy Zarubin

... 38 total!

Subject Matter Experts

  • Richard Casey

... 4 total!