iOS ScrollView Sample

 

iOS 앱을 만들어보면서 제일 먼저 막혔던 부분이다.

앱을 켜서 메인화면을 들어갔을 때, 위아래로 화면을 터치할 경우 화면이 스크롤되는 기능.

이게 사용할 때에는 몰랐는데 막상 만들려고 하니 간단한 일이 아니였다.

여러 가지 UI 뷰 컴포넌트(UIView, ScrollView, Label, Image, … )에 대한 이해도 필요하고, 화면을 구성할 때 AutoLayout에 대한 이해와 경험도 필요했다.

블로그나 유튜브 예제나 강의를 찾아서 해보면 그때는 어떻게든 되긴 하지만…

만들고서도 이건 내 것이 아니라는 생각이 절로 든다.

내가 잘 모르고 만든 것이라서 그렇다.

아무튼 애플이 만든 생태계에 적응을 하기로 마음을 먹었으니, 긍정적인 마음을 가지고 도전을 해본다.

 

#1 스토리보드에서 아래와 같이 구성
ScrollView
ㄴView
ㄴㄴ Label

 

#2. 연결된 뷰 컨트롤러에서 라벨의 크기를 동적으로 키웠다. (세로로 길어지도록)

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var banana: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        banana.numberOfLines = 0
        banana.backgroundColor = .brown
        banana.layer.borderColor = UIColor.red.cgColor
        banana.layer.borderWidth = 2
        banana.layer.cornerRadius = 0.5
        banana.lineBreakMode = .byWordWrapping
        banana.text = "A scroll view lets people browse content that’s larger than the view’s visible area, such as text in a document or a collection of images, by scrolling horizontally and vertically. A scroll view itself has no appearance, but can display horizontal and vertical scroll bars, each of which consists of a track containing a draggable control known as a knob. The height of a knob reflects the quantity of scrollable content. For example, a small knob indicates that there’s lots of content available to scroll. A scroll view lets people browse content that’s larger than the view’s visible area, such as text in a document or a collection of images, by scrolling horizontally and vertically. "
        banana.sizeToFit()
    }
}

 

#3. View의 Height 제약조건의 우선순위를 250으로 변경.

 

 

위와 같이 간단하게 뷰(라벨)의 크기에 따라 위아래로 스크롤이 가능한 화면을 만들어봤다.

 

Git Repository : https://github.com/kji0205/ScrollViewSample