上一篇文章寫到IOS開發環境搭建，還沒學會的讀者可參考IOS開發環境搭建，今天我們熟悉一下開發工具的基本使用，為了對IOS軟件開發有一個基礎的認識，同時提升學習興趣，我們先實現一個簡單的布局的app。

創建項目

上一篇文章結尾簡單提及過xcode的項目創建，咱們重頭再創建一個項目：

打開Xcode軟件，出現如下界面：

xcode初始界面

點擊Create a new Xcode project進入創建項目界面，我們選擇IOS -> App：

xcode創建項目界面

點擊“next”后，輸入項目名，筆者這里給項目取名為ios_study：

輸入項目名

點擊“next”后彈出文件選擇框，此時選擇一個目錄用來保存我們創建的項目及項目中的代碼文件等，筆者選擇的是~/io_projects/

選擇項目文件目錄

選擇好目錄后，點擊create，xcode完成項目創建，此時出現如下項目界面：

IOS項目開發界面

在項目界面中，左右是項目結構目錄，中間是代碼編輯器，右邊是我們創建的app界面預覽。

Xcode的基礎使用

創建了項目后，我們再來熟悉一下Xcode的基礎使用

修改主題&字體

在菜單欄中選擇Xcode -> Settings，老版本的系統是Xcode -> Preferences，或者按下快捷鍵 cmd 逗號，操作方式如下圖：

此時出彈出Xcode設置界面，筆者更喜歡使用深色主體，選擇Generic -> Appearance，將界面改為Dark：

Xcode設置界面

選擇Themes，修改代碼編輯器主題及字段：

代碼編輯器主題

項目結構介紹

在Xcode的左邊欄中，我們的項目有如下圖所示的結構：

項目結構

其中ios_study目錄是我們的代碼目錄，而ios_studyTests和ios_studyUITests是測試代碼目錄，咱們可以先不和測試代碼目錄。

在ios_study目錄下可以看到三個文件，分別是：

1. ios_studyApp：這是我們的app入口代碼，如果讀者沒有編碼基礎，可以先忽略這個代碼文件中的內容，咱們后續文章再學習
2. ContentView：這是app的主界面的布局，咱們下文重點學習
3. Assets：這是項目中用于管理項目資源的文件，比如app中使用到的圖片、app的圖標等

新同學看不懂里面的代碼不用急，隨著學習的深入，慢慢就精通了。

界面布局

廢話不再多說，咱們先通過創建一個簡單的軟件界面學習一下IOS開發的基礎界面布局，后續再慢慢學習如何給軟件界面添加功能實現。

打開上文介紹的ContentView文件，我們看到如下代碼：

ContentView初始代碼

初始代碼不長，它的作用就是展示一個地球圖標，圖標的下方有“Hello, world”文字，在預覽里可以看到：

hello word

回到ContentView，我們先來介紹一下這個代碼的結構：

首先，第一行的import swiftUI表示的是導入SwiftUI庫，SwiftUI庫是蘋果官方提供的IOS APP開發工具，咱們所用的的軟件界面元素都是SwiftUI庫提供的，有了SwiftUI庫，我們能非常簡單的創建需要的軟件界面，import關鍵詞就是導入的意思，import SwiftUI意為在當前代碼文件中加入SwiftUI的支持。

第二部分的代碼是主界面的布局：

struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) Text("Hello, world!") } .padding() }}

這里先介紹相關關鍵詞：

1. struct：和import一樣，struct是swift編程語言提供的關鍵詞，struct表示結構體，即將多個數據放在一起組成一個新的數據結構。
2. var：表示變量，var body表示名為body的變量，變量就類似于中學數學函數中的x和y
3. some：some關鍵詞本文先不作介紹，在后續文章里我們會學習swift開發的知識時再作詳細介紹

界面布局：

1. VStack：可以理解為創建一個縱向布局，在VStack中，所有的界面元素都是縱向排列的，類似的還有HStack表示橫向布局，即所有元素橫向排列
2. Image：表示展示一個圖片
3. Text：表示展示一個文字內容

ContentView中第三部分的代碼如下：

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

這段代碼是生成預覽界面時使用，其作用就是生成ContentView界面布局的預覽

開發界面

前面簡要的介紹了一下IOS app開發的界面布局，咱們現在著手創建自己的界面。

第一步：刪除ContentView中原有的布局代碼，僅保留VStack，刪除后如下：

在Xcode的右上角有一個 號按鈕，點擊出彈出選擇組件界面，我們可從中選擇自己想要添加的組件，例如選擇Tab View創建一個具有選項卡的界面布局：

選擇界面組件

選擇Tab View后會出現如下代碼，Xcode為我們生成了兩個選項卡：

struct ContentView: View { var body: some View { VStack { TabView(selection: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) { Text("Tab Content 1").tabItem { /*@START_MENU_TOKEN@*/Text("Tab Label 1")/*@END_MENU_TOKEN@*/ }.tag(1) Text("Tab Content 2").tabItem { /*@START_MENU_TOKEN@*/Text("Tab Label 2")/*@END_MENU_TOKEN@*/ }.tag(2) } } .padding() }}

咱們修改其中的Text內容，也可以增加或刪除選項卡，例如：

struct ContentView: View { var body: some View { VStack { TabView(selection: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) { Text("").tabItem { Text("主頁") }.tag(1) Text("").tabItem { Text("位置") }.tag(2) Text("").tabItem { Text("我的") }.tag(3) } } .padding() }}

修改代碼后，Xcode右側的預覽界面顯示如下軟件界面：

有了選項卡后，我們可以在選項卡中添加其它界面組件，我們將第一個tabItem前面的Text刪除，并從上文介紹的組件選擇框中選擇List組件

選擇List組件

List組件則是創建一個列表，此時代碼如下：

struct ContentView: View { var body: some View { VStack { TabView(selection: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) { List { } .tabItem { Text("主頁") }.tag(1) Text("").tabItem { Text("位置") }.tag(2) Text("").tabItem { Text("我的") }.tag(3) } } .padding() }}

我們在List {}中添加Text，Button，TextField(文本輸入框)等，也可從組件選擇器中選擇，熟悉后直接添加代碼更加方便，代碼如下：

import SwiftUIstruct ContentView: View { var body: some View { TabView(selection: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) { List { Text("IOS開發") Button("Java開發") { } TextField("其它請輸入", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/) } .tabItem { Text("主頁") }.tag(1) Text("").tabItem { Text("位置") }.tag(2) Text("").tabItem { Text("我的") }.tag(3) } }}struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() }}

可以看到app預覽變為：

主頁預覽

其它界面組件，讀者可自己學習探索，后續筆者會介紹一些常用組件供大家學習。

添加地圖位置

通過上文的學習，相信讀者已經學會了基礎的布局，咱們這一節學習如何使用地圖。

第一步：在右側的項目結構文件中選擇ios_study，右鍵選擇New File，如下圖：

創建文件

在彈出的文件創建框中選擇SwiftUI View，表示創建一個新的界面

創建swiftui view

點擊Next，在文件名中輸入MapView，再點擊create，此時創建了一個名為MapView的組件代碼文件，咱們刪除其中不需要的Text("Hello, World")后，如下：

import SwiftUIstruct MapView: View { var body: some View { }}struct MapView_Previews: PreviewProvider { static var previews: some View { MapView() }}

修改為如下代碼，如果讀者是初學者不明白其意義也無仿，咱們就當是提前接觸了：

import Foundationimport SwiftUIimport MapKitstruct MapView: View { var coordinate: CLLocationCoordinate2D @State private var region = MKCoordinateRegion() var body: some View { Map(coordinateRegion: $region) .onAppear { setRegion(coordinate) } } private func setRegion(_ coordinate: CLLocationCoordinate2D) { region = MKCoordinateRegion( center: coordinate, span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2) ) }}struct MapView_Previews: PreviewProvider { static var previews: some View { MapView(coordinate: CLLocationCoordinate2D(latitude: 40.22077, longitude: 116.23128)) }}

右側預覽中顯示：

地圖預覽

創建好地圖組件中，我們將地圖組件加入到主界面中：

1. 從左側項目文件中打開ContentView
2. 在代碼的import SwiftUI后面加上import MapKit，表示導入地圖組件
3. 將第二個Tab的Text替換成Map組件，咱們使用北京昌平的位置作為地圖上的坐標

代碼如下：

import SwiftUIimport MapKitstruct ContentView: View { var body: some View { TabView(selection: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) { List { Text("IOS開發") Button("Java開發") { } TextField("其它請輸入", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/) } .tabItem { Text("主頁") }.tag(1) // 使用地圖組件 MapView(coordinate: CLLocationCoordinate2D(latitude: 40.22077, longitude: 116.23128)) .tabItem { Text("位置") }.tag(2) Text("").tabItem { Text("我的") }.tag(3) } }}struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() }}

運行代碼

在修改完代碼后，咱們點擊項目結構欄上的三角形按鈕，Xcode會運行代碼并啟動iphone模擬器：

運行代碼

當顯示build success后，屏幕上彈出iphone模擬器，iphone模擬器類似于一個iphone手機，我們可以在里面操作我們的app：

主頁-模擬器

選擇位置選項卡后出現地圖：

位置-模擬器

今天的內容先學習到這里，后續文章將介紹swift開發的基礎知識，歡迎關注。