1. Overview
2. Requirements
3. Installation
4. Features
5. Usage
6. Author

TutorialKit help developers create interactive tutorial experience for iOS applications. Utilizing TutorialViewController, it showcases step-by-step guides with dynamic content including text, images, and highlighted areas.

This project can be installed using Swift Package Manager.

1. Open your project in Xcode.
2. Navigate to File > Swift Packages > Add Package Dependency.
3. Paste the repository URL: https://github.com/Enryun/TutorialKit
4. Follow the prompts to add the package to your project.

For more details on using Swift Package Manager, visit Apple's Swift Package Manager documentation.

• Customizable tutorial steps with Tutorial structs.
• Support for light/dark mode with BackgroundColor.
• Interactive elements like TutorialContent for engaging tutorials.
• Flexible alignment and positioning with TutorialAlignment.

import TutorialKit

Defines the overall look, feel, and behavior of the tutorial experience. Allows developers to tailor the tutorial component to seamlessly fit within the aesthetic and functional aspects of their app.

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
        )

You can customize the title, description, background color, sound, and alignment:

• title and description: Customize fonts, sizes, and colors for titles and descriptions that later set up with Tutorial.
• backgroundColor: Set different colors and opacities for the tutorial overlay layer, with distinct settings for light and dark modes.
• sound: Choose a sound effect for interactive elements within the tutorial, enhancing the user experience.
• alignment here is Global Alignment: Specifies the default alignment for tutorial steps, with the option for individual steps to override this setting later when configure individual Tutorial.

Prepare the data for each tutorial step by creating instances of Tutorial. Each instance can include a title, description(s), alignment, and a defined transparent area.

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.
]

Result:

• title: The main heading of a tutorial step, optionally accompanied by an image to illustrate the concept.
• description: Detailed information or instructions for the tutorial step, which can also include images for a more engaging presentation.
• alignment: Determines the screen position of the tutorial content, aiding in highlighting various UI elements.
• transparentArea: Defines a specific area of the screen to remain visible and interactive, focusing the user's attention on certain actions or features.

Create an instance of TutorialViewController with your data and configuration, then present it.

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

That's it. When finished navigate through the data array, TutorialViewController will automatically be removed.

James Thang, find me on LinkedIn