- 인터랙티브 씬이란? 사용자의 행위에 대한 이벤트를 발생시키는 컨트롤을 의미한다. 대표적인 예로 버튼, 슬라이더, 세그먼티드 컨트롤, 스위치 등이 있다.
- 컨트롤이란? 사용자 입력에 반응하는 컨텐츠를 의미한다. 뷰의 자식 클래스이다.
- 컨트롤은 사용자 입력에 반응하는 컨텐츠로 이벤트 처리는 코드를 통해서 다루어진다.
- 컨트롤 클래스 : UIControl
- UIControl에서는 컨텐츠 정렬이나 동작가능한 상태여부 등에 대한 프로퍼티와 메소드를 지원한다.
- 컨트롤과 이벤트
- 사용자 이벤트
- 터치하기
- 터치한 채로 컨트롤 영역 내에서 이동
- 터치한 채로 컨트롤 영역 밖으로 이동
- 터치했다가 떼기
- 이벤트 처리
- 이벤트를 처리하는 객체인 타겟과 처리 행위인 액션으로 이루어지며, Storyboard와 코드에서 모두 연결가능하다.
- 타겟 - 액션 - 이벤트 등록/해제 메소드
- 등록 : func addTarget(_ target: Any?, action: Selector, for controlEvent: UIControlEvents)
- 해제 : func removeTarget(_ target: Any?, action: Selector, for controlEvent: UIControlEvents)
- UIControlEvents 값
- touchDown : 컨트롤에 터치가 닿는 이벤트
- touchDragExit : 터치가 컨트롤 밖으로 나가는 이벤트
- touchUpInside : 터치가 내부에 닿았다가 떨어지는 이벤트
- valueChanged : 값이 변경되는 이벤트
- 버튼 다루기
- 버튼은 사용자가 타겟에 누르는 행위(액션)로 이벤트가 발생되는 컨트롤이다.
- 특징
- 사용자의 간단한 행위(누르기)
- 이미지와 글자 출력
- 버튼의 상태별 이미지와 글자
- 속성
- 버튼 타입 : custom(사용자 정의), System(시스템에서 지원), 미리 정의된 형태의 버튼 등의 종류가 있다.
- 버튼 상태별 이름과 이미지로 가능 : 제목만 구성, 이미지로만 구성, 제목과 이미지로 구성
- 글자색과 그림자 색, 위치 선정 가능 : 아래 설정항목에서 변경 가능하다.
- 버튼의 상태와 사용자 동작
- Default : 보통 상태로 사용 가능
- Highlighted : 터치 중인 상태
- Focused : 포커스된 상태
- Selected : 선택된 상태
- Disabled : 사용자 터치 이벤트 동작 안 함
- 코드로 버튼의 속성을 다룰 수 있다.
- 버튼 클래스 : UIButton
- 버튼 타입 : UIButtonType이며, custom, system, detailDisclosure 등 설정가능하다.
- 버튼 생성과 씬에 배치하는 것은 아래와 같이한다.버튼 생성과 씬 배치
// 커스텀 버튼
let customButton = UIButton(frame: CGRect(x: 50, y: 50, width: 100, height: 50))
self.view.addSubview(customButton)
// 미리 정의된 버튼 타입 설정
let infoButton = UIButton(type: .infoLight)
// 버튼 크기는 미리 정해짐
infoButton.center = CGPoint(x: 50, y: 150)
self.view.addSubview(infoButton) - 버튼 상태 설정관련 메소드
- 버튼 이름 : func setTitle(_ title: String?, for state: UIControlState)
- 버튼 이름 색 : func setTitleColor(_ color: UIColor?, for state: UIControlState)
- 버튼 이벤트 다루기
- Storyboard에서 버튼 이벤트 다루기
- 액션 생성 다이얼로그를 이용해서 뷰 컨트롤러에 메소드를 생성한다.
- 생성된 액션 메소드는 @IBAction 키워드가 추가된 메소드이다.
- 버튼에서 어떤 액션이 발생했을 때 메소드를 실행할지는 아래 설정에서 선택할 수 있다.
- 코드로 버튼 이벤트 다루기
- 코드에서 이벤트를 다루는 것은 아래 예제로 설명할 수 있다.코드로 이벤트 다루기
override func viewDidLoad() {
// 버튼 생성 및 씬에 추가
let button = UIButton(frame: CGRectMake(20, 200, 100, 50))
self.view.addSubview(button)
// 버튼의 Touch Up Inside 이벤트 추가
// 타겟 - 액션 - 이벤트
button.addTarget(self, action: #selector(handleClickByCode(_:)), forControlEvents:.touchUpInside)
}
func handleClickByCode(_ sender : Any){
// 발생할 이벤트 처리
print("handleClickByCode")
} - 사용자 선택(변경) 컨트롤
- 사용자 선택을 다루는 컨트롤로 단순 클릭 이벤트보다는 선택된 항목의 변경 시에 이벤트 처리가 이루워진다.
- 사용자 선택 컨트롤은 항목 변경이 발생하는 valueChanged 시에 이벤트 처리를 한다.
- 종류
- 세그먼티드 컨트롤 : 문자와 이미지 기반의 여러 항목 중에 하나를 선택하는 컨트롤이다.
- 형태는 아래와 같다.
- Storyboard에서 세그먼티드 컨트롤 다루기
- 코드로 세그먼티드 컨트롤 다루기
- 세그먼티드 컨트롤 클래스 : UISegmentedControl
- 문자열이나 이미지를 담은 배열을 생성 : init(items : [Any]?)
- 문자열로 생성문자열로 세그먼티드 컨트롤 생성
let items = ["First", "Second", "Third"]
let segmented = UISegmentedControl(items: items)
self.view.addSubview(segmented) - 세그먼티드의 타이틀, 이미지 설정세그먼티드의 타이틀, 이미지 설정
// 타이틀 설정
func setTitle(_ title: String?, forSegmentAt segment: Int)
// 이미지 설정
func setImage(_ image: UIImage?, forSegmentAt segment: Int) - 세그먼티드의 타이틀, 이미지 얻기세그먼티드의 타이틀, 이미지 얻기
// 타이틀 얻기
func titleForSegmentAtIndex(_ segment: Int) -> String?
// 이미지 얻기
func imageForSegmentAtIndex(_ segment: Int) -> UIImage? - 세그먼티드 컨트롤의 이벤트 다루기
- 주요관심 이벤트는 선택항목의 변경으로 항목 변경 이벤트는 valueChanged이다.
- Storyboard에서 이벤트 다루기
- ViewController로 연결
- 코드에서 이벤트 다루기
- addTarget(self, action: #selector(handleSegmentChanged(_:)), forControlEvents: .valueChanged)로 이벤트처리 함수 연결
- 발생한 이벤트 다루기Sender를 이용하여 선택된 이벤트 처리
// 이벤트 처리 부분 구현
func handleSegementChanged(_ sennder: Any) {
let segment = sender as! UISegmentedControl
/* func handleSegementChanged(_ sennder: UISegmentedControl) { */
switch segment.selectedSegmentIndex {
case 0: print("소나기")
case 1: print("천둥,번개")
default: print("맑음")
}
} - 씬의 메뉴 구성
- 툴바와 툴바 내의 버튼
- 툴바: 메뉴를 의미한다.
- 툴바 내의 바 버튼 아이템 : 메뉴 내 항목을 의미한다.
- 아래와 같이 나타낼 수 있다.
- Storyboard에서 툴바 다루기
- 툴바 속성은 아래 설정에서 변경할 수 있다.
- 툴바 내의 바 버튼 아이템은 아래 설정에서 변경할 수 있다.
- 코드로 툴바 다루기
- 툴 바 클래스 : UIToolBar
- 툴 바 내의 바 버튼 아이템 : items 프로퍼티 (var items: [UIBarButtonItem]?)
- 시스템 바 버튼 설정
init(barButtonSystemItem systemItem: UIBarButtonSystemItem, target: Any?, action: Selector?) - 텍스트 기반의 바 버튼 설정
init(title: String?, style: UIBarButtonItemStyle, target: Any?, action: Selector?) - 이미지 기반의 바 버튼 설정
init(image: UIImage?, style: UIBarButtonItemStyle, target: Any?. action: Selector?) - 툴바와 툴 바 버튼 아이템 이벤트 다루기
- Storyboard에서 이벤트 다루기
- ViewController로 연결
- 코드에서 이벤트 다루는 예제툴바, 툴바 내의 바 버튼 이벤트 처리 예제
let toolbar = UIToolbar()
// 이미지 기반의 바 버튼 생성
let image = UIImage(named: "button")!
let imageBarButton = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(handleImageButton(_:)))
// 텍스트 기반의 바 버튼 생성
let tb = UIBarButtonItem(title: "문자열 버튼", style: .plain, target: self, action: #selector(handleEvent))
// 시스템 바 버튼 생성
let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(handleDone))
toolbar.items = [imageBarButton, tb, doneButton]
self.view.addSubview(toolbar) - 액티비티 인디케이터
- 현재 사용자가 발생 시킨 이벤트가 동작 중인지를 알리는 목적의 뷰이다.
- 동작이 완료된 후에는 숨기도록 한다.
- 다른 뷰보다 상위에 배치한다.
- 시작 메소드 : func startAnimating()
- 중지 메소드 : func stopAnimating()
- 시작/중지 상태 확인 메소드 : isAnimating() -> Bool
- 자동 숨기기 프로퍼티 : var hidesWhenStopped: Bool
- Storyboard에서 인디케이터 다루기
- 코드로 액티비티 인디케이터 다루기
- 클래스 : UIActivityIndicatorView -> init(activityIndicatorStyle style: UIActivityIndicatorViewStyle)
- 스타일 : whiteLarge, white, gray
- 스위치를 이용한 액티비티 인디케이터 사용 예제스위치를 활용한 액티비티 인디케이터 사용 예제
func switchChanged(_ sender: AnyObject) {
let onOffSwitch = sender as! UISwitch
if onOffSwitch.isOn {
// 스위치가 켜지면 액티비티 인디케이터 시작
indicator.startAnimating()
} else {
// 꺼지면 액티비티 인디케이터 중지
indicator.stopAnimating()
}
}
