上一篇文章写到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 -> Settings，老版本的系统是Xcode -> Preferences，或者按下快捷键 cmd + 逗号，操作方式如下图：
此时出弹出Xcode设置界面，笔者更喜欢使用深色主体，选择Generic -> Appearance，将界面改为Dark：
Xcode设置界面
选择Themes，修改代码编辑器主题及字段：
代码编辑器主题
在Xcode的左边栏中，我们的项目有如下图所示的结构：
项目结构
其中ios_study目录是我们的代码目录，而ios_studyTests和ios_studyUITests是测试代码目录，咱们可以先不和测试代码目录。
在ios_study目录下可以看到三个文件，分别是：
新同学看不懂里面的代码不用急，随着学习的深入，慢慢就精通了。
废话不再多说，咱们先通过创建一个简单的软件界面学习一下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()
}
}
这里先介绍相关关键词：
界面布局：
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 SwiftUI
struct 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 SwiftUI
struct MapView: View {
var body: some View {
}
}
struct MapView_Previews: PreviewProvider {
static var previews: some View {
MapView()
}
}
修改为如下代码，如果读者是初学者不明白其意义也无仿，咱们就当是提前接触了：
import Foundation
import SwiftUI
import MapKit
struct 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))
}
}
右侧预览中显示：
地图预览
创建好地图组件中，我们将地图组件加入到主界面中：
代码如下：
import SwiftUI
import MapKit
struct 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开发的基础知识，欢迎关注。
关注微信
