iOS Programming : 간단히 Scroll View를 구현해 보자

Scroll View를 간단하게 테스트 해보기 위해 아이폰의 화면보다 더 큰 해상도의 이미지를 준비해서 화면에 띄운 후 상하/좌우 스크롤을 통해 전체 이미지를 볼 수 있도록 해보자.

SingView Application Template으로 ScrollView라는 이름의 Project를 생성한다.
왼쪽 project 네비게이터에서 ScrollViewController.xib를 선택하고 Inspector 메뉴의 아래쪽에 있는 Objects 리스트에서 Scroll View를 클릭후 에디트화면상의 View 위에 올려놓으면 된다.

다음은 project 네비게이터에서 ScrollViewController.h 파일을 열어 아래와 같이 scrollView 객체를 xib파일에서 추가해 둔 Scroll View와 연결할 수 있도록 IBOulet 키워드를 사용해 property선언해 준다.

ScrollViewController.m 파일에는 위에서 property 선언해준 scrollView 인스턴스를 synthesize해준다.

다시 project 네비게이터에서 ScrollViewController.xib를 선택하고 옆의 File's Owner를 선택하면 나타나는 오른쪽 Inspector창에서 6번째 Connections Inspector를 선택하면 Outlets 항목에 위에서 property 선언해준 scrollView항목이 나타나는데 그 옆의 원을 클릭하고 왼쪽의 Objects - Scroll View 항목으로(또는 UIScrollView 화면으로) 드래그해 연결한다.

여기까지 기본적인 준비는 다 되었고, 실제로 화면에 표시할 이미지를 준비해서 project에 포함시킨다.

이미지는 가급적이면 큰 것을 준비해야 상하/좌우 스크롤을 해보며 동작을 충분히 확인할 수 있을 것이다.

테스트로 근사한 자동차 사진 하나 추가해 보았는데 음.... 타보고 싶어지는 군...

이제 마지막으로 이미지를 scrollView 위에 띄우기만 하면 된다.

아래와 같이 ScrollViewController.m 파일의 viewDidLoad 메소드에 추가한 이미지 파일을 imageView로 생성해 놓은 후 scrollView의 사이즈를 imageView로 설정한 다음 addSubView로 scrollView를 붙여주면 끝.

이제 실행을 해보자.

시뮬레이터의 화면크기보다 더 큰 이미지를 띄웠기 때문에 좌상단의 일부분만 우선 표시가 된 것이고 마우스를 사용해 상하/좌우로 드래그를 해보면 이미지가 따라서 스크롤이 되며 전체 이미지를 확인할 수 있을 것이다.