#6 Intro to Controls: Text & Image

Intro

SwiftUI 를 배워보니 UIKit은 옛날 방식 같지 않는가?

이전 챕터에서는 SwiftUI 의 수박 겉핥기였다. 

이번 챕터에서는 UI 개발에서 가장 많이 사용되는 control들을 가지고 작업해볼 것이다.
(UIKit 와 AppKit 에도 있는)

Getting started

Kunchi 라는 language flashcard 앱을 다음 5장 동안 만들어 볼 것이다.

starter 프로젝트를 열어보면 거의 비어있는걸 볼 수 있다.

Welcome 그룹에서 새롭게 SwiftUI view 를 추가한다. (이름: WelcomeView.swift)

Changing rootview

방금 만든 Welcome.swift 라는 SwiftUI view 를 시작점으로 설정해야한다.

SceneDelgate 에서 EmptyView() 를 WelcomeView()로 바꿔준다.

위 코드는 앱이 실행되었을 때 생성되고 보여지는 view 를 정한다. 

Text

입력은 맥락(context) 를 요구한다. 만약 빈 텍스트 입력 창을 보게 될 경우 그게 어떤 목적으로 있는건지 알 수 없기 때문에 text가 중요하다. 맥락을 제공하기 떄문에 UIKit을 사용했던 앱들에서 UILabel 을 엄청 사용했을 것 이다.

글자를 보여주는 컴포넌트 : Text

Modifier

Text 의 modifier

• size
• weight
• color
• italic
• 등등

* modifier 는 view 인스턴스 메서드로써 view 를 복사하여 복사된 view 에 글자색이나 굵기를 적용해서 화면에 표시한다.

여러 modifier 를 적용한 모습

보여지는 화면

*lineLimit default value = nil
*multilineTextAligment default value = .leading

다른 방식으로도 modifier 를 줄 수 있다.

(command + click)

또는 attribute inspector 사용해도 된다.

 

Text는 간단한 컴포넌트지만 많은 modifier들이 있다. 크게 2가지 종류로 나눠볼 수 있는데

• View protocol 에 묶여있는 Modifiers : 모든 view 에 사용 가능
• 특정 type 에만 적용 가능한 modifiers : 말 그대로 특정 인스턴스에만 사용가능

View 는 protocol extension 에 미리 만들어진 수많은 modifier들을 가지고 있는데 그 리스트를 보려면 

option + click 후에 open in developer documentation 에 나와있다.

이렇게 하나씩 찾는게 시간이 너무 오래 걸린다면 Modifier library를 사용하면 된다.

command + shift + l

Modifier들은 효율적인가?

아까도 말했듯이 modifier는 뷰를 복사해서 속성을 적용한 뒤에 보여준다. 그럼 modifier를 적용 할 때마다 copy 가 생긴다는 건데 비효율적이지 않는가? 

SwiftUI는 modifier 를 통해 copy view 가 생성되면 기존 view 를 새로 만들어진 view 에 집어넣는다. (마치 러시아 인형처럼)
view stack을 만드는 recursive process로 볼 수 있다. 
(제일 안쪽에 있는 view 가 원본 view, 제일 바깥쪽이 마지막 modifier가 적용된 view)

직관적으로 자원의 낭비처럼 보이지만 SwiftUI는 이 실제로 view 가 렌더링 될 때 이 stack 을 효과적인 데이터 구조 flatten 시킨다.

리소스 걱정말고 원하는 만큼의 modifier들을 사용해라!

Order of modifiers

modifier의 순서가 view의 표현을 결정한다.

Text("sample text")
    .foregroundColor(.red)
    .bold()

위와 같은 컬러와 bold의 경우 그 순서가 view 에 영향을 주지 않지만

Text("sample text")
    .background(Color.red)
    .padding()

위와 같은 경우 background 색이 칠해지고 padding 이 적용되는 반면 순서를 반대로 하면 padding()을 통해 넓어진 background에 컬러가 입혀지는 걸 볼 수 있다.

padding 없이 background color 를 지정하면 Text 의 경우 글자를 표시하는 최소 범위에 칠해지게 된다.

Image

Image(systemName: "table")

Changing image size

image 를 modifier 없이 사용하게 되면 SwiftUI는 native 해상도와 이미지의 aspect ratio를 유지하며 렌더링 한다. 
위에서 쓴 table 이미지는 SF symbols 에서 가져온 것으로 2019년에 애플에서 만든 아이콘들이다.

resizable modifier 를 사용한다. inset 과 resizing mode 두개의 파라미터를 요구하고 resizing mode 는 .tile 또는 .stretch 이다.

파라미터를 제공하지 않을 경우 SwiftUI 는 모든방향에 대한 inset이 없다고 간주하고 .stretch 로 resizing mode를 결정한다.

*이미지 크기를 직접 또는 간접적으로 변경하는 modifier를 적용하면 해당 변경 사항이 modifier가 적용되는 실제보기에는 적용되지만 이미지 자체에는 적용되지 않고 원래 크기는 유지된다. (copy 개념인듯)

 

 

1. cornerRadius를 준다.
2. 얅은 회색 border 를 준다.
3. 회색 배경색을 추가한다.
4. 원으로 잘라낸다.
5. foreground 컬러를 적용한다.

*clipShape Circle 하기 때문에 corner radius 는 필요없다.

UIKit 보다 훨씬 적은 코드량으로 이미지를 다룰 수 있었다.

Brief overview of stack views

body에 이런식으로 코드를 작성하면 preview 는 두개로 표시된다.

그래서 HStack 으로 감싸주게 되면 하나의 화면으로 표시된다.

More on Image

Image를 사용하여 background image를 Welcome screen 에 만들어 볼 것 이다.

그러기 위해서 ZStack을 사용해야 한다. (view 위에 view 를 얹는 container view)

배경화면을 넣어야 하니 최상위 HStack을 ZStack으로 감싼다.

이미지가 나오긴 하는데 native size 로 좀 보기 싫게 나와서 modifier 를 통해 수정해준다.

• .resizable: 사이즈 조절 가능하게 만든다. 디폴트로 swiftui 는 배치에 상관없이 모든 공간을 원본 비율에 맞게 사용한다.
• scaledToFit: 원본 비율을 유지하며 부모뷰에 꽉 차도록 이미지를 늘린다.
• .aspectRatio: 1:1이 디폴트인데 contentMode 를 .fill로 하며 parent view 에 꽉차게 만든다. (이미지는 view 범위를 벗어날 수 있다.)
• .edgesIgnoringSafeArea: SafeArea inset를 무시한다. view 를 safe area 바깥까지 확장해서 parent space 전체를 차지할 수 있도록 한다. (.all 말고는 top bottom leading trailig, vertical, horizontal 이 있다.)
• .saturation: 채도를 낮춘다.
• .blur: 블러 추가
• opacity: 투명도 추가

 

* scaleToFit 은 필요없는 modifier이다. resizable 과 aspectRatio로 이미 parent view 에 꽉차게 만들었다.

만약 scaledToFit과 aspectRatio의 순서를 바꾼다면 scaledToFit이 앞에 설정된 fill mode를 override 하여 aspectRatio가 필요없게된다. (aspectRatio가 1:1일 경우)

[ScaleToFill documentation]

https://developer.apple.com/documentation/swiftui/view/scaledtofill()

바꾸기 전

 

바꾼뒤

Splitting Text

Welcome text를 더 꾸며보자

하나의 텍스트 뷰를 두개의 vertical 하게 배치한 TextView 로 바꿔보자

단순하게 Text를 복사해서 VStack으로 감싸주었다.

반복되는 modifier를 VStack 에 적용하여 중복을 없앨 수 있다.

container 에 있는 모든 subview 에 대해 공통되는 modifier를 적용하고 싶으면 위와같이 container 에 modifier를 적용하면 된다.

*font 와 bold 의 경우도 중복되는데 왜 VStack 으로 빼지 못했냐면 두 modifier는 Text type이라 View 와 VStack 에 적용될 수 없기 때문이다.

완성된 Welcome 화면

 

Accessibility with fonts

font(.system(size:30))과 같이 absolute size 로 직접 폰트를 지정할 수 있지만 Apple 은 .headline, .largeTitle 과 같은 size classes를 권장한다.

모든 Font 사이즈들은 enum 으로 static 프로퍼티이다. 이런 사이즈 값을 사용하게 되면 시력이 좋지않은 사람들이 폰트를 크거나 작게 줄일때 reference size 에 따라 글자가 조절되게 되어 많은 도움이 된다.

---

Key points

• Text 와 Image를 사용해 보았다.
• modifier를 통해 appearnce 를 바꿔 보았다. 순서가 중요하다.
• container view (VStack, HStack, ZStack) 에 대해서 복습해보았다.

 

참고링크

SwiftUI documentation

Apple Developer Documentation

View reference documentation

Apple Developer Documentation