https://github.com/enryun/tutorialkit
TutorialKit help developers create interactive tutorial experience for iOS applications
https://github.com/enryun/tutorialkit
ios swift tutorial uikit
Last synced: 4 months ago
JSON representation
TutorialKit help developers create interactive tutorial experience for iOS applications
- Host: GitHub
- URL: https://github.com/enryun/tutorialkit
- Owner: Enryun
- License: mit
- Created: 2024-04-06T06:10:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-15T17:02:44.000Z (over 1 year ago)
- Last Synced: 2025-09-12T16:37:19.885Z (5 months ago)
- Topics: ios, swift, tutorial, uikit
- Language: Objective-C
- Homepage: https://www.linkedin.com/in/jamesthang/
- Size: 303 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TutorialKit
[](https://cocoapods.org/pods/Tutorials)
[](https://github.com/apple/swift-package-manager)
[](http://mit-license.org)
## Table of Contents
1. [Overview](#overview)
2. [Requirements](#requirements)
3. [Installation](#installation)
4. [Features](#features)
5. [Usage](#usage)
6. [Author](#author)
## Overview
`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.
## Requirements
| Platform | Minimum Version |
|----------|-----------------|
| iOS | 12.0 |
## Installation
This project can be installed using `Swift Package Manager` and `CocoaPod`.
### 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](https://swift.org/package-manager/).
### CocoaPods
[CocoaPods](http://cocoapods.org/) 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](http://cocoapods.org/#get_started) section for more details.
Add the following entry to your Podfile:
```rb
pod 'Tutorials', '~> 1.1.3'
```
Then run `pod install`.
Don't forget to `import TutorialKit` in every file you'd like to use it.
## Features
- 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`.
## Usage
### 5.1. Import `TutorialKit` into your view controller:
```swift
import TutorialKit
```
### 5.2. Configure the tutorial appearance by creating an instance of `TutorialConfiguration`:
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.
```swift
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`.
### 5.3. Configure the Tutorial Data:
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.
```swift
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.
### 5.4. Initialize and Present the TutorialViewController:
Create an instance of TutorialViewController with your data and configuration, then present it.
```swift
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.
## Author
James Thang, find me on [LinkedIn](https://www.linkedin.com/in/jamesthang/)