上一篇文章寫到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目錄下可以看到三個文件，分別是：
- ios_studyApp：這是我們的app入口代碼，如果讀者沒有編碼基礎，可以先忽略這個代碼文件中的內容，咱們后續文章再學習
- ContentView：這是app的主界面的布局，咱們下文重點學習
- 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()
這里先介紹相關關鍵詞：
- struct：和import一樣，struct是swift編程語言提供的關鍵詞，struct表示結構體，即將多個數據放在一起組成一個新的數據結構。
- var：表示變量，var body表示名為body的變量，變量就類似于中學數學函數中的x和y
- some：some關鍵詞本文先不作介紹，在后續文章里我們會學習swift開發的知識時再作詳細介紹
界面布局：
- VStack：可以理解為創建一個縱向布局，在VStack中，所有的界面元素都是縱向排列的，類似的還有HStack表示橫向布局，即所有元素橫向排列
- Image：表示展示一個圖片
- 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))
右側預覽中顯示：
地圖預覽
創建好地圖組件中，我們將地圖組件加入到主界面中：
- 從左側項目文件中打開ContentView
- 在代碼的import SwiftUI后面加上import MapKit，表示導入地圖組件
- 將第二個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開發的基礎知識，歡迎關注。
