UIkit Basic 1 ( UIViewController, AutoLayout, IBOutlet & IBAction)

1.활용 기술

• Storyboard (UI)

• AutoLayout (UI)

• UILabel (텍스트를 표시하는 label)

• UIButton (버튼을 누를때마다 random 한 text 가 출력 될 수 있게 하는 btn)

2. UI 기초 이론

UIKit

Cocoa touch Framework

• ios 개발환경을 구축하기 위한 최상위 framework 입니다. 그중에서 가장 많이 사용되는것이 UIKit 과 Foundation 입니다

	- Foundation: 가장 기존적인 data type 부터 자료구조, 각종 구조체 timer, network, 파일 관리등 기본적인 프로그램의 중심을 담당합니다

	- UIkit: 사용자의 interface 를 관리하고, event 를 처리하는 주목적으로 사용됩니다. gesture, drawing, animation, 이미지 처리, text 처리 등이 있고, table, slider, button, textfield, alert 창 등 app 화면을 구성하는 것들을 포함하고 있습니다. 자주사용되는 UIViewController, UIView 등 을 사용하려면 UIkit 을 import 해서 사용해야 합니다

Code Structure of a UIKit App

• UIkit 은 기본적으로 MVC model 을 사용하는데, model 은 App 의 data 와 business logic 을 가지고 있고, View 는 사용자에게 data를 보여주는 단계를 말하며, controller 는 model 과 view 의 중간 다리 역활로써 사용자에게 action 을 받아서 model 에 전달 하고, model 의 data 변화를 view 에게 알려주는 역활을 함

UIViewController

UIView

• 화면의 직사각형 영역에 대한 내용을 관리하는 개체를 말합니다. 그래서 UIView 는 여러 component 를 보여주는 용도로 사용함

ViewController

• 앱의 근간을 이루는 객체로써 모든 앱은 하나 이상의 뷰 컨트롤러를 가지고 있습니다. 사용자가 화면을 보는것에 대한 관리 기능을 제공합니다.

ViewController 주요 기능

• 데이터 변화에 따라서 view 컨텐츠 업데이트

• view 들과 함께 사용자 상호작용에 응답

• view 리사이징하고 전체적인 인터페이스의 레이아웃 관리

• 다른 viewController 들과 함께 앱을 구성

AutoLayout

제약조건 (Constraints) 을 이룔하여 뷰의 위치를 지정하는 것을 말합니다. 아이폰의 기종마다 각각의 해상도가 다르기 때문에 그 해상도에 맞게 화면을 같이 보여주기 위해서 autoLayout 을 사용합니다. 새로모드, 가로모드 보기 화면도 지원 합니다

Storyboard

• 사용자 interface 를 시각적으로 표현하여 contents 의 화면과 화면의 연결을 보여주는 도구 입니다. storyboard scene 으로 구성되며, 각각의 scene 은 viewController 와 view 를 나타 냅니다. 화면을 storyboard 를 통해서 만드는 것이라고 보면 됩니다

Add New Constraint

• view 간의 제약 조건을 설정하는것입니다. view 의 height, width 등 다양한 제약조건을 설정할 수 있습니다

Align

• view 간의 정렬을 설정할 수 있는 menu 입니다. 수직, 수평 정렬을 할 수 있습니다

Resolve Auto Layout issues

• Auto Layout 에 관한 issue 를 해결하는 option 을 가리킵니다. 현재 재약조건을 기준으로 view 를 업데이트 하거나, 캔버스 안에 현재 위치에 대한 제약을 update 할 수 있습니다 누락된 제약을 추가, 삭제, 추천하는 제약조건을 사용할 수 있습니다

IBOutlet & IBAction

• UI 에서 code 접근을 하게 해주는것입니다 storyboard 에서 마우스 오른쪽 버튼으로 드래그해서 code 에 연결해서 사용합니다

IBOutlet

• storyboard 에 있는 UI object 를 code 의 변수에 접근할 수 있도록 만들어주는 기능입니다

IBAction

• button 등을 클릭하면 생성되는 action 들의 함수를 만들어서 storyboard 에서 event 처리를 하는것입니다

// 예시 IBoutlet and IBAction

// 랜덤 명언 표시기 예제
import UIKit

class ViewController: UIViewController {
	@IBOutlet weak var quoteLabel: UILabel!
	@IBOutlet weak var namedLabel: UILabel!

	let quotes = [
		Quote(contents: "죽음을 두려워하는 나머지 삶을 시작조차 못하는 사람이 많다", name: "밴다이크"),
		Quote(contents: "나는 나 자신을 빼 놀고는 모두 안다", name: "비용"),
		Quote(contents: "편견이란 실효성이 없는 의견이다", name: "암브로스 빌"),
		Quote(contents: "분노는 바보들의 가슴속에서만 살아간다", name: "아인슈타인"),
		Quote(contents: "몇 번이라도 좋다! 이 끔찍한 생이여.. 다시!", name: "니체"),
	]

	override func viewDidLoad() {
		super.viewDidLoad()
		// Do any additional setup after loading the view.
	}

	@IBAction func tabQuoteGeneratorBtn(_ sender: Any) {
		let random = Int(arc4random_uniform(5)) // 0 ~ 4 사이의 난수를 random 하게 생성
		let quote = quotes[random]
		self.quoteLabel.text = quote.contents
		self.namedLabel.text = quote.name
	}

}

---

🔶 🔷 📌 🔑

Reference

Y3oj4eng’s Blog - https://duwjdtn11.tistory.com/629

Apple Developer docs - https://developer.apple.com/documentation/uikit/uiviewcontroller

fastcampus - https://fastcampus.co.kr/dev_online_iosappfinal