2024년 3월 19일 화요일 #1
UIView는 iOS에서 사용되는 기본적인 View component로
다른 UI Component들은 이 UIView를 상속받아서 필요한 기능을 추가하거나 확장한 Component 입니다.
UILabel (텍스트를 표시)
- text: 표시할 문자열
- font: 텍스트의 폰트
- textColor: 텍스트의 색상
- textAlignment: 텍스트의 정렬을 설정 (왼쪽, 가운데, 오른쪽).
- numberOfLines: 텍스트의 표시 줄 수를 설정 (0으로 설정하면 자동으로 줄 바꿈된다)
- lineBreakMode: 텍스트가 너무 길어서 화면에 들어가지 않을 때 줄 바꿈 처리 방법을 설정
// UILabel 생성 및 설정
let label = UILabel()
label.text = "안녕하세요, UILabel 예제입니다."
label.font = UIFont.systemFont(ofSize: 18) // 폰트 크기 설정
label.textColor = UIColor.black // 텍스트 색상 설정
label.textAlignment = .center // 가운데 정렬
label.numberOfLines = 2 // 최대 2줄까지 표시 (0으로 설정하면 자동으로 줄 바꿈)
label.lineBreakMode = .byTruncatingTail // 텍스트가 너무 길 때 끝에 ...을 표시하고 줄 바꿈
UIImageView (이미지를 표시)
- image: 표시할 이미지를 설정. 이 속성에는 UIImage 객체를 할당한다.
- contentMode: 이미지가 UIImageView에 맞춰질 때의 크기 및 배치 방법을 설정. 예를 들어, scaleAspectFit은 이미지를 UIImageView에 맞추고 비율을 유지
- scaleToFill: 이미지가 원래 비율을 무시하고 이미지 뷰의 경계에 맞춰 이미지를 확장
- scaleAspectFit: 이미지의 가로세로 비율을 유지하면서 이미지 뷰에 맞춰 가능한한 많은 공간을 차지하도록 이미지를 확장
- scaleAspectFill: 이미지의 가로세로 비율을 유지하면서 이미지 뷰를 완전히 채우도록 이미지를 확장 (이미지가 잘릴 수 있다.)
- reddraw: 이미지 뷰의 경계가 변경될 때마다 이미지 뷰를 다시 그린다.
- center, top, bottom, left, right, topRight, topLeft, bottomRight, bottomLeft: 이미지를 이미지 뷰의 해당 위치에 배치하고 이미지 크기는 변경되지 않으며 이미지가 이미지 뷰의 경계를 넘을 경우 잘릴 수 있다.
- isUserInteractionEnabled: 사용자 상호 작용을 허용할지 여부를 나타낸다. 기본적으로 false로 설정되어 있어 사용자의 터치 이벤트를 무시.
- animationImages: 애니메이션을 위한 이미지 배열을 설정. 이 배열에 여러 UIImage 객체를 할당하여 애니메이션을 만들 수 있다.
// UIImageView 생성 및 이미지 설정
let imageView = UIImageView()
let image = UIImage(named: "exampleImage") // 이미지 파일명으로 UIImage 객체 생성
imageView.image = image
// 이미지 뷰의 프레임 설정 (위치와 크기)
imageView.frame = CGRect(x: 50, y: 100, width: 200, height: 150)
// contentMode 설정 (이미지가 뷰에 맞춰지는 방법)
imageView.contentMode = .scaleAspectFit // 이미지의 비율을 유지하며 이미지 뷰에 맞춤
UITextField (텍스트를 입력받음)
- text: 텍스트 필드에 표시되는 문자열
- placeholder: 텍스트 필드에 입력을 유도하기 위해 표시되는 플레이스홀더 텍스트를 설정
- keyboardType: 사용자가 텍스트 필드에 입력할 때 표시되는 키보드의 유형을 설정(숫자, 이메일 주소, URL 등)
- isSecureTextEntry: 입력된 텍스트를 숨기기 위해 true로 설정하면, 입력된 텍스트가 마스킹 처리됨.(비밀번호 입력에 사용)
- delegate: 텍스트 필드의 동작을 관리하기 위한 델리게이트 객체를 설정
- returnKeyType: 키보드의 리턴(엔터) 키의 타입을 설정(Done, Go, Search 등)
// UITextField 생성 및 설정
let textField = UITextField()
textField.placeholder = "텍스트를 입력하세요." // 입력 유도 메시지
textField.borderStyle = .roundedRect // 텍스트 필드의 모양 (둥근 테두리)
textField.keyboardType = .default // 일반 텍스트 입력용 키보드
textField.isSecureTextEntry = false // 보안 입력 (비밀번호 등) 여부
textField.returnKeyType = .done // 리턴(엔터) 키의 종류
UIButton (터치하여 상호작용)
- titleLabel: 버튼에 표시되는 텍스트 레이블에 대한 접근을 제공. 버튼의 텍스트나 스타일을 조절하는 데 사용
- setImage(_:for:): 버튼에 이미지를 설정하고 상태에 따라 다른 이미지를 사용할 수 있도록 해준다.
- setTitle(_:for:): 버튼에 텍스트를 설정하고 상태에 따라 다른 텍스트를 사용할 수 있도록 해준다.
- addTarget(_:action:for:): 버튼이 터치되었을 때 실행할 액션을 등록. 이것을 사용하여 버튼의 동작을 정의할 수 있다.
- isEnabled: 버튼이 활성화되었는지 여부를 나타내는 Bool 값. 비활성화된 버튼은 터치 또는 클릭 이벤트를 무시
let button = UIButton(type: .system) // 시스템 스타일의 버튼 생성
button.setTitle("버튼을 눌러보세요", for: .normal) // 버튼에 표시될 텍스트
button.backgroundColor = UIColor.blue // 버튼 배경색 설정
button.setTitleColor(UIColor.white, for: .normal) // 버튼 텍스트 색상 설정
button.frame = CGRect(x: 50, y: 100, width: 200, height: 50) // 버튼의 프레임 설정 (위치와 크기)
// 버튼에 대한 액션 설정 (버튼이 탭되었을 때 실행될 함수)
button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
@objc func buttonTapped() {
print("버튼이 눌렸습니다!")
}
UISwitch (On/Off 상태를 표시하고 전환)
- isOn: 스위치의 현재 상태를 나타낸다
- onTintColor: 스위치가 켜져있을 때의 배경 색상을 설정
- thumbTintColor: 스위치의 썸네일 색상을 설정
// UISwitch 생성 및 설정
let mySwitch = UISwitch()
mySwitch.isOn = true // 스위치 초기 상태 설정
mySwitch.onTintColor = UIColor.green // 켜져있을 때의 배경 색상 설정
mySwitch.thumbTintColor = UIColor.white // 썸네일 색상 설정
// 스위치 상태 변경 이벤트 처리
mySwitch.addTarget(self, action: #selector(switchValueChanged(_:)), for: .valueChanged)
@objc func switchValueChanged(_ sender: UISwitch) {
if sender.isOn {
print("Switch is On")
} else {
print("Switch is Off")
}
}
