Horizontal Scroll View
안녕하세요. 오늘은 Scroll View의 구현 방법 중 하나인 Horizontal Scroll View에 대해서 알아보는 시간을 갖도록 하겠습니다.
Horizontal Scroll View의 예로는 인스타그램이나 페이스북에서 여러 장의 사진이 올라온 게시물을 보실 때 사진들을 옆으로 넘기면서 보실 것입니다. 이것이 하나의 Horizontal Scroll View의 예가 될 수 있습니다.
이러한 Horizontal Scroll View를 구현하기 위해서는 스토리보드보다는 코드를 통해 Scroll View안에 들어갈 객체들의 사이즈를 이용하여 객체들의 위치와 Scroll View의 크기를 정해주어야 합니다.
그럼 본격적으로 시작해보도록 하겠습니다.
1. UI - Storyboard
먼저 프로젝트를 생성하신 다음 Main.stroyboard에서 Scroll View를 하나 올려주시고 화면을 꽉 채우게 설정해주세요.
지금까지 포스팅한 글들과는 다르게 스토리보드에서의 UI 세팅은 여기까지입니다. 그럼 이제 코드로 작성해보도록 하겠습니다.
2. Scroll View Sizing
Scroll View는 보여주는 데이터(보통은 사진)들에 따라 그것의 크기가 달라지게 됩니다. 그렇기 때문에 스토리보드로는 설정이 어려워 우리는 코드를 통해 설정해주어야 합니다.
먼저 기본적으로 Scroll View 위에서 보여줄 임의의 사진 4장을 프로젝트 내에 넣어주세요. 그리고 해당 이미지들을 배열의 형태로 담고 있도록 하겠습니다. 그리고 올려놓은 Scroll View와 ViewController를 연결시켜줍니다.
View들을ViewController에 연결시키는 방법은 따로 언급하지 않도록 하겠습니다. 제가 작성한 이전 포스팅에서 확인하실 수 있습니다.
class ViewController: UIViewController{
@IBOutlet weak var scrollView: UIScrollView!
override func viewDidLoad(){
super.viewDidLoad()
var images = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpeg"]
}
}
이제는 본격적으로 Scroll View를 작성해보도록 하겠습니다. 먼저 이 예제에서 우리가 Scroll View 위에서 보여주어야 할 사진은 총 네 장입니다.
for i in 0..<images.count{
}
그리고 우리는 이미지를 보여줄 것이기 때문에 UIImageView를 생성해야합니다. 그리고 기본적인 UIImageView에 대한 기본적인 설정을 해주도록 하겠습니다.
for i in 0..<images.count{
let imageView = UIImageView()
imageView.image = UIImage(named: images[i])
imageView.contentMode = .scaleAspectFit // 사진의 비율을 맞춤.
}
우리가 만드는 Scroll View는 Horizontal이기 때문에 각각의 UIImageView는 가로로 배치되게 됩니다. 이렇게 가로로 각각의 뷰들을 배치시키기 위해서는 각 뷰들의 x좌표를 설정해주어야 합니다. 그리고 이번 예제에서는 현재 보이는 화면에서 하나의 이미지만 보이게 끔 하도록 하겠습니다.
for i in 0..<images.count{
let imageView = UIImageView()
imageView.image = UIImage(named: images[i])
imageView.contentMode = .scaleAspectFit // 사진의 비율을 맞춤.
let xPosition = self.view.frame.width * CGFloat(i)
}
xPosition을 정하는 코드가 이해가 힘드실 수 있어서 제가 도움이 될 만한 자료를 만들어보았습니다.
반복문을 돌면서 각각의 UIImageView들은 위의 그림과 같은 xPosition을 갖게 됩니다. 이렇게 시작 좌표를 정해주었다면 이제 UIImageView의 크기를 정해줍니다. (우리의 예제의 최종 화면에서는 UIImageView가 화면 전체를 덮을 것입니다.)
for i in 0..<images.count{
let imageView = UIImageView()
imageView.image = UIImage(named: images[i])
imageView.contentMode = .scaleAspectFit // 사진의 비율을 맞춤.
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: 0,
width: self.view.frame.width,
height: self.view.frame.height)
// 즉 이미지 뷰가 화면 전체를 덮게 됨.
}
여기까지가 우리가 Scroll View위에서 보여줄 UIImageView에 대한 설정입니다. 그렇다면 이젠 Scroll View를 설정해주어야 하는데 그 중 하나가 바로 Scroll View의 사이즈입니다.
for i in 0..<images.count{
let imageView = UIImageView()
imageView.image = UIImage(named: images[i])
imageView.contentMode = .scaleAspectFit // 사진의 비율을 맞춤.
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: 0,
width: self.view.frame.width,
height: self.view.frame.height) // 즉 이미지 뷰가 화면 전체를 덮게 됨.
scrollView.contentSize.width =
self.view.frame.width * CGFloat(1+i)
}
현재 이 예제에서는 이미지의 갯수를 알 수 있어 바로 크기를 구할 수 있지만 대부분은 서버에서 이미지를 받아오기 때문에 올라갈 이미지 갯수만큼 반복문을 돌면서 그때 그때 각각의 이미지의 크기에 맞춰 Scroll View 사이즈를 늘려주어야 합니다.
이 예제에서는 화면에서 하나의 이미지만을 보여주어야 하고 Horizontal Scroll View이기 때문에 Scroll View의 width 값을 이미지의 갯수와 크기에 맞춰 늘려주어야 합니다.
그렇기 때문에 Scroll View의 width값은 UIImageView의 width값에 의해 결정이 되고 화면에서 이미지를 하나만 보여주기 때문에 UIImageView의 width값은 화면의 width 값이기 때문에 위와 같은 코드로 작성되는 것입니다.
이렇게 Scroll View의 크기가 결정되면 이미지를 Scroll View에 올려줍니다.
for i in 0..<images.count{
let imageView = UIImageView()
imageView.image = UIImage(named: images[i])
imageView.contentMode = .scaleAspectFit // 사진의 비율을 맞춤.
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: 0,
width: self.view.frame.width,
height: self.view.frame.height) // 즉 이미지 뷰가 화면 전체를 덮게 됨.
scrollView.contentSize.width =
self.view.frame.width * CGFloat(1+i)
scrollView.addSubview(imageView)
}
3. Paging Enabled
여기까지가 기본적인 Horizontal Scroll View를 만드는 과정이었습니다. 이제 프로젝트를 실행해보시면 정상적으로 작동하시는 것을 확인하실 수 있습니다. 하지만 약간 거슬리는 것이 있으실텐데요. 스크롤을 하게 되면 이미지가 획획 넘어가는 것을 보실 수 있으실 것입니다. 이것을 방지하기 위해 스토리보드로 가서 Scroll View를 선택하신 후 Attributes Inspector에서 Paging Enabled를 체크해주시면 됩니다.
4. 마무리
그럼 최종 결과물을 확인해보겠습니다.
여기까지가 Horizontal Scroll View를 만들어보는 과정이었습니다. 스토리보드가 아닌 코드로 뷰들의 위치와 크기를 지정해주시는 것이 낯설 수 있으실텐데요. 저도 아직까지는 굉장히 낯섭니다. 이와 같이 스토리보드로는 만들기 힘든 경우가 생각보다 많이 있습니다. 그러니 반드시 익숙해지셔야 하고 직접 작성하실 수 있어야 합니다.
오늘은 준비한 글을 여기까지 입니다. 감사합니다.
Source : https://github.com/ehdrjsdlzzzz/tistory-ios/tree/master/Scroll%20View
참고자료