[231211] Today I Learned

앱개발 입문

UIView Component

1. UILabel : 텍스트를 표시하는데 사용되는 UI 요소

label.text = "UI Label 예제"
label.font = UIFont.systemFont(ofSize: 18) // 폰트 크기 설정
label.textColor = UiColor.black // 텍스트 색상 설정
label.textAlignment = .center // 가운데 정렬
label.numberOfLines = 2 // 최대 2줄까지 표시 (0으로 설정하면 자동으로 줄 바꿈)
label.lineBreakMode = .byTruncatingTail // 텍스트가 너무 길 때 끝에 ...을 표시하고 줄 바꿈

2. UIImageView : 이미지를 표시하는 데에 사용되는 UI 요소

// 가장 기본적으로 이미지를 사용하는 방법의 예시
// 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 // 이미지의 비율을 유지하며 이미지 뷰에 맞춤

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

let textField = UITextField()

textField.text // 텍스트 필드에 표시되는 문자열
textField.placeholder // 텍스트 필드에 입력을 유도하기 위해 표시되는 플레이스홀더 텍스트 설정
textField.keyboardType // 사용자가 텍스트 필드에 입력할 때 표시되는 키보드 유형
textField.isSecureTextEntry // 입력된 텍스트를 숨기기 위해 설정하는 속성
textField.returnkeyType // 키보드의 리턴(엔터)키의 타입을 설정

4. UIButton : 사용자가 터치하여 상호작용할 수 있는 UI 요소

let button = UIButton(type: .system) // 시스템 스타일의 버튼 생성
button.setTitle("버튼을 눌러보세요", for: .normal) // 버튼에 표시될 텍스트
button.backgroundColor(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("버튼이 눌렸습니다!")
}

5. UISwitch : ON/OFF 상태를 표시하고 전환하는데 사용되는 UI 요소

// UISwitch 생성 및 설정
let mySwitch = UISwitch()
mySwitch.isOn = true // 스위치 초기 상태 설정
mySwitch.onTintColor = UIColor.green // 켜져있을 때의 배경 색상 설정
mySwitch.thumbTintColor = UIColor.white // 썸네일 색상 설정
mySwitch.onImage = UIImage(named: "onImage") // 켜져있을 때 표시되는 이미지 설정 (선택사항)
mySwitch.offImage = UIImage(named: "offImage") // 꺼져있을 때 표시되는 이미지 설정 (선택사항)

// 스위치 상태 변경 이벤트 처리
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.")
    }
}

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

// UISlider 생성 및 설정  
let slider = UISlider()  
slider.value = 50 // 슬라이더 초기 값 설정  
slider.minimumValue = 0 // 슬라이더의 최소값 설정  
slider.maximumValue = 100 // 슬라이더의 최대값 설정  
slider.minimumTrackTintColor = UIColor.red // 왼쪽 트랙 색상 설정  
slider.maximumTrackTintColor = UIColor.blue // 오른쪽 트랙 색상 설정  
slider.thumbTintColor = UIColor.white // 썸네일 색상 설정  
  
// 슬라이더 값 변경 이벤트 처리  
slider.addTarget(self, action: #selector(sliderValueChanged(_:)), for: .valueChanged)  
  
@objc func sliderValueChanged(_ sender: UISlider) {  
    print("Slider value: \(sender.value)")  
}

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

// UISegmentedControl 생성 및 설정  
let items = ["Option 1", "Option 2", "Option 3"]  
let segmentedControl = UISegmentedControl(items: items)  
segmentedControl.selectedSegmentIndex = 0 // 초기 선택된 세그먼트 인덱스 설정  
segmentedControl.tintColor = UIColor.blue // 세그먼트 컨트롤 색상 설정  
segmentedControl.isMomentary = false // 선택 표시를 유지할지 여부 설정  
  
// 세그먼트 값 변경 이벤트 처리  
segmentedControl.addTarget(self, action: #selector(segmentValueChanged(_:)), for: .valueChanged)  
  
@objc func segmentValueChanged(_ sender: UISegmentedControl) {  
    print("Selected segment index: \(sender.selectedSegmentIndex)")  
}

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

// UIScrollView 생성 및 설정
let scrollView = UIScrollView(frame: view.bounds)  
scrollView.contentSize = CGSize(width: view.frame.width, height: view.frame.height * 2)  
scrollView.isScrollEnabled = true  
scrollView.isPagingEnabled = false  
scrollView.bounces = true

// 스크롤 뷰에 추가할 UILabel  
let label = UILabel(frame: CGRect(x: 0, y: view.frame.height - 30, width: view.frame.width, height: 60))  
label.text = "Hello, UIScrollView!"  
label.textAlignment = .center
scrollView.addSubview(label)

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

import UIKit  
  
// UIPickerView를 사용하려면, UIPickerViewDelegate, UIPickerViewDataSource 두 가지의 프로토콜을 반드시 채택해야 함
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {  
      
    let pickerView = UIPickerView()  
    let data = ["Option 1", "Option 2", "Option 3"]  
      
    override func viewDidLoad() {  
        super.viewDidLoad()  
          
        pickerView.delegate = self  
        pickerView.dataSource = self  
        pickerView.center = view.center  
        view.addSubview(pickerView)  
    }  
      
    // UIPickerViewDataSource  

		/* [필수] Component 수를 보고합니다. */
		// Component는 섹션의 개념과 유사합니다. UIPickerView는 여러 열(구성 요소)을 가질 수 있습니다.
    func numberOfComponents(in pickerView: UIPickerView) -> Int {  
        return 1  
    }  
    
		/* [필수] component에 따른 행 수를 보고합니다. */
		// component: 0부터 시작합니다.
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {  
        return data.count  
    }  
      
    // UIPickerViewDelegate  
		
		/* row와 component조합으로 표시될 선택지를 return합니다. */
		// row: 0부터 시작합니다.
		// component: 0부터 시작합니다.
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {  
        return data[row]  
    }  
      
		/* 선택지가 선택되었을 때 호출 */
	  // row: 0부터 시작합니다. / 선택된 row
		// component: 0부터 시작합니다. / 선택된 component
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {  
        print("Selected: \(data[row])")  
    }  
}