上一篇文章写到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_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("凯发体育官方app主页") }.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("凯发体育官方app主页") }.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("凯发体育官方app主页") }.tag(1) text("").tabitem { text("位置") }.tag(2) text("").tabitem { text("我的") }.tag(3) } }}struct contentview_previews: previewprovider { static var previews: some view { contentview() }}
可以看到app预览变为:
凯发体育官方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("凯发体育官方app主页") }.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:
凯发体育官方app主页-模拟器
选择位置选项卡后出现地图:
位置-模拟器
今天的内容先学习到这里,后续文章将介绍swift开发的基础知识,欢迎关注。
凯发体育官方app的版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。