[IOS] UIScrollView 안에 UIImageView와 UILabel을 넣기

14 Aug 2023

UIScrollView 안에 UIImageView와 UILabel을 넣기 위해서는 다음과 같은 단계를 따를 수 있습니다:

UIScrollView를 생성하거나 이미 존재하는 UIScrollView를 선택합니다.
UIScrollView의 크기와 콘텐츠 영역을 조정합니다. 이는 UIScrollView의 frame 속성과 contentSize 속성을 사용하여 설정할 수 있습니다.
UIImageView와 UILabel을 생성합니다.
UIImageView에 이미지를 할당하고, 필요한 경우 이미지의 크기와 표시 방식을 조정합니다 (contentMode 등).
UILabel에 텍스트를 할당하고, 필요한 경우 폰트, 색상, 정렬 등의 속성을 설정합니다.
UIImageView와 UILabel을 UIScrollView의 하위 뷰로 추가합니다.
UIImageView와 UILabel의 위치와 크기를 설정하기 위해 Auto Layout 제약 조건을 설정하거나 프레임(frame)을 직접 조정합니다.

다음은 코드로 위 단계를 구현한 예시입니다:

// UIScrollView 생성
let scrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))

// UIImageView 생성
let imageView = UIImageView()
imageView.image = UIImage(named: "your_image_name")
imageView.contentMode = .scaleAspectFit

// UILabel 생성
let label = UILabel()
label.text = "Your label text"
label.font = UIFont.systemFont(ofSize: 16)
label.textAlignment = .center

// UIImageView와 UILabel을 UIScrollView의 하위 뷰로 추가
scrollView.addSubview(imageView)
scrollView.addSubview(label)

// Auto Layout을 사용하여 UIImageView와 UILabel의 위치와 크기를 설정
imageView.translatesAutoresizingMaskIntoConstraints = false
label.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
    imageView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 20),
    imageView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20),
    imageView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -20),
    imageView.heightAnchor.constraint(equalToConstant: 200), // 이미지 뷰의 높이 설정

    label.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 20),
    label.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20),
    label.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -20),
])

// UIScrollView의 contentSize 설정
scrollView.contentSize = CGSize(width: view.frame.width, height: 500) // 필요한 콘텐츠 영역의 크기

// UIScrollView를 화면에 추가
view.addSubview(scrollView)` 

위의 예시 코드에서는 scrollView를 생성한 후 imageView와 label을 생성하여 scrollView의 하위 뷰로 추가합니다. Auto Layout을 사용하여 imageView와 label의 위치와 크기를 설정하고, scrollView의 contentSize를 필요한 콘텐츠 영역의 크기로 설정합니다. 최종적으로 scrollView를 화면에 추가하여 보여줍니다.