Git Product home page Git Product logo

kjoverlaytutorial's Introduction

KJOverlayTutorial

An convenient way to display tutorial overlay for iOS

Release

1.0.0

  • Initial release
  • Support Swift 3.x

2.0.0

  • Add animations
  • Support Swift 4.x

Preview


Usage

Text with Icon Tutorial

// tut1
let focusRect1 = self.tvTut.frame
let icon1 = UIImage(named: "ico_hand")!
let icon1Frame = CGRect(x: self.view.bounds.width/2-72/2, y: focusRect1.maxY + 12, width: 72, height: 72)
let message1 = "Hello, this is tutorial 1"
let message1Center = CGPoint(x: self.view.bounds.width/2, y: icon1Frame.maxY + 24)
let tut1 = KJTutorial.textWithIconTutorial(focusRectangle: focusRect1, text: message1, textPosition: message1Center, icon: icon1, iconFrame: icon1Frame)

// tuts
let tutorials = [tut1]
self.tutorialVC.tutorials = tutorials
self.tutorialVC.showInViewController(self)


Multiple Tutorial

// tut1
let focusRect1 = self.imvTut.frame
let message1 = "Hello, this is your avatar"
let message1Center = CGPoint(x: self.view.bounds.width/2, y: focusRect1.maxY + 24)
var tut1 = KJTutorial.textTutorial(focusRectangle: focusRect1, text: message1, textPosition: message1Center)
tut1.isArrowHidden = true

// tut2
let focusRect2 = self.btnTut1.frame
let icon2 = UIImage(named: "ico_hand1")!
let icon2Frame = CGRect(x: self.view.bounds.width/2-72/2, y: focusRect2.maxY + 12, width: 72, height: 72)
let message2 = "Tap to update your profile"
let message2Center = CGPoint(x: self.view.bounds.width/2, y: icon2Frame.maxY + 24)
let tut2 = KJTutorial.textWithIconTutorial(focusRectangle: focusRect2, text: message2, textPosition: message2Center, icon: icon2, iconFrame: icon2Frame)

// tut3
let focusRect3 = self.btnTut2.frame
let icon3 = UIImage(named: "ico_hand1")!
let icon3Frame = CGRect(x: self.view.bounds.width/2-72/2, y: focusRect3.maxY + 12, width: 72, height: 72)
let message3 = "Tap to update your payments"
let message3Center = CGPoint(x: self.view.bounds.width/2, y: icon3Frame.maxY + 24)
let tut3 = KJTutorial.textWithIconTutorial(focusRectangle: focusRect3, text: message3, textPosition: message3Center, icon: icon3, iconFrame: icon3Frame)

// tut4
let focusRect4 = self.btnTut3.frame
let icon4 = UIImage(named: "ico_hand1")!
let icon4Frame = CGRect(x: self.view.bounds.width/2-72/2, y: focusRect4.maxY + 12, width: 72, height: 72)
let message4 = "Tap to edit your settings"
let message4Center = CGPoint(x: self.view.bounds.width/2, y: icon4Frame.maxY + 24)
let tut4 = KJTutorial.textWithIconTutorial(focusRectangle: focusRect4, text: message4, textPosition: message4Center, icon: icon4, iconFrame: icon4Frame)

// tuts
let tutorials = [tut1, tut2, tut3, tut4]
self.tutorialVC.tutorials = tutorials
self.tutorialVC.showInViewController(self)


Using SwiftFontIcon

Check here for correct icon name http://astronautweb.co/snippet/font-awesome/

Because FontAwesome provide icon name is not correct: https://fontawesome.com/icons?d=gallery

For example: "hand-point-up", actually is "handoup"

kjoverlaytutorial's People

Contributors

tranquan avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.