(핵심만 골라 배우는) SwiftUI 기반의 iOS 프로그래밍을 읽으며, 실습 및 이론을 적은 글입니다.
UIKit는 SwiftUI가 나오기 전, ios 앱들은 UIKit와 UIKit 기반의 프레임워크를 이용하여 개발되었다. 당연한 얘기겠지만, XCode 플레이그라운드 안에서 UIKit을 사용할 수 있다.
플레이그라운드 페이지에서 UIKit으로 작업할 때에는 IOS UIKit 프레임워크를 임포트해야한다.
아래 코드의 경우, UIKit 프레임워크를 임포트하고 색상과 텍스트 그리고 폰트 속성을 설정한 UILable 인스턴스를 생성하는 코드입니다.
import UIKit
let myLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
myLabel.backgroundColor = UIColor.red
myLabel.text = "Hello Swift"
myLabel.textAlignment = .center
myLabel.font = UIFont(name: "Georgia", size: 24)
이 예제 코드를 작성하고, 실행하면서 가장 신기했던 것은 퀵 룩이라는 기능이다.
퀵 룩이란 코드 줄에 있는 기능인데. 이 버튼을 클릭하면 각각의 줄에 실행된 결과를 볼 수 있는 기능이다.
위에 사진을 보면 Label에 Color를 입혔을 때와 그 다음 줄에 Text를 넣었을 때 등
한 줄 한 줄의 결과를 볼 수 있다.
플레이그라운드에 리소스 추가하기
플레이그라운드에서 리소스를 추가해 아래처럼 갖고오는 방법
왼쪽 리소스에 원하는 이미지를 넣고, 오른쪽에 UIImage를 통해 원하는 이미지 이름을 넣어 갖고온다.
퀵 뷰를 통해 원하는 이미지가 들어온 것을 확인할 수 있다.
플레이그라운드에서 향상된 라이브뷰로 작업하기
퀵 뷰와 인라인 기능을 이용하여 정적 사용자 인터페이스 요소를 표시하는 것이었다.
하지만, XCode의 향상된 라이브 뷰 기능을 이용하면 플레이그라운드에서 동적 사용자 인터페이스 동작을 테스트할 수 있다.
라이브 뷰에 PlaygroundSupport 모듈 임포트 진행
PlaygroundSupport 모듈은 플레이그라운드 타임라인 내에서 동적으로 뷰를 보여주는 기능을 포함한 여러 기능을 플레이그라운드에 제공한다.
import UIKit
import PlaygroundSupport
let container = UIView(frame: CGRect(x: 0, y:0, width: 200, height:200))
//: 흰색 배경 할당
container.backgroundColor = UIColor.white
let square = UIView(frame: CGRect(x: 50, y:50, width: 100, height: 100))
PlaygroundPage.current.liveView = container
//: 중앙 위치하도록 작은 뷰 생성.
square.backgroundColor = UIColor.red
//: 두 번째로 생성한 뷰를 컨테이너의 하위 뷰로 추가한다.
container.addSubview(square)
//: 두 번째 뷰의 색을 파란색으로 변경하면서, 5초동안 180도로 회전하도록 하는 애니메이션이 사용된다.
UIView.animate(withDuration: 5.0, animations: {
square.backgroundColor = UIColor.blue
let rotation = CGAffineTransform(rotationAngle: 3.14)
square.transform = rotation
})
해당 코드를 작성 후, 실제로 실행을 하면
라이브의 형태로 보이는 것을 확인할 수 있다.
플레이그라운드는 스위프트 코드를 입력하고, 그 결과를 동적으로 볼 수 있는 환경을 제공한다.
플레이그라운드는 XCode 프로젝트를 생성하여 빌드, 실행을 반복하지 않아도 스위프트 프로그래밍 언어를 배우거나 ios SDK에 포함된 여러 클래스와 API를 실험해볼 수 있는 환경을 제공한다.
