Awesome tool for create tutorial walkthrough or coach tour

Overview

Platform: iOS 9+ Language: Swift 5 Cocoapods compatible License: MIT

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

icon

Example

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

Swift Example

ObjC Example

Installation

CocoaPods

AwesomeSpotlightView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'AwesomeSpotlightView'

Manually

  • Just drop AwesomeSpotlightView folder in your project.
  • You're ready to use AwesomeSpotlightView!

Usage

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:

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

Author

Comments
  • Arrow not shown

    Arrow not shown

    Hello!

    When i set enableArrowDown to true, no arrow appears. i just do spotlightView.enableArrowDown = true. Should i do something else?

    Thanks and best regards,

    opened by llKoull 6
  • Possible to enable user interaction within the spotlight?

    Possible to enable user interaction within the spotlight?

    Hi,

    I'm loving this library and have been using it for my new app.

    Currently, I spotlight a view I want my user to tap, but he has to tap twice in order to first dismiss the spotlight view. Is it possible to enable user interaction within the spotlight so I can eliminate the first tap?

    Thank you, Andrew

    enhancement 
    opened by aabosh 6
  • Setting spotlightMaskColor has no effect

    Setting spotlightMaskColor has no effect

    Since the spotlightMask fill colour is only set on setupMask() which in turn is only triggered by init(frame there is no way to set the spotlight mask colour.

    bug 
    opened by markst 2
  • CocoaPods Support

    CocoaPods Support

    Will you please provide CocoaPods support? https://github.com/aleksandrshoshiashvili/AwesomeSpotlightView/commit/9404ece60b0b9504994eb83144aa276fceab5a75

    opened by naeemshaikh90 2
  • Swift4 and Objective-C support

    Swift4 and Objective-C support

    I wanted to use it in the Objective-C project. However, code downloaded from CocoaPods did not correspond to Objective-C. So, I modified it so that it can be used in Objective-C project. Also in Issue #16 object-c usage sample , I also created a sample project.

    Please merge.


    • Swift 4 compatible
    • Implement the following modification so that it can be called from Objective-C
      • Write attribute @objcMembers or @objc
      • Explicitly describe reference range public
      • Specify enum type as Int
      • Support function provided because struct is not supported
    • Create sample code for Objective-C
    opened by FromF 1
  • Podspecs not updated correctly

    Podspecs not updated correctly

    The podspecs for versions above 0.1.4 have not been updated correctly.

    Versions 0.1.5 through to 0.1.8 are still pointing to the 0.1.4 release tag:

    "source": {
        "git": "https://github.com/aleksandrshoshiashvili/AwesomeSpotlightView.git",
        "tag": "0.1.4"
      },
    

    And version 0.1.8 does not correctly specify that it is to be build with Swift 4:

      "pushed_with_swift_version": "3.0"
    

    You can see the published pod spec for 0.1.8 here: https://github.com/CocoaPods/Specs/blob/master/Specs/1/1/5/AwesomeSpotlightView/0.1.8/AwesomeSpotlightView.podspec.json

    opened by lukeharries 1
  • Pod Localizator bundlePath resolves wrong.

    Pod Localizator bundlePath resolves wrong.

    When installing as a pod.

    Bundle.main.path(forResource: "AwesomeSpotlightViewBundle", ofType: "bundle") 
    

    resolves incorrectly.

    The bundle path should be as following:

    if let bundlePath = Bundle(for: AwesomeSpotlightView.self).path(forResource: "Localizable", ofType: "plist") {
    
    opened by markst 1
  • Feature Request : Extra margin parameter for circles

    Feature Request : Extra margin parameter for circles

    Hello,

    First of of thanks a lot for such useful library 👍

    For images "Circle" mode just covers the borders of image that would be great if we can define extra margin for the circle around the item so it can be bigger

    Cheers

    enhancement 
    opened by ergunkocak 1
  • [Solved] X,Y issues in some cases.

    [Solved] X,Y issues in some cases.

    Hello,

    Thanks for the efforts on this beautiful library, I had to tweak it a little bit, as I needed to highlight an item on the UINavigationBar, but it only shows on the view below the NavigationBar, so what I did is

    extension UIView {
        func getGlobalPoint(toView: UIView? = UIApplication.shared.delegate?.window!) -> CGPoint {
            return self.superview!.convert(self.frame.origin, to: toView)
        }
    }
    

    Then on any view I would define my CGRect according to the CGPoint of the view I want to spotlight

    let currentWindow: UIWindow? = UIApplication.shared.keyWindow
    let aRect = CGRect(origin: your_view.getGlobalPoint(toView: currentWindow?.superview), size: CGSize(width: your_view.width, height: your_view.height))
    let spotlightView = AwesomeSpotlightView(frame: currentWindow!.frame, spotlight: [spotlight1])
    currentWindow?.addSubview(spotlightView)
    

    Here is the full code

    let currentWindow: UIWindow? = UIApplication.shared.keyWindow
                
    let aRect = CGRect(origin: your_view.getGlobalPoint(toView: currentWindow?.superview), size: CGSize(width: your_view.width, height: your_view.height))
                
    let spotlight1 = AwesomeSpotlight(withRect: aRect, shape: AwesomeSpotlight.AwesomeSpotlightShape.roundRectangle, attributedText: NSAttributedString(string: " Some Display Text"), margin: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10), isAllowPassTouchesThroughSpotlight: true)
                
    let spotlightView = AwesomeSpotlightView(frame: currentWindow!.frame, spotlight: [spotlight1])
    spotlightView.cutoutRadius = 8
    spotlightView.delegate = self
    currentWindow?.addSubview(spotlightView)
                
    spotlightView.start()
    

    I might open a PR with this tweak later, but I'm a bit busy, therefore I shared the solution here.

    Thanks again for the efforts @aleksandrshoshiashvili

    opened by Kaakati 0
Releases(0.1.8)
Owner
Alexander Shoshiashvili
Senior iOS developer
Alexander Shoshiashvili
An iOS framework to easily create simple animated walkthrough, written in Swift.

Intro Overview An iOS framework to easily create simple animated walkthrough, written in Swift. Requirements iOS8 Installation with CocoaPods Intro is

Nurdaulet Bolatov 33 Oct 1, 2021
Simple coach mark library written in Swift

Minamo Simple coach mark library written in Swift Usage Initialize let rippeleView = RippleView() rippeleView.tintColor = UIColor(red: 0.3, green: 0.7

yukiasai 248 Nov 24, 2022
SwiftUI library for a walkthrough or onboarding flow with tap actions

Concentric Onboarding iOS library for a walkthrough or onboarding flow with tap actions written with SwiftUI We are a development agency building phen

Exyte 955 Jan 4, 2023
SwiftyWalkthrough is a library for creating great walkthrough experiences in your apps, written in Swift.

SwiftyWalkthrough is a library for creating great walkthrough experiences in your apps, written in Swift. You can use the library to allow users to navigate and explore your app, step by step, in a predefined way controlled by you.

Rui Costa 370 Nov 24, 2022
A nice tutorial like the one introduced in the Path 3.X App

ICETutorial Welcome to ICETutorial. This small project is an implementation of the newly tutorial introduced by the Path 3.X app. Very simple and effi

Icepat 798 Jun 30, 2022
Showcase your awesome new app features 📱

WhatsNewKit enables you to easily showcase your awesome new app features. It's designed from the ground up to be fully customized to your needs. Featu

Sven Tiigi 2.8k Jan 3, 2023
A swifty iOS framework that allows developers to create beautiful onboarding experiences.

SwiftyOnboard is being sponsored by the following tool; please help to support us by taking a look and signing up to a free trial SwiftyOnboard A simp

Juan Pablo Fernandez 1.2k Jan 2, 2023
An iOS framework to easily create a beautiful and engaging onboarding experience with only a few lines of code.

Onboard Click Here For More Examples Important Onboard is no longer under active development, and as such if you create any issues or submit pull requ

Mike 6.5k Dec 17, 2022
Create walkthroughs and guided tours (coach marks) in a simple way, with Swift.

Add customizable coach marks into your iOS project. Available for both iPhone and iPad. ⚠️ Instructions 2.0.1 brings a couple of breaking changes, ple

Frédéric Maquin 4.9k Jan 3, 2023
An iOS framework to easily create simple animated walkthrough, written in Swift.

Intro Overview An iOS framework to easily create simple animated walkthrough, written in Swift. Requirements iOS8 Installation with CocoaPods Intro is

Nurdaulet Bolatov 33 Oct 1, 2021
GLWalkthrough is an easily configurable plug-and-play tool to add walkthrough or coachmarker functionality to your app with ease.

GLWalkthrough Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installation GLWa

Gokul 40 Dec 17, 2022
Browse the streets of Los Angeles on an Augmented Reality historical walking tour.

Ruscha AR 0.3 Browse the streets of Los Angeles on an Augmented Reality historical walking tour. Explore Hollywood through the photos of Ed Ruscha. Th

Rick van Voorden 2 Jul 9, 2022
Guide users through your SwiftUI app with coach marks

Guide users through your SwiftUI app with coach marks

Jake Heiser 15 Nov 22, 2022
Simple coach mark library written in Swift

Minamo Simple coach mark library written in Swift Usage Initialize let rippeleView = RippleView() rippeleView.tintColor = UIColor(red: 0.3, green: 0.7

yukiasai 248 Nov 24, 2022
SwiftUI library for a walkthrough or onboarding flow with tap actions

Concentric Onboarding iOS library for a walkthrough or onboarding flow with tap actions written with SwiftUI We are a development agency building phen

Exyte 955 Jan 4, 2023
SwiftyWalkthrough is a library for creating great walkthrough experiences in your apps, written in Swift.

SwiftyWalkthrough is a library for creating great walkthrough experiences in your apps, written in Swift. You can use the library to allow users to navigate and explore your app, step by step, in a predefined way controlled by you.

Rui Costa 370 Nov 24, 2022
SwiftUI library for a walkthrough or onboarding flow with tap actions

Concentric Onboarding iOS library for a walkthrough or onboarding flow with tap actions written with SwiftUI We are a development agency building phen

Exyte 956 Jan 4, 2023
🚀 Create XCFrameworks with ease! A Command Line Tool to create XCFramework for multiple platforms at one shot! The better way to deal with XCFrameworks for iOS, Mac Catalyst, tvOS, macOS, and watchOS.

Surmagic ?? Create XCFramework with ease! A Command Line Tool to create XCFramework for multiple platforms at one shot! The better way to deal with XC

Muhammed Gurhan Yerlikaya 260 Dec 28, 2022
DevTool - A simple UI and powerful Mac OS application, Such as JSON-Formatting tool, JSON-to-model tool, AppIcon generator, Network-Request tool...

?? ?? ?? A simple UI and powerful Mac OS application. It is a collection of tools commonly used in my development work. Such as JSON-Formatting tool, JSON-to-model tool, AppIcon generator, Network-Request tool...

渠晓友 3 Dec 21, 2022