Swift程式設計[第2單元]: SwiftUI

// 2-1a 我愛你(Text)
// Created by Heman, 2021/08/03
import PlaygroundSupport
import SwiftUI

struct 我愛你: View {
    var body: some View {
        Text("I ❤️ U")
            .font(.title)
    }
}

PlaygroundPage.current.setLiveView(我愛你())

① import PlaygroundSupport
⑥ PlaygroundPage.current.setLiveView(我愛你())

② import SwiftUI

③ struct 我愛你: View {
④     var body: some View {
⑤         Text("I ❤️ U")
               .font(.title)
    }
}

struct 我愛你: View { } 

var body: some View { } 

        Text("I ❤️ U")
            .font(.title)

 .largeTitle
 .title
 .title2
 .title3
 .headline
 .subheadline
 .body
 .callout
 .caption
 .caption2

// 2-1b 我愛你(Text)
// Revised by Heman, 2021/08/04
import PlaygroundSupport
import SwiftUI

struct 我愛你: View {
    var body: some View = Text("I ❤️ U").font(.title)
}

var 情書 = 我愛你()
PlaygroundPage.current.setLiveView(情書)

// 2-1c 我愛你(Text)
// Revised by Heman, 2021/08/04
import PlaygroundSupport
import SwiftUI
PlaygroundPage.current.setLiveView(Text("I ❤️ U").font(.title))

// 2-1d 你愛我嗎(Text)
// Created by Heman, 2021/08/03
import PlaygroundSupport
import SwiftUI

let 各國文字 = [
    "Do you love me?", 
    "Est-ce que tu m'aimes?", 
    "តើអ្នកស្រលាញ់ខ្ញុំទេ?", 
    "私を愛していますか？", 
    "Ты любишь меня?", 
    "당신은 나를 사랑합니까?", 
    "എന്നെ ഇഷ്ടമാണോ?", 
    "Дали ме сакаш?",
    "ትወጂኛለሽ?",
    "Გიყვარვარ?",
    "Bạn có yêu tôi không?",
    "Դու սիրում ես ինձ?",
    "אתה אוהב אותי?",
    "هل تحبني؟",
    "👩🦰💕🧑🦰?"]

var 國際版 = ""
for 字串 in 各國文字 {
    國際版 = 國際版 + 字串 + "\n"
}

struct 你愛我嗎: View {
    var body: some View {
        Text(國際版)
            .font(.largeTitle)
            .foregroundColor(.blue)
    }
}

print(國際版)
PlaygroundPage.current.setLiveView(你愛我嗎())

var 國際版 = ""
for 字串 in 各國文字 {
    國際版 = 國際版 + 字串 + "\n"
}

struct 你愛我嗎: View {
    var body: some View {
        Text(國際版)
            .font(.largeTitle)
            .foregroundColor(.blue)
    }
}

        Text(國際版)
            .font(.largeTitle)
            .foregroundColor(.blue)

// 2-2a 顯示圖片(Image)
// Revised by Heman, 2021/08/05
import PlaygroundSupport
import SwiftUI

struct 相框: View {
    var body: some View {
        Image(uiImage: UIImage(named: "IMG_8935.jpg")!)
            .resizable()
    }
}

PlaygroundPage.current.setLiveView(相框())

        Image(uiImage: UIImage(named: "IMG_8935.jpg")!)
            .resizable()

1. Image 需要一個「照片物件」當作參數，在此沿用 UIKit 的照片物件： UIImage(named: "檔案名稱")
   
2. UIImage()! 後面有個驚嘆號，這表明 UIImage 物件可能會初始化失敗，是個 Optional 類型（參考第1單元第9課），在此必須加上 ! 來強制取用。
   
3. 圖片的修飾語跟文字當然有所不同，在這裡用 resizable() 配合螢幕調整圖片大小。

struct 名稱: View {
    var body: some View { }
}

// 2-2b 照片二選一
// Revised by Heman, 2021/08/05
import PlaygroundSupport
import SwiftUI

struct 相框: View {
    var 檔名: String
    init(_ p: String) {
        檔名 = p
    }
    var body: some View {
        Image(uiImage: UIImage(named: 檔名)!)
            .resizable()
            .scaledToFit()
    }
}

let 風景 = 相框("unsplash01.jpg")
let 人物 = 相框("unsplash02.jpg")
let 偶數秒 = Int(Date().timeIntervalSinceReferenceDate) % 2 == 0
var 選擇 = 偶數秒 ? 人物 : 風景
PlaygroundPage.current.setLiveView(選擇)

    init(_ p: String) {
        檔名 = p
    }

        Image(uiImage: UIImage(named: 檔名)!)
            .resizable()
            .scaledToFit()

Int(Date().timeIntervalSinceReferenceDate) % 2 == 0

var 選擇 = 偶數秒 ? 人物 : 風景

1. 用網路圖片來創作要注意其著作權的使用範圍，自己練習的話，用手機隨手拍張照片最方便。
   
2. Unsplash 是一個提供自由授權照片的網站，其授權說明如下：
   https://unsplash.com/license
   License
   Unsplash photos are made to be used freely. Our license reflects that.
   
   All photos can be downloaded and used for free
   Commercial and non-commercial purposes
   No permission needed (though attribution is appreciated!)
   
   What is not permitted 👎
   Photos cannot be sold without significant modification.
   Compiling photos from Unsplash to replicate a similar or competing service.

// 2-2c View 修飾語
// Created by Heman, 2021/08/06
import PlaygroundSupport
import SwiftUI

struct 標示: View {
    var body: some View {
        Text("こんにちは！\n我的名字叫莎莎")
            .font(.system(size: 36))
            .multilineTextAlignment(.center)
            .offset(y: 150)
            .blur(radius: 2)
    }
}

struct 相框: View {
    var 檔名: String
    init(_ p: String) {
        檔名 = p
    }
    var body: some View {
        Image(uiImage: UIImage(named: 檔名)!)
            .resizable()
            .scaledToFit()
    }
}
let 組合 = 相框("IMG_8935.jpg").overlay(標示())
PlaygroundPage.current.setLiveView(組合)

        Text("こんにちは！\n我的名字叫莎莎")
            .font(.system(size: 36))
            .multilineTextAlignment(.center)
            .offset(y: 150)
            .blur(radius: 2)

let 組合 = 相框("IMG_8935.jpg").overlay(標示())

// 2-3a HStack/VStack
// Created by Heman, 2021/08/07
import PlaygroundSupport
import SwiftUI

struct 標示: View {
    var 標語: String
    init(_ p: String) { 標語 = p }
    var body: some View {
        Text(標語)
            .font(.system(size: 36))
            .multilineTextAlignment(.center)
            .shadow(color: .yellow, radius: 2, x: 0, y: 0)
            .blur(radius: 1)
    }
} 

struct 相框: View {
    var 檔名: String
    init(_ p: String) { 檔名 = p }
    var body: some View {
        Image(uiImage: UIImage(named: 檔名)!)
            .resizable()
            .scaledToFit()
    }
}

struct 圖文組合: View {
    var body: some View {
        VStack {
            相框("IMG_8935.jpg")
                .cornerRadius(30)
                .padding()
                .border(Color.red)
            標示("こんにちは！\n我的名字叫莎莎")
                .border(Color.red)
        }
    }
}
PlaygroundPage.current.setLiveView(圖文組合())

        Text(標語)
            .font(.system(size: 36))
            .multilineTextAlignment(.center)
            .shadow(color: .yellow, radius: 2, x: 0, y: 0)
            .blur(radius: 1)

        Image(uiImage: UIImage(named: 檔名)!)
            .resizable()
            .scaledToFit()

        VStack {
            相框("IMG_8935.jpg")
                .cornerRadius(30)
                .padding()
                .border(Color.red)
            標示("こんにちは！\n我的名字叫莎莎")
                .border(Color.red)
        } 

            相框("IMG_8935.jpg")
                .padding()
                .cornerRadius(30)
                .border(Color.red)

// 2-3b 版面設計
// Created by Heman, 2021/08/07
import PlaygroundSupport
import SwiftUI

struct 標示: View {
    var 標語: String
    init(_ p: String) { 標語 = p }
    var body: some View {
        Text(標語)
            .font(.system(size: 28))
            .multilineTextAlignment(.center)
            .shadow(color: .yellow, radius: 2, x: 0, y: 0)
            .blur(radius: 1)
    }
}

struct 相框: View {
    var 檔名: String
    init(_ p: String) { 檔名 = p }
    var body: some View {
        Image(uiImage: UIImage(named: 檔名)!)
            .resizable()
            .scaledToFit()
            .cornerRadius(20)
            .shadow(color: .gray, radius: 2, x: 5, y: 5)
            .padding()
    }
}

struct 版面: View {
    var body: some View {
        VStack {
            HStack {
                標示("こんにちは！\n我的名字叫莎莎")
                相框("IMG_8935.jpg")
            }
            HStack {
                相框("unsplash01.jpg")
                標示("SORRY\nEARTH")
            }
            HStack {
                標示("Сәлем!\nМенің атым Анна")
                相框("unsplash02.jpg")
            }
        }
    }
}
PlaygroundPage.current.setLiveView(版面())

.shadow(color: .gray, radius: 2, x: 5, y: 5)

struct 版面: View {
    var body: some View {
        VStack {
            HStack {
                標示("こんにちは！\n我的名字叫莎莎")
                相框("IMG_8935.jpg")
            }
            HStack {
                相框("unsplash01.jpg")
                標示("SORRY\nEARTH")
            }
            HStack {
                標示("Сәлем!\nМенің атым Амина.")
                相框("unsplash02.jpg")
            }
        }
    }
}

            HStack {
                標示("こんにちは！\n我的名字叫莎莎")
                相框("IMG_8935.jpg")
            }

1. 第三列的文字「標示("Сәлем!\nМенің атым Амина.")」是哈薩克文，意為「你好！我名叫阿米娜」。
   
2. 哈薩克文使用「斯拉夫字母」(Cyrillic)，是中亞、俄羅斯、蒙古、東歐等地區的主要文字，斯拉夫字母的 и 發 /ɪ/ 音、 н 發 /n/ 音，所以 Амина 可音譯為 Amina。
   
3. 斯拉夫字母源自希臘字母，約西元九世紀由保加利亞傳教士所創造。

// 2-4a 圖層(ZStack)
// Created by Heman, 2021/08/08
import PlaygroundSupport
import SwiftUI

struct 標示: View {
    var 標語: String
    var 大小: CGFloat
    init(_ p: String, size: CGFloat) { 
        標語 = p 
        大小 = size
    }
    var body: some View {
        Text(標語)
            .font(.system(size: 大小))
            .bold()
    }
}

struct 相框: View {
    var 檔名: String
    init(_ p: String) { 檔名 = p }
    var body: some View {
        Image(uiImage: UIImage(named: 檔名)!)
            .resizable()
            .scaledToFit()
            .cornerRadius(16)
    }
}

struct 版面: View {
    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .foregroundColor(.orange)
                標示("Жерді сақта!", size: 40)
                    .multilineTextAlignment(.center)
            } 
            .frame(height: 80)
            ZStack {
                相框("unsplash02.jpg")
                HStack {
                    標示("Kazakhstan\nGirl Urge to\nSave the Earth", size: 32)
                        .multilineTextAlignment(.trailing)
                        .foregroundColor(.white)
                        .shadow(color: .black, radius: 10, x: 0, y: 0)
                        .blur(radius: 1)
                    相框("unsplash01.jpg")
                        .padding()
                }
                .frame(height: 200)
                .offset(y: 180)
            }
        }
    }
}
PlaygroundPage.current.setLiveView(版面())

HStack {
    標示("Kazakhstan\nGirl Urge to \nSave the Earth", size: 32)
        .multilineTextAlignment(.trailing)
        .foregroundColor(.white)
        .shadow(color: .black, radius: 10, x: 0, y: 0)
        .blur(radius: 1)
    相框("unsplash01.jpg")
        .padding()
}
.frame(height: 200)
.offset(y: 180)

ZStack {
    相框("unsplash02.jpg")
    HStack { }
    .frame(height: 200)
    .offset(y: 180)
}

ZStack {
    Rectangle()
        .foregroundColor(.orange)
    標示("Жерді сақта!", size: 40)
        .multilineTextAlignment(.center)
} 
.frame(height: 80)