Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aleksandrshoshiashvili/AwesomeSpotlightView

Awesome tool for create tutorial walkthrough or coach tour
https://github.com/aleksandrshoshiashvili/AwesomeSpotlightView

List: AwesomeSpotlightView

coach education gecco ios mark markup spotlight swift swift3 swiftywalkthrough tutorial

Last synced: 3 days ago
JSON representation

Awesome tool for create tutorial walkthrough or coach tour

Host: GitHub
URL: https://github.com/aleksandrshoshiashvili/AwesomeSpotlightView
Owner: aleksandrshoshiashvili
License: mit
Created: 2017-02-25T01:18:37.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2021-08-09T22:17:40.000Z (over 3 years ago)
Last Synced: 2024-05-19T21:25:21.753Z (7 months ago)
Topics: coach, education, gecco, ios, mark, markup, spotlight, swift, swift3, swiftywalkthrough, tutorial
Language: Swift
Homepage:
Size: 2.49 MB
Stars: 319
Watchers: 8
Forks: 31
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-ios - AwesomeSpotlightView - Tool to create awesome tutorials or educate user to use application. Or just highlight something on screen. Written in Swift. (Walkthrough / Intro / Tutorial / Web View)
awesome-swift - AwesomeSpotlightView - Create tutorial or coach tour. (Libs / UI)
awesome-cocoa - AwesomeSpotlightView
awesome-swift - AwesomeSpotlightView - Create tutorial or coach tour. (Libs / UI)
awesome-ios-star - AwesomeSpotlightView - Tool to create awesome tutorials or educate user to use application. Or just highlight something on screen. Written in Swift. (Walkthrough / Intro / Tutorial / Web View)
fucking-awesome-swift - AwesomeSpotlightView - Create tutorial or coach tour. (Libs / UI)
awesome-swift - AwesomeSpotlightView - Awesome tool for create tutorial walkthrough or coach tour ` 📝 a year ago` (UI [🔝](#readme))

README

        








    

    

    

    

    



 

AwesomeSpotlightView is a nice and simple library for iOS written on Swift 5. It's highly customizable and easy-to-use tool. Works perfectly for tutorial or coach in your app. 

![icon](https://github.com/aleksandrshoshiashvili/AwesomeSpotlightView/raw/master/Resources/gif.gif)

![icon](https://github.com/aleksandrshoshiashvili/AwesomeSpotlightView/raw/master/Resources/gif_1.gif)

## Example

To run the example project, clone the repo, and run `pod install` from the Example directory first.

[Swift Example](https://github.com/aleksandrshoshiashvili/AwesomeSpotlightView/tree/master/AwesomeSpotlightViewDemo)

[ObjC Example](https://github.com/aleksandrshoshiashvili/AwesomeSpotlightView/tree/master/AwesomeSpotlightViewDemoObjC)

## Installation

### CocoaPods

AwesomeSpotlightView is available through [CocoaPods](http://cocoapods.org). To install

it, simply add the following line to your Podfile:

```ruby

pod 'AwesomeSpotlightView'

```

### Swift Package Manager (SPM)

To install `AwesomeSpotlightView` using [Swift Package Manager](https://swift.org/package-manager/) add 

`.package(name: "AwesomeSpotlightView", url: "https://github.com/aleksandrshoshiashvili/AwesomeSpotlightView.git", from: "0.1.15"),"` 

to your Package.swift, then follow the integration tutorial [here](https://swift.org/package-manager#importing-dependencies).

### Manually

* Just drop AwesomeSpotlightView folder in your project.

* You're ready to use AwesomeSpotlightView!

## Usage

```swift

override func viewDidLoad() {

    super.viewDidLoad()

    let spotlight1 = AwesomeSpotlight(withRect: CGRect(x: 75, y: 75, width: 100, height: 100), shape: .circle, text: "spotlight1", isAllowPassTouchesThroughSpotlight: true)

    let spotlight2 = AwesomeSpotlight(withRect: CGRect(x: 20, y: 200, width: 130, height: 25), shape: .rectangle, text: "spotlight2")

    let spotlight3 = AwesomeSpotlight(withRect: CGRect(x: 170, y: 50, width: 30, height: 100), shape: .roundRectangle, text: "spotlight3")

    

    let spotlightView = AwesomeSpotlightView(frame: view.frame, spotlight: [spotlight1, spotlight2, spotlight3])

    spotlightView.cutoutRadius = 8

    spotlightView.delegate = self

    view.addSubview(spotlightView)

    spotlightView.start()

}

```

You can configure AwesomeSpotlightView before you present it using the `start` method. For example:

```objective-c

spotlightView.continueButtonModel = AwesomeTabButton(title: "Next", font: UIFont.italicSystemFont(ofSize: 16.0), isEnable: true)

spotlightView.skipButtonModel.isEnable = true

spotlightView.skipButtonLastStepTitle = "Finish"

spotlightView.showAllSpotlightsAtOnce = false

spotlightView.start()

```

## Configuration AwesomeSpotlight

### `rect` (CGRect)

The rect of spotlight.

### `shape` (AwesomeSpotlightShape)

Shape of spotlight: .rectangle, .roundRectangle, .circle.

### `margin` (UIEdgeInsets)

Margin for cutout shape. You can set extra space for item with this property.

### `isAllowPassTouchesThroughSpotlight` (Bool)

Set true if you want to allow pass touches through spotlight (allow interaction with view below spotlight) (default: false).

### `text` (String)

The text of the caption.

### `attributedText` (AttributedString)

The attributed text of the caption.

## Configuration AwesomeSpotlightView

### `spotlightsArray` ([AwesomeSpotlight])

Modify the spotlights.

### `spotlightMaskColor` (UIColor)

The color of the mask (default: 0,0,0 alpha 0.6).

### `animationDuration` (Double)

Transition animation duration to the next coach mark (default: 0.3).

### `cutoutRadius` (CGFloat)

The cutout rectangle radius (default: 4.0).

### `maxLabelWidth` (Double)

The captions label is set to have a max width of 280px. Number of lines is figured out automatically based on caption contents.

### `labelSpacing` (CGFloat)

Define how far the captions label appears above or below the cutout (default: 35px).

### `enableArrowDown` (Bool)

Icon with Arrow showed between caption text and caption (default: false).

### `textLabelFont` (UIFont)

Fond of caption text label (default: UIFont.systemFont(ofSize: 20.0)).

### `showAllSpotlightsAtOnce` (Bool)

Showed all spotlight at once (at the same time) (default: false).

### `skipButtonLastStepTitle` (String)

This title will show in skip button when user did open last spotlight. (default: Done)

### `continueButtonModel` (AwesomeTabButton)

### `skipButtonModel` (AwesomeTabButton)

You can setup buttons with `AwesomeTabButton` structure: title, font, backgroundColor and isEnable state.

Default for continueButtonModel: title: "Continue", font: UIFont.boldSystemFont(ofSize: 13.0), isEnable: false

Default for skipButtonModel: title: "Skip", font: UIFont.boldSystemFont(ofSize: 13.0), isEnable: false

## AwesomeSpotlightViewDelegate

### 1. Conform your view controller to the AwesomeSpotlightViewDelegate protocol:

`class ViewController: UIViewController, AwesomeSpotlightViewDelegate`

### 2. Assign the delegate to your AwesomeSpotlightView view instance:

`spotlightView.delegate = self`

### 3. Implement the delegate protocol methods:

*Note: All of the methods are optional. Implement only those that are needed.*

- `func spotlightView(_ spotlightView: AwesomeSpotlightView, willNavigateToIndex index: Int)`

- `func spotlightView(_ spotlightView: AwesomeSpotlightView, didNavigateToIndex index: Int)`

- `func spotlightViewWillCleanup(_ spotlightView: AwesomeSpotlightView, atIndex index: Int)`

- `func spotlightViewDidCleanup(_ spotlightView: AwesomeSpotlightView)`

## Inspired by

* [WSCoachMarksView](https://github.com/workshirt/WSCoachMarksView)

## Author

* [Aleksandr Shoshiashvili](https://github.com/aleksandrshoshiashvili)