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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MjIxNjEsIm5iZiI6MTcyNTYyMTg2MSwicGF0aCI6Ii80NTQ4NDE1NC8zMjAyNjEyNzAtN2RkY2UxZWUtNjc4My00YTU1LTkxOTctMjZlMWFiYmNlMjlhLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA2VDExMjQyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk3M2QyMzk1NWZhYTIzMzQ3ZWNiMjAzNjM2MmIwMmJjMTc4ZWZiYzYwYTZlYzc1OWQ0NTdkYjI2YWI1YzJhOTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ZR0SHotaXfEQ6o8edipuHofzYxs0z0ZvgkH2dNgZICM)
![](https://private-user-images.githubusercontent.com/45484154/320261861-a53fd5a3-1a92-4a42-b5e1-4645345e92aa.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MjIxNjEsIm5iZiI6MTcyNTYyMTg2MSwicGF0aCI6Ii80NTQ4NDE1NC8zMjAyNjE4NjEtYTUzZmQ1YTMtMWE5Mi00YTQyLWI1ZTEtNDY0NTM0NWU5MmFhLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA2VDExMjQyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNjNzQ4ZDZkOTExMzgyMmZhNGI1NzRmZjRmOTI2ZDdhNTc3NzA0NDRjZTE1OTNmMjAxMTdmNjc3NWRhZTA3OGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.mhMpX7SoJZeVxlAgtUdisWflgnxTjhJiWbfp-cVANFs)
![](https://private-user-images.githubusercontent.com/45484154/321694456-ffdd0bf3-5f98-49d3-b98b-9de65b9950e8.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MjIxNjEsIm5iZiI6MTcyNTYyMTg2MSwicGF0aCI6Ii80NTQ4NDE1NC8zMjE2OTQ0NTYtZmZkZDBiZjMtNWY5OC00OWQzLWI5OGItOWRlNjViOTk1MGU4LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA2VDExMjQyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMyYzQyMzU1N2NjZDMyNzNiNmI2YjE1N2E2MzdlMzliNzhiMTNlYTU3ZmJlYWZhNzdkOWRhNjI0ZDU5MTk1ODEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.5ajAFL4Lh64aKLQBasjG0Gf_G-LlCuLa6vaFIVD_Ks4)
Platform | Minimum Version |
---|---|
iOS | 12.0 |
This project can be installed using Swift Package Manager
and CocoaPod
.
- 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.
CocoaPods is a dependency manager for Objective-C, which automates and simplifies the process of using 3rd-party libraries in your projects. See the Get Started section for more details.
Add the following entry to your Podfile:
pod 'Tutorials', '~> 1.1.3'
Then run pod install
.
Don't forget to import TutorialKit
in every file you'd like to use it.
- 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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MjIxNjEsIm5iZiI6MTcyNTYyMTg2MSwicGF0aCI6Ii80NTQ4NDE1NC8zMjE2OTk5MzktMTMzNzQ1YjYtYjI4Zi00OThkLWI2YWItMGM5MWJmOGZhNmYwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA2VDExMjQyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFiZWQ1ZWUzYjllNTFlYWVjNzlmODFiMTUxNGJiYTZiZDhiMzNkMmNkODhkZGVlODYxYjMyYWM2MjExNTQ5MjcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Fuo2olEHhz2vHpPk2IeUUeu1BFbnQfQ2AT1cwW16dsI)
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