iOS Coverflow Control

Dev/iOS 2011. 9. 23. 14:55


프로젝트에 iTunes에서 음악을 재생하면 나타나는 앨범 재킷들처럼 Coverflow 를 삽입하는 내용을 정리한다.
원문 : iPhone Coverflow Tutorial : Adding Tapku To Xcode4 Project 



 Devin Ross란 사람이 만든 Tapku 라는 라이브러리를 사용한다. (Free library)
download
 
1. View-based application iphone 프로젝트를 생성한다.
2. Tapku library 를 프로젝트로 복사한다. 
3. 복사후 해당 폴더 안으 TapkuLibrary.xcodeproj 파일을 프로젝트의 framework group에 드래그 앤 드롭한다.
4. 'TapkuLibrary' 폴더 아래의 'TabkuLibrary.bundle' 파일을 프로젝트의 Supporting Files group에 드래그 앤 드롭한다. 대화 상자가 나타나면 "Create Folder References"를 선택 하고 "Copy items"는 체크를 해제 한후 'Finish'를 클릭한다.
5. Core Animation & MapKit frameworks를 프로젝트에 추가한다.
 - Project navigator에서 project file을 선택
 - targets list 에서 해당 target을 선택
 - Build Phases tab을 선택 후 Link Binary With Libraries 를 확장한다.
 - '+'버튼을 클릭해서 'QuartzCore.framework'와 'MapKit.framework'을 추가한다.
6. Target Dependencies에 Tapku library 추가
 - 'Target Dependencies'를 확장
 - Tapku Xcode project에서 TapkuLibrary를 추가
7. libTapkuLibrary.a추가
 - Target Build Phases 의 'Link Binary With Libraries'섹션에서 '+'버튼을 클릭해 'libTapkuLibrary.a'를 추가한다.
8. Build Settings의 'Header Search Paths'에 '$(SRCROOT)/Coverflow/Tapku/src'를 추가해 준후 Done. (자신의 프로젝트에 알맞도록 변경 할것)
9. Linker 섹션 아래 'Other Linker Flags'에 '-ObjC'와 'all_load' flag추가 후 Done.
10. Tapku 폴더의 src/Frameworks/ 위치에 있는 TouchJSON library를 추가한다.
 - TouchJSON폴더를 frameworks group에 드래그 앤 드롭 한다.
 - 대화상자가 나타나면 copy item checkbox 를 선택한다.

설정 완료.

뷰 컨트롤러의 헤더. ----

#import <UIKit/UIKit.h>
#import <TapkuLibrary/TabkuLibrary.h>

@interface XXXViewController : UIViewController <TKCoverflowViewDelegate, TKCoverflowViewDataSource>
{
    TKCoverflowView * coverflow;
    NSMutableArray * covers;
}
@property (retain, nonatomic) TKCoverflowView * coverflow;

@end

뷰 컨트롤러의 구현 파일. -----
- (void)viewDidLoad
{
    [super viewDidLoad];

    covers = [[NSArray arrayWithObjects:
        [UIImage imageNamed:@"aaaa.png"], [UIImage imageNamed:@"bbbb.png"], nil] retain];

    coverflow = [[TKCoverflowView alloc]  initWithFrame:CGRectMake(0, 0, 480, 300)];
    coverflow.coverflowDelegate = self;
    coverflow.dataSource = self;
    [self.view addSubview:coverflow];
    [coverflow setNumberOfCovers:50];
}
 
** 추가로 datasource 와 view delegate 메소드들을 구현해줘야 한다. 데모는 landscape로 회전되어 있는다.
project download
 
이상. 프로그램 소스는 코드에서 복사한 내용이 아니라 오탈자가 있을수 있으니, 소스 코드를 다운로드 하여 확인.
: