SwiftUI直通车系列(1)—— 视图的布局与组织-阿里云开发者社区

开发者社区> 珲yy少> 正文

SwiftUI直通车系列(1)—— 视图的布局与组织

简介: SwiftUI直通车系列(1)—— 视图的布局与组织
+关注继续查看

一、引言


      SwiftUI提供了一种更快、更高效也更简单的页面开发方式。我们知道相对于Objective-C,Swift语言本身就更加高效简洁,SwiftUI采用了结构化的布局方式,使得应用的界面开发更加直观快速。本系列博客,基于Apple官方的SwiftUI Tutorials为参考,配合代码示例介绍了SwiftUI的基础应用和特性,帮助大家快速入门SwiftUI开发,为工作中的开发效率赋能。


二、SwiftUI初体验


    做为Apple相关产品的开发者,影响界面开发效率的一大问题是每次代码的修改要查看效果都需要重新编译运行。往往,调试验证的时间要远远大于编码时间,严重影响了开发效率。当然,这也是大多数编译型语言所共有的痛点。使用SwiftUI配合Xcode的预览功能,可以做到代码的实时修改实时预览效果,界面的开发效率非常高。


     首先,我们可以创建一个模板工程体验下SwiftUI的基础功能。使用Xcode新建一个App项目,在选择语言时,选择Swift,并使用SwiftUI创建界面入口,如下图所示。


image.png


创建出的工程中包含3个swift文件,其中AppDelegate.swift文件是应用的入口文件,其在任何模板项目中几乎都是一样的,没有什么特别支持。SceneDelegate.swift文件是iOS 13后新引入的,用来进行多场景的管理,我们也无需关注。ContentView.swift文件是最终的界面定义文件,其中使用SwiftUI定义了界面的显示内容,ContentView.swift文件中的代码如下:


import SwiftUI


struct ContentView: View {

   var body: some View {

       Text("Hello, SwiftUI!")

   }

}


struct ContentView_Previews: PreviewProvider {

   static var previews: some View {

       ContentView()

   }

}

如上代码所示,ContentView是定义的一个视图结构体,其描述的就是界面的渲染信息,其中Text会在页面上渲染出一个文本标签,显示“Hello Swift!”,ContentView_Previews定义了当前界面的预览视图,你可以尝试对Text中的文本进行修改,修改后预览页面就会实时的展示出当前的界面模样,如下图所示。

image.png



可以通过为Text组件设置属性来实时的改变界面,例如文本的颜色,字体,是否加下划线等等,如下:


struct ContentView: View {

   var body: some View {

       Text("Hello, SwiftUI!")

           .foregroundColor(Color.red)

           .underline()

           .font(Font.system(size: 25))

   }

}


通过代码可以修改UI元素的属性,除此之外,我们还可以设置容器的对齐方式和元素间距等,如下:


struct ContentView: View {

   var body: some View {

       VStack (alignment: .leading, spacing: 10) {

           Text("Hello, SwiftUI!啊啊啊")

               .foregroundColor(Color.red)

               .underline()

               .font(Font.system(size: 25))

           Text("Hello, SwiftUI!")

           .foregroundColor(Color.red)

           .underline()

           .font(Font.system(size: 25))

       }

   }

}

其中alignment设置内部组件的对其方式,spacing设置组件间距离,对于水平栈,spacing设置的是列间距,对于垂直栈,spacing设置的是行间距。默认,组件会自动计算其做占据的位置,SwiftUI中也提供了一种特殊的占位元素,其可以将剩余的空间充满,例如在两个垂直布局的元素中间加入一个占位元素,则其会进行两端布局,如下:


struct ContentView: View {

   var body: some View {

       VStack (alignment: .leading, spacing: 10) {

           Text("Hello, SwiftUI!啊啊啊")

               .foregroundColor(Color.red)

               .underline()

               .font(Font.system(size: 25))

           Spacer()

           Text("Hello, SwiftUI!")

           .foregroundColor(Color.red)

           .underline()

           .font(Font.system(size: 25))

       }

   }

}

效果如下图所示:


image.png


可以发现,SwiftUI在布局上,很多思路都和CSS布局很像,对于组件元素,我们也可以为其追加内间距Padding,例如:


struct ContentView: View {

   var body: some View {

       VStack (alignment: .leading, spacing: 10) {

           Text("Hello, SwiftUI!啊啊啊")

               .foregroundColor(Color.red)

               .underline()

               .font(Font.system(size: 25))

           Spacer()

           Text("Hello, SwiftUI!")

           .foregroundColor(Color.red)

           .underline()

           .font(Font.system(size: 25))

       }

       .padding(EdgeInsets(top: 30, leading: 0, bottom: 30, trailing: 0))

   }

}

三、使用图片组件


     在SwiftUI中,可以方便的布局图片元素,并设置图片的圆角,阴影,边框等。使用如下代码即可在界面中间布局出一个图片元素:


struct ContentImage:View {

   var body: some View {

       Image("demo")

   }

}

其中“demo”为工程中一个资源图片的名字。预览效果如下:


image.png


图片元素也有很多属性可以设置,如clipShape设置元素的形状,shadow设置元素的阴影,示例代码如下:


struct ContentImage:View {

   var body: some View {

       Image("demo")

       .clipShape(Circle())

       .shadow(radius: 30)

   }

}

效果如下图所示:


image.png


四、在SwiftUI中使用UIKit组件


     上面我们使用的文本与图片元素,都是SwiftUI框架中定义的基础组件。在实际开发中的更多时候,你需要结合UIKit来自定义一个SwiftUI组件,这本身也非常方便。例如我们要使用UIKit中的UILabel组件,示例如下:


struct Label:UIViewRepresentable {

   func makeUIView(context: Context) -> UILabel {

       UILabel(frame: .zero)

    }

   

   func updateUIView(_ uiView: UILabel, context: Context) {

       uiView.text = "Hello"

   }

}

UIViewRepresentable协议用来将UIKit中的组件定义为一个SwiftUI元素,其中有两个方法是必须要实现的,makeUIView用来返回一个指定的UIKit组件,updateUIView当组件更新时会被调用。


有了这些基础知识,我们已经可以使用SwiftUI来实现简单的页面构建了,你可以尝试用其做些简单的页面组合,只需要把握住,在SwiftUI中,无论简单还是复杂的界面都是通过水平和和垂直栈的组合,加上组件的位置偏移所布局出来的。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8446 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2759 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
10880 0
在 Swift 3 上对视图控件实践面向协议编程
本文讲的是在 Swift 3 上对视图控件实践面向协议编程,你可能听人说过,学到了知识却缺失了行动就好比人长了牙却还老盯着奶喝一样。那好,我们要怎样开始在我的应用中实践面向协议编程
1088 0
swift UI专项训练14 ImageView图像视图
  图像在swift中基于UIImageView,我们从storyboard中拖一个ImageView出来。
716 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12094 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11383 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
3615 0
+关注
594
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载