UIScrollView 컨텐츠 영역 화면 캡쳐하기

Bitmap image context(이전 포스팅 참조)를 활용한 화면 캡쳐를 해보자. 단순 화면 캡쳐가 아닌 UIScrollView내의 컨텐츠를 이미지로 캡쳐하여 저장한다.

테스트를 위해 화면 아래로 스크롤이 가능하도록 20개의 row를 가진 UITableView 하나를 만든다. UITableView는 UIScrollView를 상속하고 있어 별도의 UIScrollView를 만들지 않았다.(구현 모습은 아래 그림 참고)

테이블 row 를 클릭하면 UIScrollView영역, 즉 20개의 row가 담긴 이미지가 앨범에 저장되도록 한다.

test project

바로 코드를 통해 확인해보자.

// import QuartzCore
#import <QuartzCore/QuartzCore.h>

- (void)viewDidLoad{

    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    _tableView.delegate = self;
    _tableView.dataSource = self;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    // scroll이 생기도록 20개의 row를 생성
    return  20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    // 간단하게 row를 출력하는 UITableViewCell 생성
    UITableViewCell *cell = nil;
    cell = [tableView dequeueReusableCellWithIdentifier:@"test"];
    if(!cell){
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"test"];
    }

    cell.textLabel.text = [NSString stringWithFormat:@"%d", indexPath.row];
    return cell;
}

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

     // capture 이미지 생성
    UIImage* captureImage = [self captureContentsInScrollView:indexPath.row];

    if(!captureImage) return;

    // 사진 앨범에 저장
    UIImageWriteToSavedPhotosAlbum(captureImage, nil, nil, nil);

}

-(UIImage*)captureContentsInScrollView:(int)selectRow{

    // 생성된 이미지를 저장할 변수
    UIImage *capture = nil;

    // UIScrollView의 기존 frame을 저장 (이 예제에선 UITableView가 UIScrollView의 역할)
    CGRect originTableViewFrame = _tableView.frame;

    // capture할 영역을 지정. UIScrollView의 컨텐츠 사이즈
    CGSize captureSize = CGSizeMake(_tableView.contentSize.width, _tableVie.contentSize.height);

    // bitmap graphic context 생성
    UIGraphicsBeginImageContextWithOptions(captureSize, YES, 0.0);

    // UIScrollView의 frame을 content 영역으로 변경
    _tableView.frame = CGRectMake(0, 0, captureSize.width, captureSize.height);

    // UIScrollView frame영역을 bitmap image context에 그림
    [_tableView.layer renderInContext:UIGraphicsGetCurrentContext()];

    //  bitmap graphic context로부터 이미지 획득
    capture = UIGraphicsGetImageFromCurrentImageContext();

    // UIScrollView의 frame을 원래대로 변경 (변경하지 않으면 스크롤이 안됨)
    _tableView.frame = originTableViewFrame;

     // bitmap image context 종료
     UIGraphicsEndImageContext();

    return capture;
}

Simulator로 실행하여 row를 선택하면 다음의 이미지가 앨범에 저장되는 것을 확인할 수 있다.

전체 캡쳐 결과

UIImageWriteToSavedPhotosAlbum()함수는  UIKit에서 지원하는 함수로 디바이스 앨범에 이미지를 저장한다. delegate를 구현하면 이미지 저장 여부를 어플리케이션에서 알 수 있다. (여기선 생략)

위 (UIImage*)captureContentsInScrollView:(int)selectRow 함수에 파라미터로 선택된 row를 전달하고 있다. 코드에서는 selectRow 파라미터가 사용되지 않았으나, 이 파라미터와 cell의 높이를 활용하여 captureSize를 조정하면 선택된 셀까지만 캡쳐되도록 할 수 있다. 아래 그림은 적용한 결과 화면이다.

선택한 row까지만 캡쳐

Advertisements
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: