当前位置：首页>移动开发>正文

剖析：如何用 SwiftUI 5天组装一个微信 —— 通讯录发现我篇

移动开发2024-10-21 03:31:08

前置资源

GitHub： SwiftUI-WeChatDemo

第零章：用 SwiftUI 5天组装一个微信

第一章：剖析：如何用 SwiftUI 5天组装一个微信 —— 聊天界面篇

效果图

Tab 2：通讯录

通讯录的数据主体是联系人 Contact，包含姓名和头像，通过自定义函数，将联系人 Contact 数组整理为按名字首字符为分组名的 联系人分组(ContactGroup) 数组：
即：[{"A", [Contact]}, {"B", ...}, ...]

private var contactGroups: [ContactGroup] {
    getDefaultContactList()
        .group(withLocale: locale)
        .sortedList()
}

private struct ContactGroup: Hashable {
    let groupKey: Character
    let groupValue: [Contact]
}

※ 函数实现参考 GitHub源码

由于该界面没有实现子页面跳转功能，因此其实可以不使用 NavigationView，这里使用它只是为了获得 Toolbar 和顶部 Title 显示。

列表视图使用了 List，因为 List 自带了 Section 分组功能，在这里使用上比较方便。

List {
    ForEach(contactGroups, id: \.self) { group in
        // Completions will crash if ForEach nest together
        ContactSection(contactGroup: group)
    }
}
.listStyle(PlainListStyle())

通过 ForEach 读取每一个联系人分组，生成自定义的 Section 视图：

视图结构相对简单，但是在生成联系人（List item）视图上，使用了两个 ForEach 进行嵌套（第一层为根据分组 group 数组生成若干 Section，第二层为在每个 Section 中根据该 group 分组中每一条联系人记录生成列表的 Item 视图），当前在 Xcode 12.5.1 上使用多个 ForEach 嵌套时，会发生代码自动提示功能崩坏问题，因此这里将 Section 部分独立出来。

Tab 3：发现

发现页中列表每一项都是固定内容和固定顺序，因此不使用 ForEach 而是手动排布各项元素视图，包括用于灰色背景间隔的 Spacer 在内，总数量超过 10 个 View，因此需要引入 Group 来打包相邻的几个视图项。

数据部分：

private let items = getDiscoverItems()

items 是一个 [DiscoverItemName : ItemBarInfo] 字典，其中 DiscoverItemName 只是一个用作字典 Key 标记便于索引调用的简单枚举，视图所用数据都打包在 ItemBarInfo 中：

enum DiscoverItemName {
    case Moments, Channels, Live, Scan,
         Shake, TopStories, Search, Nearby,
         MiniPrograms
}

struct ItemBarInfo {
    let icon: String
    let iconPattern: IconPattern?
    let title: LocalizedStringKey
    let name: LocalizedString?
    let profileImage: String?
}

icon 表示图标使用的素材名称
iconPattern 为一个自定义枚举类型，用于封装图标染色所用的颜色或渐变色对象（在下文中详述）
title 表示 Item 左侧的名字
name 与 profileImage 仅用于在该 Item 需要展示某个联系人的场合（参考上图）

然后通过自定义函数，将每一条 Item 数据转换为对应的 ItemView：

items[.Moments]?.toItemBarView()

extension ItemBarInfo {
    func toItemBarView(withDivider: Bool = false, 
                  withBudge: Bool = true) -> ItemBarView {
        ItemBarView(itemBarInfo: self, 
                    withDivider: withDivider, 
                    withBudge: withBudge)
    }
}

在这个 ItemView 上，需要重点关注的是 Item 左侧的图标，即 Icon：

Icon(image: itemBarInfo.icon, 
     pattern: itemBarInfo.iconPattern)

这个自定义 Icon 接受两个参数：图标的素材名称，和对图标进行色彩渲染所用的 IconPattern：

在发现页上，朋友圈一栏所用图标为多种色彩，而其他项目的图标则都使用了单一颜色，在实现上，图片素材采用了 SVG 矢量图，再针对性后期进行颜色渲染加工的思路。（朋友圈图标使用渐变色 AngularGradient，而其他图标则使用 Color）

由于颜色 Color 与一众渐变色类型缺乏公共父类、协议，因此使用自定义封装来实现统一：

对图标素材进行渲染加工，使用 mask 遮罩处理：

color.mask(Image(image))
gradient.mask(Image(image))

该函数工作原理是，对于 Image 中像素所在位置，都使用前者（color 或者 gradient）进行像素对等替换。

Image 原图	mask 渲染后

Tab 4：我

这一页的各项 Item，沿用发现页的资源，只需针对性提供各项 Icon 资源、Title 指定的数据即可。

顶部的一大片资料区，只需要通过 HStack、VStack 对图片 Image、文字 Text 进行堆砌摆放，局部使用 offset 偏移修正位置即可。

重点关注中间的语言切换按钮。

切换按钮使用 Picker 实现，通过 pickerStyle 调整至该样式。

Picker 初始化中传入到形参 selection 的变量 appLanguage 使用了 @AppStorage 声明，类型为 String，表示该变量会被持久化存储在 UserDefaults 中，并且在未获取到相应字段值时，使用默认值 Language.English.code 进行初始化：

@AppStorage("AppLanguage")
private var appLanguage: String = Language.English.code

※ 与 @State 一样，该变量会绑定到 UI，当数据发生变化时，相关联的 UI 会进行自动刷新重绘

而每个按钮则是通过 ForEach 遍历 Language 枚举实现，当用户点击其中某个按钮时，在 ForEach 中传递至按钮中的 id 将会被赋值到 selection 的变量（即 appLanguage），并被持久化到 UserDefaults 内：

ForEach(languages, id: \.code) { lang in
    Text(lang.rawValue)
}

※ ForEach 与 id 的使用参考第一章：剖析：如何用 SwiftUI 5天写一个微信 —— 聊天界面篇

Language 枚举实现中，关键部分为 code，该变量所取用的语言代码需要与项目内的国际化资源文件夹 .lproj 的名称相同，可用语言代码可通过搜索 iOS + Language code 等关键词获得，如：iOS Supported Language Codes (ISO-639)：

最后被标记为用户所选择的语言，存储到 UserDefaults 中的 AppLanguage，需要回到 App 应用的主入口，同样通过 @AppStorage 获取出来，并通过 .environment() 写入到整个应用的根 View 的环境变量中，沿 View 结构树传递至每一个 SwiftUI 部件，选择性获取对应语言版本的文字资源：

至于在各个 Text 中使用国际化文本资源的方法，则是通过 SwiftGen 辅助完成的，SwiftGen 的一键配置、使用方法可参考：SwiftGen 在 Swift5 + SwiftUI 下的配置方案

至此，应用内语言切换功能实装完毕。

查看全文

https://www.xamrdz.com/mobile/4a21995573.html

前置资源

Tab 2：通讯录

Tab 3：发现

Tab 4：我

相关文章：