需求背景
自从在技术论坛开始写作后,会遇到来自不同领域不同平台的朋友加为好友。后来人数多了以后,对于相同社区的朋友为了方便管理就建立了微信群进行管理。由于在不同平台的内容更新频次不同,会被经常问起在哪些平台进行更新,但通常会因为一时间平台很多也不知道该如何回答。
有时候在想是不是能有一个工具能够像个人简历一样,汇集个人的所有公开的信息,其他人只需要通过一个链接就可以查看我所有共享的内容?
在网上查询了一圈后,还真发现了一款叫做Linktree的工具,它通过在创建一个有效的链接的方式,将个人的一个个身份汇集在一起。用户可以将这个链接分享给其他人,其他人就可以通过访问URL来查询他人共享的所有社交媒体资料和内容。
这是不是就是所谓的元宇宙世界的电子名片?
秉着研究的兴趣,结合自己所学的内容,也想着是否能使用SwiftUI实现一个电子名片?说干就干。
项目分析
做一款电子名片的MVP产品,功能点分析如下:
我们将项目命名为Linkworld,它有两个页面,一个“个人主页”,承载用户创建的所有身份卡片。第二个是“新建身份页”,用户创建个人主页中的身份卡片。
Linkworld唯有一个核心的功能,即点击卡片后在应用内打开web网页,跳转到身份卡片对应的主页。
在分析完最小的MVP产品的核心功能后,我们来使用编程实现这款App。
项目准备:创建新的SwiftUI项目
首先打开Xcode,创建一个新的SwiftUI项目,命名为Linkworld,如下图所示:
编程方式:搭建单独的构件
创建项目后,先来分析个人主页所需要呈现的内容,我们设想每一个社交媒体都是一个身份卡片,就像医生或者服务员胸口的名片。
Swift编程语言的一大特性是归类的思想,即将具有相同的特性的内容抽离出来,制作一个个构件,然后在主要视图中调用。一张张身份卡片对于我们来说就是一个构件,我们只需要创建一个标准构件,然后赋予不同的内容就可以完成主页的搭建。
在ContentView中,我们创建一个新的结构体作为标准构件,如下代码所示:
// MARK: 身份卡片构件
struct CardView: View {
var body: some View {
Text("Hello, world!")
}
}
复制代码
为了便于展示,我们在ContentView文件中创建了一个新的结构体CardView,当然我们也可以直接创建一个新的SwiftUI文件命名为CardView。一般在编程过程中,为了项目结构的清晰,通常会另起一个SwiftUI页面,这里为了演示内容,就在ContentView直接创建。
变量声明:变量名称和变量类型
创建完CardView结构体后,我们来分析下身份卡片需要呈现的内容,如下图所示:
借鉴一些常规技术社区所呈现的主要内容,我们可以得到单张身份卡片应该有如上图的信息:平台图标、平台称号、平台名称、跳转链接。
示例:稀土掘金Icon,移动端签约作者,稀土掘金技术社区,juejin.cn/user/389709…
因此对于CardView视图,需要声明对应的参数,如下代码所示:
var platformIcon: String
var title: String
var platformName: String
var indexURL: String
复制代码
上述代码中,我们声明了4个身份卡片所需要的参数:platformIcon平台图标、title平台称号、platformName平台名称、indexURL首页地址。
这里需要明确的内容是,使用var声明的变量需要确定参数的类型,参数类型需要根据使用的组件使用的类型。Image图片组件、Text文字组件使用的参数值都是String类型,因此我们声明的4个必要的变量也都是String类型。
界面设计:控件的三种布局容器
紧接着,我们来看看单张身份卡片的设计结构,如下图所示:
由上图所示,单张身份卡片需要展示的内容的布局结构,平台称号和平台名称为垂直排列,信息和平台平台图标为横向排列。
编程方式我们可以先搭建布局容器,再搭建控件内容,也可以先搭建控件内容,再在控件内容外层搭建容器,在SwiftUI实际编程中均可使用两种方式。
首先是平台图标,如下代码所示:
// 平台图标
Image(platformIcon)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 48, maxHeight: 48)
复制代码
上述代码中,我们使用Image图片控件搭建平台图标展示的内容,使用的控件内容为声明的参数变量platformIcon,为了调整平台图标以达到最佳的展示效果,这里使用resizable可调整尺寸修饰符、aspectRatio保持宽高比修饰符、frame设置尺寸修饰符,将平台图标的Image图片控件调整为一个48*48的图片。
然后是文字部分,由于平台图标图片和文字信息(平台称号、平台名称)为横向排布方式,因此需要在它们的最外层增加一个HStack横向布局容器,告知系统这些控件是横向排布,如下代码所示:
HStack(spacing: 15) {
// 平台图标
Image(platformIcon)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 48, maxHeight: 48)
Spacer()
}
复制代码
上述代码中,我们使用HStack横向布局容器包裹Image图片控件,在HStack横向布局容器中,我们还使用Spacer控件,Spacer控件可以填充空白区域,如此便可以将Image图片控件“挤”到另一边。
文字信息(平台称号、平台名称)部分,使用两个不同字号大小的Text控件,而这两个Text控件为纵向排布方式,我们需要使用到VStack纵向布局容器,如下代码所示:
VStack(alignment: .leading, spacing: 5) {
// 平台称号
Text(title)
.font(.system(size: 18))
.fontWeight(.bold)
// 平台名称
Text(platformName)
.font(.system(size: 14))
}
复制代码
上述代码中,VStack纵向布局容器使用对齐方式设置为leading文字左对齐,内容控件之间的spacing间距为5。文字信息部分,使用font字体修饰符设置平台称号的字号为18,文字字重加粗,平台名称的字号为14。
最后,由于我们需要身份卡片呈现卡片效果,因此在整个视图最外层进行修饰,将整个视图内容“美化”成卡片,如下代码所示:
HStack(spacing: 15) {
// 平台图标
Image(platformIcon)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 48, maxHeight: 48)
VStack(alignment: .leading, spacing: 5) {
// 平台称号
Text(title)
.font(.system(size: 18))
.fontWeight(.bold)
// 平台名称
Text(platformName)
.font(.system(size: 14))
}
Spacer()
}
.padding()
.frame(maxHeight: 80)
.background(.white)
.cornerRadius(8)
.padding(.horizontal)
复制代码
以上,单张身份卡片的构件就完成了。
卡片预览:使用构件搭建视图
完成单张身份卡片的构件后,我们在ContentView视图中展示卡片看看效果。首先我们先在Assets导入一堆图片素材作为平台图标的内容,如下图所示:
然后回到ContentView文件中,删除示例代码,调用CardView身份卡片结构体创建列表,如下代码所示:
CardView(platformIcon: "icon_juejin", title: "移动端签约作者", platformName: "稀土掘金技术社区", indexURL: "https://juejin.cn/user/3897092103223517")
复制代码
上述代码中,我们在Body中调用CardView构件,并给声明的参数赋值。
由于身份卡片背景颜色为white白色,因此在白色背景颜色看不到卡片效果,我们可以填充一个带有颜色的背景,以便于突出白色卡片,如下代码所示:
ZStack {
Color(red: 246 / 255, green: 247 / 255, blue: 255 / 255)
.edgesIgnoringSafeArea(.all)
CardView(platformIcon: "icon_juejin", title: "移动端签约作者", platformName: "稀土掘金技术社区", indexURL: "https://juejin.cn/user/3897092103223517")
}
复制代码
上述代码中,使用ZStack堆栈视图容器将CardView和Color颜色进行堆栈叠加,实现颜色叠加效果。Color颜色部分,使用edgesIgnoringSafeArea忽略安全边界修饰符修饰,将颜色填充整个页面。
这里值得注意的是,堆栈视图中的控件的先后顺序决定了堆栈的层级,Color颜色在前,CardVIew视图在后,便实现了Color颜色作为背景颜色。
我们创建多几个卡片看看效果,如下图所示:
项目小结
至此,电子名片的基础卡片内容就已完成基础的部分了。
在本章中,我们学习了如何使用布局容器创建界面样式,包括HStack横向布局容器、VStack纵向布局容器、ZStack堆栈布局容器,并实现这些容器进行控件之间的布局,达到整理页面元素的效果。以及还学习了一个新的控件Spacer填充空间控件,常用于配合布局容器填充空白的空间。
而本章的重点是了解如何使用“构件”这一编程方式,这一编程方式在实际开发中经常会使用,可以有效地减少和规范代码。
下一章,我们继续来学习如何创建数据模型来进一步完善这个项目,请保持期待吧~
版权声明
本文为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!