[iOS] UIScrollView 사용법
업데이트
UIScrollView를 Swift에서 사용하는 방법에 대한 (적어도 이 글 보다는 나은) 새 버전을 참고하세요.
UIScrollView는 gesture recognizer를 내장하여 실제 뷰 영역보다도 큰 영역을 스크롤하여 내용을 볼 수 있도록 해주는 클래스이다. 사진 앨범 앱의 사진 보기 화면에서 이 스크롤뷰가 사용된다. (카메라롤의 사진 목록 역시 스크롤뷰로 구현되어 있다.)
스크롤뷰는 관성 이동은 물론 내부 컨텐츠를 확대/축소하는 방법을 아주 간단히 처리할 수 있어 주로 이미지와 관련된 화면에서 상당히 유용하게 활용할 수 있다.
스크롤뷰를 사용하는 방법은 UIViewController와 거의 유사하다. 인스턴스를 생성해서 하위뷰를 추가해주면 된다. 스크롤뷰의 뷰 크기는 실제 화면에 노출되는 영역의 크기이고, 실제 전체 컨텐츠의 영역을 ContentSize로 지정해주어야 스크롤이 제대로 동작한다.
또한 줌을 위해서는 최대스케일 값과 최소 스케일 값을 지정해야 하며 (이는 IB에서도 할 수 있다.) 실제 줌 동작에 반응하기 위해서는 델리게이트가 어떤 뷰가 줌을 받게 되는지를 지정해 주어야 한다. 아주 간단한 예제를 통해 알아보도록 한다.
스크롤뷰 스터디 샘플
설명의 편의를 위해 이번에는 IB를 전혀 사용하지 않고 코드로만 작업해 본다. 우선 프로젝트를 신규로 만든다. 이 때 템플릿은 Single View Application을 사용한다. 또한 스크롤 뷰를 위해 큼지막한 이미지를 하나 더 준비한다. 프로젝트가 생성되면 Xcode 창의 왼쪽 파일 네비게이션 영역으로 파일을 끌어다 놓으면 프로젝트에 이미지 파일을 추가할 수 있다.
ViewController.m
오늘은 이 파일에서 모든 것을 처리해보자. 앱이 실행되면 루트 뷰에 스크롤뷰를 하나 추가하는데, 이 스크롤뷰에는 UIImageView가 하나 추가된다. 이 이미지뷰 안에 방금 추가한 이미지를 넣어서 스크롤이 되도록 해 볼 것이다.
먼저 파일 이름을 따로 매크로로 만들어 두고, 바로 private interface를 정의하도록 한다.
#import "ViewController.h"
#define SCV_IMAGE_FILENAME @"이미지파일.JPG"
@interface ViewController() <UIScrollViewDelegate>
@property (strong, nonatomic) UIScrollView *scrollView;
@property (strong, nonatomic) UIImageView *imageView;
@property (strong, nonatomic) UIImage *anImage;
@end
인터페이스를 정의하면서 뷰컨트롤러가 UIScrollViewDelegate 프로토콜을 따르도록 했다. 이는 줌인/줌아웃을 어떤 뷰가 받을지를 스크롤뷰에게 알려주는 역할을 하기 위해서다. (물론 imageView가 하게 된다.)
다음은 synthesize 하면서 인스턴스 변수명을 함께 정해주자. (변수명 앞에 언더스코어를 붙이는 것은 혼동을 방지하기 위해서이다. 혹은 어떤 규칙이 있는지도 모르겠다.)
@synthesize scrollView = _scrollView, imageView = _imageView, anImage = _anImage;
이제 각 프로퍼티는 처음으로 호출될 때 초기화되도록 하면 된다. 이 때 스크롤뷰의 초기화 부분을 눈여겨 보라.
-(UIImage *)anImage
{
if(!_anImage) _anImage = [UIImage imageWithName:SCV_IMAGE_FILENAME];
return _anImage;
}
-(UIImageView *)imageView
{
if(!_imageView) _imageView = [[UIImageView] alloc]initWithImage:self.anImage];
return _imageView;
}
-(UIScrollView *)scrollView
{
if(!_scrollView) {
CGRect viewFrame = CGRectMake(0,0,320.0f,460.0f);
_scrollView = [[UIScrollView alloc] initWithFrame:viewFrame];
_scrollView.contentSize = self.imageView.frame.size;
_scrollView.minimumZoomScale = 0.1f;
_scrollView.maximumZoomScale = 3.0f;
_scrollView.delegate = self;
[_scrollView addSubview:self.imageView];
}
return _scrollView;
}
이제 앱이 실행되고 루트뷰가 로드될 때 스크롤뷰를 화면에 추가하도록 하자.
-(void)viewDidLoad
{
[super viewDidLoad];
[self.view addSubview:self.scrollView];
}
스크롤뷰에서 확대 축소하기
이제 앱을 빌드하고 실행하면 이미지가 화면에 표시되고, 드래그하여 스크롤이 되는 것을 확인할 수 있다. 하지만 아직 줌이 되지 않는다. 이는 위에서 이야기한 스크롤뷰에게 어떤 뷰가 줌이 되는지를 알려주지 않아서이다. UIScrollViewDelegate 프로토콜에 정의된 메소드 중 viewForZoomingInScrollView:를 추가해준다.
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}
이제 이미지를 두 손가락으로 확대/축소할 수 있게 됨을 볼 수 있다.
