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.
![](https://private-user-images.githubusercontent.com/45484154/320261270-7ddce1ee-6783-4a55-9197-26e1abbce29a.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTQ1NDgyMzMsIm5iZiI6MTcxNDU0NzkzMywicGF0aCI6Ii80NTQ4NDE1NC8zMjAyNjEyNzAtN2RkY2UxZWUtNjc4My00YTU1LTkxOTctMjZlMWFiYmNlMjlhLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTAxVDA3MTg1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg4NmUzZGY1YTVkYTQzZTY5YTNiOTUzZjFjN2MxOWYzOThkOGYyZjc5OWVkMTNlYWUwMWI4M2VkNTg5YzEwNjQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.htsX4JZ7RAKoUcIgxjMwaG4lHTZF9DgILqx11L6sFmY)
![](https://private-user-images.githubusercontent.com/45484154/320261861-a53fd5a3-1a92-4a42-b5e1-4645345e92aa.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTQ1NDgyMzMsIm5iZiI6MTcxNDU0NzkzMywicGF0aCI6Ii80NTQ4NDE1NC8zMjAyNjE4NjEtYTUzZmQ1YTMtMWE5Mi00YTQyLWI1ZTEtNDY0NTM0NWU5MmFhLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTAxVDA3MTg1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRiMDY3OWE5MzZmNmZiNzA5ZmIyNzA5YWVmMDA0Nzc3MTE3MjU0NDYwYzhmY2QxZmIwZDAzN2MwMTFmMDBiOTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.UZ3YiU-_z65QB4EU9YuvPpJyhunsvTla55lTKX9mrZg)
![](https://private-user-images.githubusercontent.com/45484154/321694456-ffdd0bf3-5f98-49d3-b98b-9de65b9950e8.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTQ1NDgyMzMsIm5iZiI6MTcxNDU0NzkzMywicGF0aCI6Ii80NTQ4NDE1NC8zMjE2OTQ0NTYtZmZkZDBiZjMtNWY5OC00OWQzLWI5OGItOWRlNjViOTk1MGU4LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTAxVDA3MTg1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRmMDNkYTUxNGJhNjVkMTllZTc5MWU4MDFkN2E0OWZjYjE3MjhiMGM5MTFiZGE4YzM5YWM5MGMxYWYzMjE0YTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.rQho3JDLC__-ovz905fT_7TW6pwksfhaMV_7Pg6QXGo)
Platform | Minimum Version |
---|---|
iOS | 12.0 |
This project can be installed using Swift Package Manager.
- Open your project in Xcode.
- Navigate to
File
>Swift Packages
>Add Package Dependency
. - Paste the repository URL:
https://github.com/Enryun/TutorialKit
- 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
anddescription
: Customize fonts, sizes, and colors for titles and descriptions that later set up withTutorial
.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 individualTutorial
.
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:
![](https://private-user-images.githubusercontent.com/45484154/321699939-133745b6-b28f-498d-b6ab-0c91bf8fa6f0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTQ1NDgyMzMsIm5iZiI6MTcxNDU0NzkzMywicGF0aCI6Ii80NTQ4NDE1NC8zMjE2OTk5MzktMTMzNzQ1YjYtYjI4Zi00OThkLWI2YWItMGM5MWJmOGZhNmYwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTAxVDA3MTg1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTExOWViNmFhMTUzZmRlNDE0OGM4ODhjMjU3ZGYyMjc2MzBhZmFhYTBlY2RiYzE1M2ExMzRkNTVjNzFiMTY0YzEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ClaGGJZoBAw2ikZ8XPriXJV3smDbiREgis6MVMUbG08)
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