新手學(xué)IOS開(kāi)發(fā)-APP界面布局基礎(chǔ)開(kāi)發(fā)-魔扣目錄

上一篇文章寫(xiě)到IOS開(kāi)發(fā)環(huán)境搭建，還沒(méi)學(xué)會(huì)的讀者可參考IOS開(kāi)發(fā)環(huán)境搭建，今天我們熟悉一下開(kāi)發(fā)工具的基本使用，為了對(duì)IOS軟件開(kāi)發(fā)有一個(gè)基礎(chǔ)的認(rèn)識(shí)，同時(shí)提升學(xué)習(xí)興趣，我們先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的布局的App。

創(chuàng)建項(xiàng)目

上一篇文章結(jié)尾簡(jiǎn)單提及過(guò)xcode的項(xiàng)目創(chuàng)建，咱們重頭再創(chuàng)建一個(gè)項(xiàng)目：

打開(kāi)Xcode軟件，出現(xiàn)如下界面：

xcode初始界面

點(diǎn)擊Create a new Xcode project進(jìn)入創(chuàng)建項(xiàng)目界面，我們選擇IOS -> App：

xcode創(chuàng)建項(xiàng)目界面

點(diǎn)擊“next”后，輸入項(xiàng)目名，筆者這里給項(xiàng)目取名為ios_study：

輸入項(xiàng)目名

點(diǎn)擊“next”后彈出文件選擇框，此時(shí)選擇一個(gè)目錄用來(lái)保存我們創(chuàng)建的項(xiàng)目及項(xiàng)目中的代碼文件等，筆者選擇的是~/io_projects/

選擇項(xiàng)目文件目錄

選擇好目錄后，點(diǎn)擊create，xcode完成項(xiàng)目創(chuàng)建，此時(shí)出現(xiàn)如下項(xiàng)目界面：

IOS項(xiàng)目開(kāi)發(fā)界面

在項(xiàng)目界面中，左右是項(xiàng)目結(jié)構(gòu)目錄，中間是代碼編輯器，右邊是我們創(chuàng)建的app界面預(yù)覽。

Xcode的基礎(chǔ)使用

創(chuàng)建了項(xiàng)目后，我們?cè)賮?lái)熟悉一下Xcode的基礎(chǔ)使用

修改主題&字體

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

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

Xcode設(shè)置界面

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

代碼編輯器主題

項(xiàng)目結(jié)構(gòu)介紹

在Xcode的左邊欄中，我們的項(xiàng)目有如下圖所示的結(jié)構(gòu)：

項(xiàng)目結(jié)構(gòu)

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

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

ios_studyApp：這是我們的app入口代碼，如果讀者沒(méi)有編碼基礎(chǔ)，可以先忽略這個(gè)代碼文件中的內(nèi)容，咱們后續(xù)文章再學(xué)習(xí)
ContentView：這是app的主界面的布局，咱們下文重點(diǎn)學(xué)習(xí)
Assets：這是項(xiàng)目中用于管理項(xiàng)目資源的文件，比如app中使用到的圖片、app的圖標(biāo)等

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

界面布局

廢話不再多說(shuō)，咱們先通過(guò)創(chuàng)建一個(gè)簡(jiǎn)單的軟件界面學(xué)習(xí)一下IOS開(kāi)發(fā)的基礎(chǔ)界面布局，后續(xù)再慢慢學(xué)習(xí)如何給軟件界面添加功能實(shí)現(xiàn)。

打開(kāi)上文介紹的ContentView文件，我們看到如下代碼：

ContentView初始代碼

初始代碼不長(zhǎng)，它的作用就是展示一個(gè)地球圖標(biāo)，圖標(biāo)的下方有“Hello, world”文字，在預(yù)覽里可以看到：

hello word

回到ContentView，我們先來(lái)介紹一下這個(gè)代碼的結(jié)構(gòu)：

首先，第一行的import swiftUI表示的是導(dǎo)入SwiftUI庫(kù)，SwiftUI庫(kù)是蘋(píng)果官方提供的IOS APP開(kāi)發(fā)工具，咱們所用的的軟件界面元素都是SwiftUI庫(kù)提供的，有了SwiftUI庫(kù)，我們能非常簡(jiǎn)單的創(chuàng)建需要的軟件界面，import關(guān)鍵詞就是導(dǎo)入的意思，import SwiftUI意為在當(dāng)前代碼文件中加入SwiftUI的支持。

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

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

這里先介紹相關(guān)關(guān)鍵詞：

struct：和import一樣，struct是swift編程語(yǔ)言提供的關(guān)鍵詞，struct表示結(jié)構(gòu)體，即將多個(gè)數(shù)據(jù)放在一起組成一個(gè)新的數(shù)據(jù)結(jié)構(gòu)。
var：表示變量，var body表示名為body的變量，變量就類似于中學(xué)數(shù)學(xué)函數(shù)中的x和y
some：some關(guān)鍵詞本文先不作介紹，在后續(xù)文章里我們會(huì)學(xué)習(xí)swift開(kāi)發(fā)的知識(shí)時(shí)再作詳細(xì)介紹

界面布局：

VStack：可以理解為創(chuàng)建一個(gè)縱向布局，在VStack中，所有的界面元素都是縱向排列的，類似的還有HStack表示橫向布局，即所有元素橫向排列
Image：表示展示一個(gè)圖片
Text：表示展示一個(gè)文字內(nèi)容

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

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

這段代碼是生成預(yù)覽界面時(shí)使用，其作用就是生成ContentView界面布局的預(yù)覽

開(kāi)發(fā)界面

前面簡(jiǎn)要的介紹了一下IOS app開(kāi)發(fā)的界面布局，咱們現(xiàn)在著手創(chuàng)建自己的界面。

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

在Xcode的右上角有一個(gè)+號(hào)按鈕，點(diǎn)擊出彈出選擇組件界面，我們可從中選擇自己想要添加的組件，例如選擇Tab View創(chuàng)建一個(gè)具有選項(xiàng)卡的界面布局：

選擇界面組件

選擇Tab View后會(huì)出現(xiàn)如下代碼，Xcode為我們生成了兩個(gè)選項(xiàng)卡：

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內(nèi)容，也可以增加或刪除選項(xiàng)卡，例如：

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

修改代碼后，Xcode右側(cè)的預(yù)覽界面顯示如下軟件界面：

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

選擇List組件

List組件則是創(chuàng)建一個(gè)列表，此時(shí)代碼如下：

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

我們?cè)贚ist {}中添加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開(kāi)發(fā)")Button("JAVA開(kāi)發(fā)") {TextField("其它請(qǐng)輸入", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/).tabItem { Text("主頁(yè)") }.tag(1)Text("").tabItem { Text("位置") }.tag(2)Text("").tabItem { Text("我的") }.tag(3)struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()

可以看到app預(yù)覽變?yōu)椋?/p>

主頁(yè)預(yù)覽

其它界面組件，讀者可自己學(xué)習(xí)探索，后續(xù)筆者會(huì)介紹一些常用組件供大家學(xué)習(xí)。

添加地圖位置

通過(guò)上文的學(xué)習(xí)，相信讀者已經(jīng)學(xué)會(huì)了基礎(chǔ)的布局，咱們這一節(jié)學(xué)習(xí)如何使用地圖。

第一步：在右側(cè)的項(xiàng)目結(jié)構(gòu)文件中選擇ios_study，右鍵選擇New File，如下圖：

創(chuàng)建文件

在彈出的文件創(chuàng)建框中選擇SwiftUI View，表示創(chuàng)建一個(gè)新的界面

創(chuàng)建swiftui view

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

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

修改為如下代碼，如果讀者是初學(xué)者不明白其意義也無(wú)仿，咱們就當(dāng)是提前接觸了：

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))

右側(cè)預(yù)覽中顯示：

地圖預(yù)覽

創(chuàng)建好地圖組件中，我們將地圖組件加入到主界面中：

從左側(cè)項(xiàng)目文件中打開(kāi)ContentView
在代碼的import SwiftUI后面加上import MapKit，表示導(dǎo)入地圖組件
將第二個(gè)Tab的Text替換成Map組件，咱們使用北京昌平的位置作為地圖上的坐標(biāo)

代碼如下：

import SwiftUIimport MapKitstruct ContentView: View {var body: some View {TabView(selection: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) {List {Text("IOS開(kāi)發(fā)")Button("Java開(kāi)發(fā)") {TextField("其它請(qǐng)輸入", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/).tabItem { Text("主頁(yè)") }.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()運(yùn)行代碼

在修改完代碼后，咱們點(diǎn)擊項(xiàng)目結(jié)構(gòu)欄上的三角形按鈕，Xcode會(huì)運(yùn)行代碼并啟動(dòng)iphone模擬器：