江苏龙网

  1. 主页 > 生活百科 > >

新手学IOS开发-APP界面布局基础开发( 二 )

Ios


界面布局
废话不再多说 ， 咱们先通过创建一个简单的软件界面学习一下IOS开发的基础界面布局 ， 后续再慢慢学习如何给软件界面添加功能实现 。
打开上文介绍的ContentView文件 ， 我们看到如下代码：

新手学IOS开发-APP界面布局基础开发

文章插图
ContentView初始代码
初始代码不长 ， 它的作用就是展示一个地球图标 ， 图标的下方有“Hello, world”文字 ， 在预览里可以看到：
新手学IOS开发-APP界面布局基础开发

文章插图
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 ， 删除后如下：
新手学IOS开发-APP界面布局基础开发

文章插图
 
在Xcode的右上角有一个+号按钮 ， 点击出弹出选择组件界面 ， 我们可从中选择自己想要添加的组件 ， 例如选择Tab View创建一个具有选项卡的界面布局：
新手学IOS开发-APP界面布局基础开发

文章插图
选择界面组件
选择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()


推荐阅读


上一篇：微信封号的新规？下面四种行为是直接被封号的，很多人都中招了？

下一篇：详解Apache Sentry->Ranger平滑升级方案