注:編程
- 文中代碼、視頻及圖片素材均來源於官方文檔
- 本期源碼:官方下載地址
- 使用SwiftUI,確保Mac上跑的是macOS 10.15 beta版,或以上版本。
- Xcode爲11 beta版,或以上版本。
打開Xcode,單擊Create a new Xcode project
,或選擇File > New > Project
。swift
選擇iOS菜單下的的Single View App
模板,而後單擊Next
。bash
輸入"Landmarks"(作一個包含各類地標元素的地標集項目)做爲項目名稱,選中Use SwiftUI
複選框,Next
,選擇在Mac上保存該項目的位置。 app
在Xcode左手邊的文件導航器中,單擊選擇ContentView.swift
。ide
默認狀況下,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()
}
}
複製代碼
預覽: ⬇️字體
在預覽畫布中,單擊Resume
按鈕以顯示預覽。spa
若是畫布不可見,選擇
Editor > Editor and Canvas
以顯示它。設計
在代碼內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()
}
}
複製代碼
預覽: ⬇️
更改UI的方式有兩種:1.改代碼;2.改屬性檢查器選項。
不管使用哪一種方式,代碼都會保持更新。
接下來,您將使用屬性檢查器自定義TextView。
在預覽畫布中,按住Command
鍵的同時單擊"Hello SwiftUI"文本,會彈出可選菜單,點擊Inspect...
此選項便可打開文本視圖的屬性檢查器。
注:不一樣的View,對應的不一樣的屬性檢查器內容。
如圖,將文本更改成"Turtle Rock"(地名:中文名叫昂裝,位於中國香港),這是將在應用程序中顯示的第一個地標。
如圖將字體改成"Title"
爲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 ⬇️
按住Command
鍵並單擊"Turtle Rock"文本視圖,點擊Inspect...
進入其屬性檢查器,單擊Color
右側下拉菜單並選擇"Inherited"(繼承系統默認值的意思),效果就是把文本顏色再回原來的黑色。
此時,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()
}
}
複製代碼
預覽: ⬇️
在上一節中,建立了地標名字的文本視圖,接着咱們繼續添加包含該地標詳細信息(如該地點著名的公園名稱和所在州)的文本視圖。
建立SwiftUI的視圖時,咱們能夠在視圖的body屬性中描述其內容、佈局和行爲,可是body內只返回單個視圖。咱們能夠將多個視圖組合放到Stack
中。
Stack
:能夠理解爲存放View的容器,扔進去的View們由Stack
擺佈,擺佈的方式有View們橫着排、豎着排和從後往前排等
HStack:全稱Horizontal Stack,水平排列,也就是橫着排
VStack:全稱Vertical Stack,垂直排列,也就是豎着排
本節用Stack
幹兩個事兒:
1.公園名稱和所在州名稱對應的倆文本視圖橫着排
2.地標名字的文本視圖擱1上面,如圖
屬性檢查器除了能夠在預覽畫布裏展開,代碼中一樣奏效:
按住Commond
鍵並單擊Text("Turtle Rock")
代碼行,選擇Embed in VStack
。
接下來,拖一個文本視圖添加到這個VStack
中。
單擊Xcode右上角的+
按鈕,而後將Text
視圖拖動到代碼中Turtle Rock
整個文本視圖後面的位置。
將拖進來的文本視圖的文本替換爲"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()
}
}
複製代碼
預覽: ⬇️
自定義位置以匹配所需佈局。
字體設置爲".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()
}
}
複製代碼
預覽: ⬇️
設置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"文本右側添加另外一個文本視圖。
打開"Joshua Tree National Park"的屬性檢查器,而後選擇Embed in hstack
。
更改文本爲"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()
}
}
複製代碼
預覽: ⬇️
讓視圖佈局在整個屏幕寬度上,插入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()
}
}
複製代碼
預覽: ⬇️
最後,使用.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()
}
}
複製代碼
預覽: ⬇️
設置好地標名稱和詳情的各類文本視圖後,接下來來張圖意思一下。
再也不在上面文件中添加新代碼,咱們尋另外一處實現帶有遮罩、邊框和陰影效果的圖片 View。
在項目的資源文件夾中找到"turtlerock.png",將其拖到"Resources"目錄中的"AppIcon"位置。
接下來,爲自定義圖像視圖建立一個新的".swift"文件。
選擇File > New > File
打開模板選擇器,選擇User Interface
分類下的SwiftUI View
,而後單擊Next
。將文件命名爲"CircleImage.swift",而後單擊Create
完成建立。
您能夠插入圖像並修改其顯示以匹配所需的設計。
使用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()
}
}
複製代碼
預覽: ⬇️
使用.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()
}
}
複製代碼
預覽: ⬇️
建立一個灰色的圓圈做爲邊框,而後將其蓋在上面的圓形圖片上。
/// 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()
}
}
複製代碼
預覽: ⬇️
接下來,添加半徑爲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()
}
}
複製代碼
預覽: ⬇️
將步驟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()
}
}
複製代碼
預覽: ⬇️