[iOS] UIViewController, UIView 컴포넌트 이해하기

 

UIViewController, UIView의 개념

그리고 다양한 UIView 컴포넌트에 대해 학습해 보자.

 

---

📍UIViewController란?

• UIKit 앱의 View 계층을 관리하는 개체(object)
• UIViewController 클래스: UILabel, UIButton, UIImageView 등과 같은 다양한 UIView 요소들을 포함하고, 관리(제어)할 수 있다.
• 모든 UIViewController는 하나의 Root View를 가지고 있으며, UIView요소를 포함한다.

 

📍UIView란?

• 화면을 구성하는 기본 객체(object)
• 사용자 인터페이스를 구성하는 데 중요한 역할을 하는 클래스
• UIView 클래스는 화면에 보이는 모든 요소의 기본 클래스이며, 버튼, 레이블, 이미지, 입력 필드 등의 요소들은 모두 UIView의 하위 객체(object)들이다.

 

 

📍다양한 UIView 컴포넌트

UIView 컴포넌트는 매우 다양하다. 또한 속성도 다양하기에 

 

1) UILabel

• 텍스트를 표시하는 데 사용되는 UI 요소
• 주요 속성을 활용한 예제 코드

 

 

2) UIImageView

• 이미지를 표시하는데 사용되는 UI 요소

• Assets에 파일 추가
• 인스펙터 영역에서 Scale 설정 가능하다. 각 이미지 파일에 따라 적절한 파일 형식을 설정할 것!

✔️ UIImageView 주요 속성

• image: 표시할 이미지를 설정한다. 이 속성에는 UIImage 객체를 할당한다.
• contentMode: 이미지가 **UIImageView**에 맞춰질 때의 크기 및 배치 방법을 설정한다.
  
  • scaleToFill: 이미지가 원래 비율을 무시 & 이미지 뷰의 경계에 맞춰 이미지를 확장
  • scaleAspectFit: 이미지의 가로세로 비율을 유지 & 이미지 뷰에 맞춰 가능한 한 많은 공간을 차지하도록 이미지를 확장
  • scaleAspectFill: 이미지의 가로세로 비율을 유지 &  꽉 채움 (이미지가 잘릴 수 있습니다.)
  • reddraw: 이미지 뷰의 경계가 변경될 때마다 이미지 뷰를 다시 그린다.
  • center, top, bottom, left, right, topRight, topLeft, bottomRight, bottomLeft: 이미지를 이미지 뷰의 해당 위치에 배치하고 이미지 크기는 변경되지 않으며 이미지가 이미지 뷰의 경계를 넘을 경우 잘릴 수 있다.
• isUserInteractionEnabled: 사용자 상호 작용을 허용할지 여부를 나타낸다. 기본적으로 false로 설정되어 있어 사용자의 터치 이벤트를 무시한다.
• animationImages: 애니메이션을 위한 이미지 배열을 설정한다. 이 배열에 여러 UIImage 객체를 할당하여 애니메이션을 만들 수 있다.

 

 

3) UITextField

• 사용자로부터 텍스트를 입력받기 위해 사용되는 UI 요소

✔️ UITextField 주요 속성

• text: 텍스트 필드에 표시되는 문자열
• placeholder: 텍스트 필드에 입력을 유도하기 위해 표시되는 플레이스홀더 텍스트를 설정
• keyboardType: 사용자가 텍스트 필드에 입력할 때 표시되는 키보드의 유형을 설정 (숫자, 이메일 주소, URL 등)
• isSecureTextEntry: 입력된 텍스트를 숨기기 위해 true로 설정하면, 입력된 텍스트가 마스킹 처리(보통 비밀번호 입력에 사용)
• delegate: 텍스트 필드의 동작을 관리하기 위한 델리게이트 객체를 설정
• returnKeyType: 키보드의 리턴(엔터) 키의 타입을 설정 (Done, Go, Search 등)

 

 

4) UIButton

• 사용자가 터치하여 상호작용할 수 있는 UI 요소

✔️ UIButton의 주요 속성

• titleLabel: 버튼에 표시되는 텍스트 레이블
• setImage(_:for:): 버튼에 이미지를 설정하고 상태에 따라 다른 이미지를 사용할 수 있도록 한다.
• setTitle(_:for:): 버튼에 텍스트를 설정하고 상태에 따라 다른 텍스트를 사용할 수 있도록 한다.
• addTarget(_:action:for:): 버튼이 터치되었을 때 실행할 액션을 등록하고 이것을 사용하여 버튼의 동작을 정의할 수 있다.
• isEnabled: 버튼이 활성화되었는지 여부를 나타내는 부울 값으로 비활성화된 버튼은 터치 또는 클릭 이벤트를 무시한다.

 

 

5) UISwitch

• On/Off 상태를 표시하고 전환하는데 사용되는 UI 요소

✔️ UISwitch의 주요 속성

• isOn: 스위치의 현재 상태
• onTintColor: 스위치가 켜져 있을 때의 배경 색상 설정
• thumbTintColor: 스위치의 썸네일 색상을 설정
• onImage/ offImage 프로퍼티 사라짐: 스위치 디자인 일정하고 간단하게 유지하려는 애플의 의도 -> 커스텀 스위치 사용하기

 

 

6) UISlider

• 값의 범위를 가지고 사용자가 원하는 값을 선택할 수 있는 UI 요소

✔️ UISlider의 주요 속성

• value: 슬라이더의 현재 값
• minimumValue: 슬라이더의 최소값을 설정
• maximumValue: 슬라이더의 최대값을 설정
• minimumTrackTintColor: 슬라이더의 왼쪽 트랙 색상을 설정
• maximumTrackTintColor: 슬라이더의 오른쪽 트랙 색상을 설정
• thumbTintColor: 슬라이더의 썸네일 색상을 설정

 

 

7) UISegmentedControl

• 여러 개의 세그먼트로 구성된 컨트롤로, 각 세그먼트를 선택하여 원하는 옵션을 선택할 수 있는 UI 요소

✔️ UISegmentedControl의 주요 속성

• selectedSegmentIndex: 현재 선택된 세그먼트의 인덱스
• numberOfSegments: 세그먼트의 개수
• tintColor: 세그먼트 컨트롤의 색상을 설정
• isMomentary: 세그먼트가 선택되었을 때 선택 표시를 유지할지 여부를 설정

let datas = ["Option 1", "Option 2", "Option 3"]

• 세그먼트를 전역변수로 선언하여 사용해줬다.

 

 

8) UIScrollView 

• UIScrollView는 화면에서 스크롤 가능한 영역을 제공하는 UI 요소

✔️ UIScrollView의 주요 속성

• contentSize: 스크롤 영역의 크기! 이 값이 UIScrollView의 프레임 크기보다 크면 스크롤이 가능하다.
• contentOffset: 스크롤 뷰의 현재 스크롤 위치
• contentInset: 스크롤 뷰의 컨텐츠와 뷰 사이의 여백을 설정
• isScrollEnabled: 스크롤 기능을 활성화 또는 비활성화 여부
• isPagingEnabled: 페이지 기능을 활성화/비활성화 여부. 활성화되면 스크롤 시 한 페이지씩 이동되며 기본값은 false이다.
• bounces: 스크롤 뷰가 컨텐츠의 경계에 도달했을 때 바운스 효과를 활성화/비활성화 여부

 

 

9) UIPickerView 

• 사용자가 여러 개의 옵션 중 하나를 선택할 수 있는 회전 가능한 휠 형식의 UI 요소

✔️ UIPickerView의 주요 속성

• dataSource: UIPickerView의 데이터를 제공하는 객체를 설정
• delegate: UIPickerView의 이벤트를 처리하는 객체를 설정
• numberOfComponents: UIPickerView에서 표시할 구성 요소의 수를 반환
• selectedRow(inComponent:): 지정된 구성 요소에서 선택된 행의 인덱스를 반환

 

잠깐, 사용하기 전 알아둘 점!

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource

• ViewController클래스에 UIPickerViewDelegate, UIPickerViewDataSource 프로토콜 채택하기
  → dataSource와 delegate를 자기 자신으로 설정할 수 있음!
• 담아줄 데이터 설정하기
• delegate, dataSource를 self : 해당 데이터나 이벤트 처리 객체를 ViewController으로 지정 및 설정한다는 의미
• delegate: 위임하여 어떤 이벤트를 처리하는 역할

 

 

 

 

10) UITableView

• UITableView는 데이터 목록을 표시하고 사용자와 상호 작용할 수 있는 스크롤 가능한 UI 요소

✔️ UITableView의 주요 속성

• dataSource: UITableView의 데이터를 제공하는 객체를 설정
• delegate: UITableView의 이벤트를 처리하는 객체를 설정
• rowHeight: 각 행의 높이를 설정
• separatorStyle: 행 간 구분선의 스타일을 설정
• separatorColor: 행 간 구분선의 색상을 설정
• allowsSelection: 테이블 뷰에서 행 선택을 허용할지 여부를 설정

 

잠깐, 사용하기 전 알아둘 점!

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate

• 위의 UIPickerView와 마찬가지로 UITableViewDataSource, UITableViewDelegate 프로토콜 채택하기
• section: 테이블뷰의 section을 나타내는 식별자
• indexPath: 테이블뷰에서 Row(행)을 찾는 경로

 

 

11) UIConllectionView

• UICollectionView는 유연한 그리드 레이아웃을 사용하여 아이템 목록을 표시하고 사용자와 상호 작용할 수 있는 스크롤 가능한 UI 요소

✔️ UICollectionView의 주요 속성

• dataSource: UICollectionView의 데이터를 제공하는 객체를 설정
• delegate: UICollectionView의 이벤트를 처리하는 객체를 설정
• collectionViewLayout: UICollectionView의 레이아웃을 설정
• allowsSelection: 컬렉션 뷰에서 셀 선택을 허용할지 여부를 설정
• allowsMultipleSelection: 여러 셀을 동시에 선택할 수 있는지 여부를 설정

 

잠깐, 사용하기 전 알아둘 점!

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout

• UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout  프로토콜 채택하기
• section: 테이블뷰의 section을 나타내는 식별자
• indexPath: 테이블뷰에서 Row(행)을 찾는 경로

 

---

 

⭐️ UI 연습 꿀팁: Preview 사용하기

🔗참고문서

#Preview {
  ViewController()
}

VC하단에 이렇게 작성하면 Command + R 안하고도 미리보기 가능하다. 

preview는 화면 업데이트 할 때 : "command+option+p"

잡담방에서 어떤 분께서 알려주셨는데 너무 유용하다 😆

 

 

🗯️ 느낀 점

UI 컴포넌트와 그 속성들에 익숙해지려고 연습하며 정리했다.

몰랐던 컴포넌트 사용에 대한 두려움과 어려움이 있었지만 막상 속성을 공부하고 코드를 작성하며 실행해보니 어렵지 않고 어색할 뿐이었다. 더 연습하면 연습할수록 익숙해질 것이니 많이 접해보고 사용해보자!