教程 1.1.3

教程 1.1.3

×

由 ‘JamesThang’ 维护。

教程 1.1.3

TutorialKit

iOS 12.0+ Swift Package Manager License

目录

  1. 概述
  2. 要求
  3. 安装
  4. 特性
  5. 用法
  6. 作者

概述

TutorialKit 帮助开发者为iOS应用程序创建交互式教程体验。利用 TutorialViewController，以动态内容（包括文本、图片和突出区域）展示步骤引导。

要求

平台 最低版本
iOS 12.0

安装

此项目可以使用Swift Package Manager进行安装。

  1. 在Xcode中打开您的项目。
  2. 导航到 文件 > Swift包 > 添加包依赖。
  3. 粘贴仓库URL：https://github.com/Enryun/TutorialKit
  4. 按照提示将包添加到您的项目中。

有关使用Swift Package Manager的更多详细信息，请访问Apple的Swift Package Manager文档。

特性

  • 使用 Tutorial 结构自定义教程步骤。
  • 支持浅色/深色模式，以及 BackgroundColor。
  • 支持交互元素如 TutorialContent 来提供引人入胜的教程。
  • 通过 TutorialAlignment 提供灵活的对齐和定位。

用法

5.1 将 TutorialKit 引入到您的视图控制器中

import TutorialKit

5.2 创建一个 TutorialConfiguration 实例来配置教程外观

定义了教程体验的整体外观、感觉和行为。允许开发者将教程组件调节得更符合应用程序的美学和技术层面。

let configuration = TutorialConfiguration(
            title: .init(font: .systemFont(ofSize: 24, weight: .semibold), textColor: .label),
            description: .init(font: .systemFont(ofSize: 16, weight: .regular), textColor: .label),
            backgroundColor: BackgroundColor(ligtModeColor: .init(color: .systemYellow, opacity: 0.7), darkModeColor: .init(color: .systemGreen, opacity: 0.3)),
            sound: .tap,
            alignment: .bottom
        )

您可以自定义标题、描述、背景颜色、音效和对齐方式

  • title 和 description：自定义标题和描述的字体、尺寸和颜色，这些将通过 Tutorial 进行配置。
  • backgroundColor：为教程覆盖层设置不同的颜色和透明度，针对浅色和深色模式有不同的设置。
  • sound：为教程内的交互元素选择音效，增强用户体验。
  • alignment 这里是全局对齐：指定教程步骤的默认对齐方式，允许在配置单个 Tutorial 时覆写此设置。

5.3 配置教程数据

通过创建 Tutorial 的实例来为每个教程步骤准备数据。每个实例可以包括标题、描述、对齐方式和定义的透明区域。

let tutorials = [
    Tutorial(
        title: .init(
            text: "Study Category",
            image: UIImage(systemName: "heart")?
                .withRenderingMode(.alwaysOriginal)
                .withTintColor(.label)
        ),
        description: [
            .init(
                text: "group common things together",
                image: UIImage(systemName: "lightbulb.circle")?
                    .withRenderingMode(.alwaysOriginal)
                    .withTintColor(.label)
            ),
            .init(
                text: "Ex: Lessons from the same Subject",
                image: UIImage(systemName: "lightbulb.circle")?
                    .withRenderingMode(.alwaysOriginal)
                    .withTintColor(.label)
            )
        ],
        alignment: .center,
        transparentArea: .init(x: 100, y: 100, width: 150, height: 150, cornerRadius: 0)
    )
    // Add more Tutorial instances as needed.
]

结果

  • title：教程步骤的主要标题，可选地伴有插图说明概念。
  • description：教程步骤的详细信息和说明，也可以包括图片以提高演示的吸引力。
  • alignment：确定教程内容的屏幕位置，有助于突出显示各种UI元素。
  • transparentArea：定义屏幕的特定区域保持可见和可交互，将用户的注意力集中在某些动作或功能上。

5.4 初始化和展示 TutorialViewController

创建一个 TutorialViewController 的实例，并使用您的数据和配置进行展示。

let vc = TutorialViewController(data: tutorials, configuration: configuration)
vc.showTutorials()
present(vc, animated: true)

这样就可以了。完成数据数组后，TutorialViewController 将自动被移除。

作者

James Thang，在 LinkedIn 上找到我