Text

여러 Component들은 해당 Component의 텍스트를 작성하고 .(dot)으로 그 Component에 대한 속성을 작성해서 UI를 구현한다.

 

Text도 마찬가지로 아래와 같이 구현이 가능하다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .font(.system(size: 30))
            .fontWeight(.heavy)
            .foregroundColor(.green)
            .background(.orange)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

1. 폰트

[정해진 Font와 Font size]

• title / title2 / title3 
• caption / caption2
• headline / subheadline
• body
• largeTitle
• callout

// 사용예시
Text("Hello, world!")
            .font(.body)

---

[system]

• system(size: ) - CGFloat를 입력해서 Font size 조절
• system(_:design: ) - 정해진 Font size와 선택가능한 Font 디자인
• system(_:style: ) - 정해진 Font
• system(size:weight:design)- CGFloat를 입력해서 Font size 조절과 Font 굵기 조절, 선택가능한 Font 디자인

// 사용예시
Text("Hello, world!")
            .font(.system(size: 15))

---

 

[custom] 

• custom(_:size: ) - Font 선택과 Font size 조절
• custom(_:fixedSize: )- Font 선택과 고정된 Font size
• custom(_:size:relativeTo: )- Font 선택과 Font size는 시작값 relativeTo의 값에 따라 크기는 동적으로 변경

// 사용예시
Text("Hello, world!")
            .font(.custom("글꼴", size: 15))

---

 

[FontWeight] - 폰트 굵기

• thin
• ultraLight
• light
• medium
• regualr
• black
• semibold
• bold
• heavy

// 사용예시
Text("Hello, world!")
            .fontWeight(.bold)

 

 

 

2. 정렬

[multilineTextAlingment] - 정렬

• center - 중앙 정렬
• leading - 좌측 정렬
• trailing - 우측 정렬

// 사용예시
Text("Hello, world!")
            .multilineTextAlignment(.trailing)

 

 

 

3. 글자 줄 제한 

[lineLimit]

• lineLimit(nil) - 무제한. (즉, 글자 수가 제한 없는 Text가 된다.
• lineLimit(0) - 1줄
• lineLimit(1) - 1줄
• lineLimit(2) - 2줄
• ... - 숫자가 늘어날 수록 글자 줄은 늘어난다.

// 사용예시
Text("Hello, world!")
            .lineLimit(0)

 

 

 

4. padding

[padding]

• top - 위
• bottom - 아래
• leading - 왼쪽
• trailing - 오른쪽
• all - 전부
• vertical - 위, 아래
• horizontal - 왼쪽, 오른쪽

// 사용예시
var body: some View {
        Text("Hello")
            .padding(.all, 100) // == .padding(100)

💡 padding은 중복이 가능하다. 즉, padding 안에 padding이 가능하다는 말이다. 

또한 중복된 padding은 다른 background 색을 넣을 수 있다. 

 

 

 

5. 둥굴게

cornerRadius() - 각을 둥글게 만듦.

// 사용예시
var body: some View {
        Text("Hello")
            .cornerRadius(20)

 

 

 

 

6. 행간과 자간

lineSpacing() - 글과 글의 간격 

// 사용예시
var body: some View {
        Text("Hello")
            .lineSpacing(20)

---

 

tracking() - 글자와 글자의 간격

// 사용예시
var body: some View {
        Text("Hello")
            .tracking(10)

 

 

 

8. 그림자

shadow(color: , radius: , x: , y: ) - color: 그림자 색, radius: 그림자의 선명도(숫자가 낮을 수록 선명함), x y: 그림자 좌표

// 사용예시
var body: some View {
        Text("Hello")
            .shadow(color: .green, radius: 1, x: 10, y: 12)

기대효과

 

 

 

 

9. truncationMode(글 짤림 설정)

• head - 예시: 여러줄 ~ 마지막줄에서 ...byebyebyebyebye
• middle - 예시: 여러줄 ~ 마지막줄에서 byebye...byebyebye
• tail - 예시: 여러줄 ~ 마지막줄에서 byebyebyebyebye...

 

 

 

10. 문자 출력

[날짜출력]

struct ContentView: View {
    // 날짜 형식
    static let dateFormat: DateFormatter = {
        let formartter = DateFormatter()
        formartter.dateFormat = "YYYY년 MM월 dd일"
        return formartter
    }()
    //오늘의 날짜
    var today = Date()
    
    var body: some View {
        
        Text("오늘은 \(today, formatter: ContentView.dateFormat)")
 
            
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

[Bool 값 출력] - bool 값은 String으로 변환하고 출력해야한다.

import SwiftUI

struct ContentView: View {
    
    var torF = true
    
    var body: some View {
        
        Text("이건 \(String(torF))")
 
            
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}