~☆~ 우하하!!~ 개발블로그

[iPhone] OS 3.0 UIScrollView 를 이용한 ZoomIn/ZoomOut 본문

iPhone & Cocoa

[iPhone] OS 3.0 UIScrollView 를 이용한 ZoomIn/ZoomOut

iwoohaha 2009. 7. 9. 16:40
반응형
UIScrollView 로부터 파생되는 클래스를 만든다.
이번 예제에서는 MyScrollView 라는 이름을 사용한다.

@interface MyScrollView : UIScrollView
{
}

@end

UIScrollView 클래스의 인스턴스는 UIScrollViewDelegate 프로토콜을 사용해야 한다.

@interface MyScrollView : UIScrollView <UIScrollViewDelegate>
{
}

@end

UIScrollView 클래스로부터 파생된 MyScrollView 클래스형 인스턴스는 스크롤, 줌 등의 동작을 수행하며, 실제로 스크롤되거나 확대/축소되는 컨텐츠는 MyScrollView 클래스의 멤버로 추가되는 뷰에 그려지게 된다.

이 예제에서는 큼지막한 이미지를 출력하는 이미지뷰를 사용하도록 하겠다.

우선 MyScrollView 클래스에 UIImageView 클래스형 멤버를 추가한다.
@interface MyScrollView : UIScrollView <UIScrollViewDelegate>
{
    UIImageView* imageView;
}

@end

이제 MyScrollView 클래스의 구현 파일을 작성해볼 차례이다.
initWithFrame 함수에 다음 코드를 추가한다.

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // Initialization code
        UIImage* imageBG = [UIImage imageNamed:@"bg.png"];
        imageView = [[UIImageView alloc] initWithImage:imageBG];
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        [imageView setFrame:CGRectMake(0,0,imageBG.size.width,imageBG.size.height)];
        [self addSubview:imageView];
        [imageView release];
       
        self.delegate = self;
        self.maximumZoomScale = 1.0f;
        self.minimumZoomScale = 0.4f;
        [self setContentSize:CGSizeMake(imageBG.size.width,imageBG.size.height)];
       
        [self setZoomScale:self.minimumZoomScale];
    }
    return self;
}

MyScrollView 내부에 얹을 이미지뷰에는 bg.png 라는 이름으로 저장되어 있는 이미지를 불러와서 출력한다.
UIScrollView 클래스의 파생클래스인 MyScrollView 의 최대 확대배율과 최소 확대배율은 각각 1.0f, 0.4f 로 설정하였다.
그리고 컨텐츠의 크기는 이미지 크기로 설정하였다.

마지막으로 최소 확대배율값을 setZoomScale 함수에 전달하여 이미지 전체가 화면에 나올 수 있도록 설정하였다.

아직까지 UIScrollViewDelegate 프로토콜의 메소드는 구현하지 않았는데, 반드시 구현해야 할 메소드는 다음과 같다.
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return imageView;
}

MyScrollView 클래스의 멤버인 imageView 를 리턴하도록 하여 스크롤뷰에서 확대/축소되는 뷰로 설정한다.

이제 어플리케이션 델리게이트 클래스의 applicationDidFinishLaunching 함수에 다음 코드를 작성하여 MyScrollView 를 출력하도록 한다.

#import "MyScrollView.h"

- (void)applicationDidFinishLaunching:(UIApplication *)application {   
    MyScrollView* scrollView = [[MyScrollView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    [window addSubview:scrollView];
    [scrollView release];
   
    // Override point for customization after app launch   
    [window makeKeyAndVisible];
}

여기까지 작성한 결과로 나타나는 화면은 다음과 같다.

시뮬레이터에서 옵션키를 누르고 마우스를 드래그함으로써 이미지를 확대 및 축소시킬 수가 있다.

화면을 더블탭했을 때 최소 확대배율 또는 최대 확대배율로 설정을 변경하기 위해서는 MyScrollView 클래스에 다음과 같은 코드를 추가하면 된다.
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
    [super touchesBegan:touches withEvent:event];
   
    UITouch* touch = [touches anyObject];
    if ([touch tapCount] == 2)
    {
        if (self.zoomScale == self.minimumZoomScale)    // 현재 최소화되어 있다면 최대화한다.
            [self setZoomScale:self.maximumZoomScale animated:YES];
        else if (self.zoomScale == self.maximumZoomScale)    // 현재 최대화되어 있다면 최소화한다.
            [self setZoomScale:self.minimumZoomScale animated:YES];
        else    // 중간 정도의 크기라면 최대화한다.
            [self setZoomScale:self.maximumZoomScale animated:YES];
    }
}

UIScrollView 클래스의 setZoomScale:animated: 메소드는 iPhone OS 3.0 에서 새롭게 추가된 메소드이므로 iPhone OS 3.0 미만에서는 위 코드가 정상적으로 동작하지 않는다는 것을 주의하도록 하자.
 
반응형