Scroll view (작성중)

Sample Code Download

https://drive.google.com/file/d/1AYBpfo8UFv8BWyjQgPvgkRqahNRNg9mF/view?usp=sharing

불러오는 중입니다...

오늘은 Swift의 Scroll view(이하 '스크롤뷰' 라고 하겠다)에 대해서 알아보려 한다.

 

스크롤뷰는 현업에서 코딩할 때 정말 많이 쓰이는 뷰이다.

그리고 다양하게 활용할 수 있다.

contants의 양이 화면 크기 보다 많을 때 상하로 스크롤 하며 볼 때 사용할 수 있고

이미지를 좌우로 넘겨볼 때도 쓸 수 있다.

참고로 webview에는 scroll이 자동으로 적용되고

table view에는 scroll 기능이 미리 정의 되어 있다.

 

스크롤뷰가 어색한 사람은 constraint부터 헤매게 된다.

스크롤뷰를 Auto Layout으로 조정하고 있으면 계속 에러가 발생한다.

하지만 그 문제는 다음에 다뤄보도록 하고(후에 게시글 링크를 추가)

오늘은 이미지를 가로로 스크롤하는 방법을 알아보려고 한다.

샘플 코드는 다운로드할 수 있는 링크를 첨부하였다.

그리고 샘플 코드처럼 일반 뷰를 기본으로 한다.

 

먼저 main.스토리보드에서 스크롤뷰를 화면에 올려 놓는다.

필요하다면 page control도 추가한다.

 

그 다음 contants을 조정할 UIView를 상속받은 클래스를 하나 만들고

바로 이어서 xib 문서를 만든다.

그리고 xib에서 Custom Class를 바로 이전에 만든 클래스와 연결을 해준다.

디자인을 시작한다. 나는 불필요한 오류를 없애기 위해 디자인을 샘플과 완벽하게 일치시켰고

코드를 변경해가면서 실험을 하였다.

디자인 한 객체들을 연결한 클래스에 변수로 연결시켜준다 - @IBOutlet

(샘플에서는 imageView, labelTitle, labelDesc)

 

그 다음 각 contants가 아니라 화면을 조정할 클래스로 이동한다.

(없다면 새로 생성 - UIViewController를 상속받을 것)

나는 기존의 ViewController를 사용할 것이다.

 

아까 main.스토리보드에서 디자인한 스크롤뷰 객체와 페이지 컨트롤 객체를 변수로 연결시킨다. - @IBOutlet

(scrollView, pageControl)

이런 코드는 처음인데,

@IBOutlet을 연결하는 동시에 delegate를 위임할 수 있다.

    @IBOutlet weak var scrollView: UIScrollView!{

        didSet{

            scrollView.delegate = self

        }

    }

 

해당 실습은 이미지를 좌우로 넘기기 위한 것임으로 여러 이미지가 필요하다.

나는 샘플코드의 이미지를 그대로 활용했다.

Assets.xcassets에 저장을 해두었다.

 

이미지를 호출하기 위해서 이미지 이름을 저장할 배열을 생성한다.

var slides:[Slide] = [];

자료형을 Slide의 배열 형태로 하는 이유는 이미지 뿐만 아니라 한 화면에 들어가는 모든 컨텐츠를 각 배열에 저장할 것이기 때문인데

이것은 func으로 각 화면단위로 정보를 담을 객체를 Slide 자료형으로 만들어, 배열에 대입하는 작업을 만들었기 때문이다.

그래서 viewDidLoad에 보면

slides = createSlides()

와 같은 코드가 있고 createSlides()는 Slide 객체를 배열에 저장하는 함수다.

    func createSlides() -> [Slide] {

        

        let slide1:Slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide

        slide1.imageView.image = UIImage(named: "ic_onboarding_1")

        slide1.lblTitle.text = "A real-life bear"

        slide1.lblDesc.text = "Did you know that Winnie the chubby little cubby was based on a real, young bear in London"

        

        let slide2:Slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide

        slide2.imageView.image = UIImage(named: "ic_onboarding_2")

        slide2.lblTitle.text = "A real-life bear"

        slide2.lblDesc.text = "Did you know that Winnie the chubby little cubby was based on a real, young bear in London"

        

        let slide3:Slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide

        slide3.imageView.image = UIImage(named: "ic_onboarding_3")

        slide3.lblTitle.text = "A real-life bear"

        slide3.lblDesc.text = "Did you know that Winnie the chubby little cubby was based on a real, young bear in London"

        

        let slide4:Slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide

        slide4.imageView.image = UIImage(named: "ic_onboarding_4")

        slide4.lblTitle.text = "A real-life bear"

        slide4.lblDesc.text = "Did you know that Winnie the chubby little cubby was based on a real, young bear in London"

        

        

        let slide5:Slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide

        slide5.imageView.image = UIImage(named: "ic_onboarding_5")

        slide5.lblTitle.text = "A real-life bear"

        slide5.lblDesc.text = "Did you know that Winnie the chubby little cubby was based on a real, young bear in London"

        

        return [slide1, slide2, slide3, slide4, slide5]

    }

참고로 createSlides()에서 Bundle.main.loadNibNamed는 nib파일을 로딩해주는 것인데, 이것은 번들 내에 주어진 nib 파일을 이름으로 찾아서 이를 로드하여 해당 nib 파일 내의 탑레벨 객체들을 [Any?] 타입으로 리턴해준다고 한다.

 

 

#scrollview bounce 막기

Want it

- 좌우로만 이동할 수 있도록 애니메이션이 작동한다.

 

다 해봤는데, 아래 것이 내가 원하는 대로였음.

override func viewDidLoad() {

super.viewDidLoad()

        scrollView.bounces = false

}

 

func scrollViewDidScroll(_ scrollView: UIScrollView) {

if scrollView.contentOffset.y > 0 {

            scrollView.contentOffset.y = 0

        }        

        scrollView.isDirectionalLockEnabled = true

}

 

--

 

특정 부분만 스크롤뷰가 적용되게 하려면

main.스토리보드에서 적용될 부분만 스크롤뷰로 적용해주면 되고

xib 파일에서는 그냥 전체 화면을 쓰면 된다.

 

---