[iOS/SwiftUI] Text, Image 기본 정리 + 시스템 이미지

✍️ Text

Text 는 한줄 이상의 읽기 전용 글자를 표현하기 위한 View 입니다.

 

Text initializer

Text 생성자는 여러가지가 있는데, 이미지로도 생성할 수 있는게 UIKit 과는 다른거 같아요. NSAttributedString 을 사용하면 가능하긴 했지만, 기본적으로 이미지를 텍스트와 연결할 수 있게 제공해주네요.

• init(String) → 단순 문자열, Localized 관련 생성자도 따로 있어요.
• init(AttributedString) → NSAttributedString 이랑 다릅니다. (+iOS15)
• init(Image) → 다른 Text 들이랑 연결하기위한 Image
• init(_ date: Date, style: Text.DataStyle)
  • Text.DataStyle : date, offset, relative, time, timer 등 스타일

 

Text 스타일 설정 메소드

• font(Font?) : Font 구조체에 정의된 title, caption 등의 기본 폰트와 시스템 폰트, 커스텀 폰트 등 설정할 수 있다.
• fontWeight(Font.Weight?) : black, bold, light, medium, regular 등 폰트의 굵기에 대한 설정
• foregroundColor(Color?) : 텍스트 색상
• bold(), italic() : 굵기, 기울임
• strikethrough(Bool, color: Color?), underline(Bool, color: Color?) : 취소선, 밑줄
• monospacedDigit() : 글자와 숫자의 너비를 동일하게 설정
• kerning(CGFloat), tracking(CGFloat) : 자간 관련 .. 둘 다 적용한다면 kerning 무시 tracking 만 적용된다.
• textCase(Text.Case?) : 소문자 또는 대문자만 적용가능하도록 한다.

 

Handling Multiline Text

• lineLimit(Int?) : Int 값으로 길이 제한, 설정하지 않을 경우 기본값은 nil 로 길이는 무제한으로 설정된다.
• lineSpacing(CGFloat) : 행간을 설정할 수 있다.
• multilineTextAlignment(TextAlignment) : 여러줄일때 텍스트의 정렬(center, leading, trailing)을 설정한다.

---

🖼 Image

Image 는 이미지를 보여주기위한 View 입니다.

 

PNG, JPEG, HEIC 등의 이미지 파일을 앱 내에 asset 또는 bundle 로 저장하면, Image 타입으로 이미지를 보여줄 수 있어요. Image 는 기존의 UIImage, NSImage 와 같은 플랫폼별 이미지 타입의 instance 입니다. UIImage 는 UIKit 이미지 타입으로, 해당 이미지 타입에서 변환하는 생성자를 제공하네요.

 

Image initializer

• init(String, bundle: Bundle?) : asset 폴더에 저장한 이미지 이름을 지정해 이미지를 생성한다.
• init(String, bundle: Bundle?, label: Text) : 위와 동일하지만, label 을 지정해 접근성 제공시 사용할 수 있다.
• init(systemName: String) : 시스템에서 제공하는 이미지인 SF Symbols 을 사용할 수 있다.
• init(uiImage: UIImage) : UIKit 이미지 타입인 UIImage 을 Swift 이미지 타입인 Image 로 변환한다.

 

Image resizable & aspectRatio

Image 에 frame 으로 크기를 설정하더라도 기본적으로 원본 비율과 크기를 유지하고, resizable 메소드를 설정해줘야만 Image 비율이 재설정돼요.

 

아래 캡쳐에서 resizable() 메소드를 적용하지 않은 이미지는 frame 을 벗어난 걸 보실 수 있어요 👀 resizable() 메소드를 적용하면 frame 에 딱맞게 사이즈가 재조정됩니다. resizable 메소드만 적용하면 이미지 비율이 유지되지 않기에 늘어져 보입니다.

 

aspectRatio 메소드를 통해 content mode 를 지정해서 이미지 원본의 비율에 맞게 설정할 수 있어요. fit 은 frame 내부에 맞게 조절되고, fill 은 frame 의 최대에 맞게 조절됩니다. 

 

해당 문서에 Fitting Image 에 대해 좀 더 자세히 적혀있고, 상황에 맞게 사용하면 될 것 같아요!

https://developer.apple.com/documentation/swiftui/fitting-images-into-available-space

---

🔗 참고 문서

• Text https://developer.apple.com/documentation/swiftui/text
• Image https://developer.apple.com/documentation/swiftui/image
• SF Symbols https://developer.apple.com/sf-symbols/