1.5　Xcode常用功能介紹

本節分享Xcode開發工具的常用功能和使用技巧。

在通常情況下，可以單擊Xcode右上角的收起視圖按鈕，以擴大中心視圖的展示區域。收起右側視圖效果如圖1-11所示。

圖1-11　收起右側視圖效果

1.5.1　代碼編輯區域

接下來可以看到Xcode在創建項目時自動創建的代碼示例，首先介紹左側的代碼編輯區域。

Xcode創建了一個SwiftUI文件ContentView，在ContentView文件中，將SwiftUI引入項目中，隨后聲明了一個遵循View協議的結構體ContentView。代碼編輯區域如圖1-12所示。

import SwiftUI
　
struct ContentView: View {
    var body: some View {
        // View的內容
    }
}

圖1-12　代碼編輯區域

對于遵循View協議的ContentView，其內容將會在Xcode右側的實時預覽窗口中呈現。因此，開發者可以遵循這樣的代碼結構，創建多個 UI 視圖來搭建應用的界面。要想用通俗的語言描述上述操作，就是創建一個叫作ContentView的View界面。

而在View協議中，聲明了一個body屬性的視圖容器，它遵循的是some View協議。可以將some View協議當作一個View容器，相當于在ContentView界面中放置了一個body屬性的視圖容器，開發者在界面中創建的所有視圖元素都需要放置在這個容器中。

1.5.2　實時預覽窗口

Xcode代碼示例中使用了VStack，在VStack中又放置了一個Image（圖片）視圖和一個Text（文字）視圖。我們可以在右側的實時預覽窗口中查看項目的最終呈現效果，實時預覽窗口如圖1-13所示。

圖1-13　實時預覽窗口

實時預覽窗口的內容則來自遵循PreviewProvider協議的結構體ContentView_Previews，預覽的視圖默認為ContentView視圖。開發者在創建子視圖時，可能由于子視圖有綁定關系或者有參數傳入，需要刪除或者注釋與PreviewProvider相關的代碼，注釋代碼的鍵盤快捷鍵為“Command+/”。注釋項目預覽代碼如圖1-14所示。

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

將與 PreviewProvider 相關的代碼注釋后，右側實時預覽窗口則會隱藏起來，后續也可以按下“Command+/”鍵盤快捷鍵取消注釋來顯示實時預覽窗口。

當開發者進行某些操作導致實時預覽窗口被Xcode隱藏時，還可以通過設置實時預覽窗口上方的“Adjust Editor Option”（調整編輯器選項）中的“Canvas”（畫布）來顯示和隱藏實時預覽窗口?！癆djust Editor Option”中的“Canvas”如圖1-15所示。

圖1-14　注釋項目預覽代碼

圖1-15 “Adjust Editor Option”中的“Canvas”

編輯代碼的另一個常用小技巧是可以啟用代碼的縮略視圖窗口。當代碼編輯區域的代碼量較大時，可以通過設置“Adjust Editor Option”中的“Minimap”來查看代碼的縮略信息，開發者也可以快速定位代碼位置?！癕inimap”選項如圖1-16所示。

默認預覽的模擬器型號為iPhone 14 Pro，開發者也可以在Xcode頂部菜單欄進行預覽設備的切換，選擇適合當前項目開發的設備型號進行效果預覽。切換預覽設備如圖1-17所示。

圖1-16 “Minimap”選項

圖1-17　切換預覽設備

1.5.3　項目預覽操作欄

在實時預覽窗口中，預覽設備底部的項目預覽操作欄提供了項目預覽的常用操作。

提高代碼編寫效率的有效途徑之一是實現代碼最終效果的實時預覽功能。單擊項目預覽操作欄的“Live”（模擬互動）按鈕，即可實現實時模擬界面的交互效果，每當視圖相關代碼改變時，就會自動實時渲染UI。當UI層級出現結構性調整時，可單擊此按鈕重新加載預覽界面?！癓ive”按鈕如圖1-18所示。

圖1-18 “Live”按鈕

“Selectable”（選擇模式）按鈕可將實時預覽窗口效果切換至UI元素選擇模式。當單擊預覽設備中的元素時，左側代碼編輯區域將自動定位該UI元素對應的代碼。在代碼編輯區域修改UI元素的屬性或者增加修飾符時，也可以在實時預覽窗口的選擇模式下，查看UI元素的尺寸大小和修飾效果?！癝electable”按鈕如圖1-19所示。

圖1-19 “Selectable”按鈕

“Variants”（場景對比）按鈕用于快速比較不同場景下設備預覽的效果。在iOS 13中，Apple引入了全局“深色模式”的設計理念，也要求所有開發者在開發應用時必須支持深色模式。開發者在開發過程中就可以借助項目預覽操作欄中的“Variants”，查看不同場景下的項目效果。

通過“Color Scheme Variants”，開發者可以查看項目在不同顏色場景下的效果，預覽淺色模式和深色模式下的效果。顏色場景對比如圖1-20所示。

圖1-20　顏色場景對比

在實時預覽窗口中，也可以通過“Orientation Variants”查看項目在不同設備方向場景下的效果，預覽設備在縱向、橫向（左邊橫向、右邊橫向）場景下的效果，在通常情況下，大多數應用都是縱向布局的，當然，也可以在項目的配置菜單中取消勾選橫向展示的功能。設備方向場景對比如圖1-21所示。

圖1-21　設備方向場景對比

最后一項是“Dynamic Type Variants”（字體大小對比），通過它可以看到開發者選用的不同字體大小在界面中的效果。字體大小的范圍從X Small到AX 5，當開發者沒有指定字體大小時，系統默認的字體大小是“Large”。字體大小對比如圖1-22所示。

圖1-22　字體大小對比

由于字體大小的選用將影響到UI的排版和實際效果，因此開發者最好在UI設計上擁有或者借鑒一套設計規范，以設計出精美且優秀的應用。

除了通過“Variants”進行場景對比，如果開發者只想查看某一特定場景下的預覽效果，那么可以在單擊“Live”按鈕后，通過配置“Canvas Device Settings”（畫布設備設置）來查看效果，配置“Canvas Device Settings”如圖1-23所示。

圖1-23　配置“Canvas Device Settings”

在單擊“Live”按鈕后，也可以開啟“Preview on Device”（在設備中預覽），于是當開發者接入真機設備時，就可以在實時預覽窗口和真機設備上同步預覽項目效果。

最右側的一組按鈕則比較簡單，用于調整實時預覽窗口中設備的預覽大小，這里不做過多說明。使用比較頻繁的按鈕是“Zoom to fit”（自適應縮放）按鈕，該按鈕讓預覽設備可以以合適的預覽大小呈現，“Zoom to fit”按鈕如圖1-24所示。

圖1-24 “Zoom to fit”按鈕

綜上，開發者可以在不借助模擬器和真機設備的情況下，實時預覽項目的交互、動畫、數據處理、UI布局等效果。