嗨,SwiftUI~

解鎖構建UI的新姿式——SwiftUI

注:編程

  • 文中代碼、視頻及圖片素材均來源於官方文檔
  • 本期源碼:官方下載地址

1、建立SwiftUI項目

  • 使用SwiftUI,確保Mac上跑的是macOS 10.15 beta版,或以上版本。
  • Xcode爲11 beta版,或以上版本。

步驟1

打開Xcode,單擊Create a new Xcode project,或選擇File > New > Projectswift

步驟2

選擇iOS菜單下的的Single View App模板,而後單擊Nextbash

步驟3

輸入"Landmarks"(作一個包含各類地標元素的地標集項目)做爲項目名稱,選中Use SwiftUI複選框,Next,選擇在Mac上保存該項目的位置。 app

步驟4

在Xcode左手邊的文件導航器中,單擊選擇ContentView.swiftide

默認狀況下,SwiftUI會聲明兩個結構體,第一個結構體遵循View協議——用來描述視圖的內容和佈局;第二個結構體聲明該視圖的預覽方式。佈局

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽: ⬇️字體

步驟5

在預覽畫布中,單擊Resume按鈕以顯示預覽。spa

若是畫布不可見,選擇Editor > Editor and Canvas以顯示它。設計

步驟6

在代碼內body屬性裏,將"Hello World"更改成"Hello SwiftUI"。3d

更改body內視圖的屬性,預覽也將實時更新。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        /// "這裏更改成Hello SwiftUI!,便可在預覽中實時顯示。"
        Text("Hello SwiftUI!")
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽: ⬇️



2、自定義文本視圖

更改UI的方式有兩種:1.改代碼;2.改屬性檢查器選項。
不管使用哪一種方式,代碼都會保持更新。

接下來,您將使用屬性檢查器自定義TextView。

步驟1

在預覽畫布中,按住Command鍵的同時單擊"Hello SwiftUI"文本,會彈出可選菜單,點擊Inspect...此選項便可打開文本視圖的屬性檢查器。

注:不一樣的View,對應的不一樣的屬性檢查器內容。

步驟2

如圖,將文本更改成"Turtle Rock"(地名:中文名叫昂裝,位於中國香港),這是將在應用程序中顯示的第一個地標。

步驟3

如圖將字體改成"Title"

步驟4

Text添加代碼.color(.green),將文本改成綠色。

SwiftUI中,.color(.green)相似的點方法也叫作modifier(叫啥名不重要),調用後返回該視圖自己,所以相似鏈式編程,可不停日後面追加所謂的modifier

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            .font(.title)
            /// "步驟4: 設置顏色爲綠色"
            .color(.green)
    }
}

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

複製代碼

預覽: ⬇️

🙏代碼即視圖,視圖即代碼 🙏。即便使用屬性檢查器更改或刪除屬性時,Xcode也會當即更新代碼以匹配。看步驟5 ⬇️

步驟5

按住Command鍵並單擊"Turtle Rock"文本視圖,點擊Inspect...進入其屬性檢查器,單擊Color右側下拉菜單並選擇"Inherited"(繼承系統默認值的意思),效果就是把文本顏色再回原來的黑色。

步驟6

此時,Xcode會自動刪除.color(.green)這行代碼以響應上面的更改。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            .font(.title)
            /// "步驟6: Xcode自動刪除原來設置顏色的代碼,以響應屬性檢查器的更改"
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽: ⬇️

3、使用Stacks佈局View

在上一節中,建立了地標名字的文本視圖,接着咱們繼續添加包含該地標詳細信息(如該地點著名的公園名稱和所在州)的文本視圖。
建立SwiftUI的視圖時,咱們能夠在視圖的body屬性中描述其內容、佈局和行爲,可是body內只返回單個視圖。咱們能夠將多個視圖組合放到Stack中。

Stack:能夠理解爲存放View的容器,扔進去的View們由Stack擺佈,擺佈的方式有View們橫着排、豎着排和從後往前排等
HStack:全稱Horizontal Stack,水平排列,也就是橫着排
VStack:全稱Vertical Stack,垂直排列,也就是豎着排

本節用Stack幹兩個事兒:
1.公園名稱和所在州名稱對應的倆文本視圖橫着排
2.地標名字的文本視圖擱1上面,如圖

屬性檢查器除了能夠在預覽畫布裏展開,代碼中一樣奏效:

步驟1

按住Commond鍵並單擊Text("Turtle Rock")代碼行,選擇Embed in VStack

接下來,拖一個文本視圖添加到這個VStack中。

步驟2

單擊Xcode右上角的+按鈕,而後將Text視圖拖動到代碼中Turtle Rock整個文本視圖後面的位置。

步驟3

將拖進來的文本視圖的文本替換爲"Joshua Tree National Park"。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Turtle Rock")
                .font(.title)
            /// "步驟3: 拖進來,換個文本"
            Text("Joshua Tree National Park")
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽: ⬇️

自定義位置以匹配所需佈局。

步驟4

字體設置爲".subheadline"。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                /// "步驟4: 設置字體爲 subheadline"
                .font(.subheadline)
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽: ⬇️

步驟5

設置VStack對齊方式爲左對齊。

默認狀況下,VStack沿視圖的中軸線對齊。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) { // "步驟5: 設置對齊方式爲左對齊"
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                .font(.subheadline)
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽: ⬇️

接下來,在"Joshua Tree National Park"文本右側添加另外一個文本視圖。

步驟6

打開"Joshua Tree National Park"的屬性檢查器,而後選擇Embed in hstack

步驟7

更改文本爲"California",而後將字體設置爲"subheadline"。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                /// "步驟7: 和上一Text一同裝進HStack,並設置文本和字體"
                Text("California")
                    .font(.subheadline)
            }
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽: ⬇️

步驟8

讓視圖佈局在整個屏幕寬度上,插入Spacer(),以下。

默認狀況下,文本內容寬度決定文本視圖區域,使用Spacer()可撐開當前Stack內全部視圖,使View們充分利用該Stack的全部空間。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer() // "步驟8: 添加佔位空間"
                Text("California")
                    .font(.subheadline)
            }
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽: ⬇️

步驟9

最後,使用.padding()方法給整個VStack一點喘息的空間。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()  // "步驟9: 設置默認內邊距,使得VStack內部視圖起始點再也不死死地貼近邊緣"
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽: ⬇️

4、建立自定義圖像

設置好地標名稱和詳情的各類文本視圖後,接下來來張圖意思一下。
再也不在上面文件中添加新代碼,咱們尋另外一處實現帶有遮罩、邊框和陰影效果的圖片 View。

步驟1

在項目的資源文件夾中找到"turtlerock.png",將其拖到"Resources"目錄中的"AppIcon"位置。

接下來,爲自定義圖像視圖建立一個新的".swift"文件。

步驟2

選擇File > New > File打開模板選擇器,選擇User Interface分類下的SwiftUI View,而後單擊Next。將文件命名爲"CircleImage.swift",而後單擊Create完成建立。

您能夠插入圖像並修改其顯示以匹配所需的設計。

步驟3

使用Image(_:)方法初始化圖像,替換掉默認的Text視圖。

/// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        /// "步驟3"
        Image("turtlerock")
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
複製代碼

預覽: ⬇️

步驟4

使用.clipShape(Circle())方法將圖片裁成圓形。

Circle(),做爲圓圈能夠用做遮罩,也能夠在圈內填充顏色來用做單獨的圓形視圖。

/// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            /// "步驟4: 搞成圓的"
            .clipShape(Circle())
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
複製代碼

預覽: ⬇️

步驟5

建立一個灰色的圓圈做爲邊框,而後將其蓋在上面的圓形圖片上。

/// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            /// "步驟5: 蓋一個圓圈,灰色的,寬度爲4"
            .overlay(
                Circle().stroke(Color.gray, lineWidth: 4))
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
複製代碼

預覽: ⬇️

步驟6

接下來,添加半徑爲10點的陰影。

/// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.gray, lineWidth: 4))
            /// "步驟6: 設置陰影"
            .shadow(radius: 10)
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
複製代碼

預覽: ⬇️

步驟7

將步驟5裏的邊框顏色切換爲白色,收工。

/// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.white, lineWidth: 4)) // "步驟7: 切換爲白色"
            .shadow(radius: 10)
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
複製代碼

預覽: ⬇️

相關文章
相關標籤/搜索