Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

ECLaboratorio/BubbleShowCase-iOS

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BubbleShowCase

Carthage compatible Download CocoaPods platforms License: MIT

BubbleShowCase is an elegant and easy to use framework that provides developers with a user-friendly buble-like view you can display to help your users understand your App features, improve the use of some functionality or display your App onboarding. It consists of a translucent view that obscures the screen, a bubble that displays the message for your user and the targeted view itself.

GIF

Requirement

  • iOS 9.0+
  • Swift 4.0+

Installation

CocoaPods

pod 'BubbleShowCase'

Carthage

To integrate BubbleShowCase into your Xcode project using Carthage, create a Cartfile and add:

github "ECLaboratorio/BubbleShowCase-iOS"

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

If you don't have know what HomeBrew is, check their site for installation instructions.

Usage

Basic

It's pretty simple to show-case a feature in your App by using BubbleShowCase framework. All you have to do is initializing a show case by using one of its constructors, customizing it the way you want and calling its show method:

let showCase: BubbleShowCase! = BubbleShowCase(target: myBarButton)
showCase.titleText = "You know what?"
showCase.descriptionText = "You can do amazing things if you tap on this navbar button"
showCase.image = UIImage(named: "show-case-bar-button")
showCase.show()		// Simple as that

Note: You should call show when the target is loaded, set and positioned in the screen.

Supported targets

  • UIView
  • UITableView
  • UICollectionView
  • UIBarButtonItem
  • UITabBarItem

UICollectionViewCell and UITableViewCell

BubbleShowCase offers several constructors depending on the targets. Use the specific constructor in case of UITableViewCell or UICollectionViewCell:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
	if indexPath.row == Constants.IndexPathForShowCase {
		let showCase = BubbleShowCase(cell: cell, target: nil, arrowDirection: .down)
		showCase.titleText = "Am I not in the screen?"
		showCase.descriptionText = "I'll stop the scroll and make sure the cell displays"
		showCase.shadowColor = UIColor.green
		
		showCase.show()
	}
}

UI Customization

Customize your show cases according to your App style:

showCase.color = UIColor.yellow
showCase.textColor = UIColor.black
showCase.shadowColor = UIColor.black
showCase.crossColor = UIColor.red
showCase.arrowDirection = .up
showCase.titleText = "My first show case"
showCase.descriptionText = "I hope you enjoy it"
showCase.image = UIImage(named: "my-show-case-image")
showCase.delegate = self
showCase.titleFont = UIFont(name: "Roboto-Bold", size: 14)!
showCase.descriptionFont = UIFont(name: "Roboto-Regular", size: 13)!

showCase.showAnimationDuration = 0.2
showCase.dismissAnimationDuration = 0.2
showCase.flickerAnimationDuration = 0.2

// Use this to force your users to tap or perform any other gesture over the target view
showCase.isCrossDismissable = false	

Concatenating show cases

Do you need to show-case several features one after another? That's easy, you just have to call concat(bubbleShowCase:) or show(after:). The former concatenates the argument as the next show case to show whereas the latter displays the show case after the argument:

let firstShowCase = BubbleShowCase(...)
let secondShowCase = BubbleShowCase(...)

firstShowCase.concat(bubbleShowCase: secondShowCase)	// secondShowCase.show(after: firstShowCase)

BubbleShowCaseDelegate

Conform to BubbleShowCaseDelegate to be aware of the show case status in the screen or to be notified of common gestures recognized over the target:

let showCase = BubbleShowCase(...)
showCase.delegate = self

...
...

func bubbleShowCase(_ bubbleShowCase: BubbleShowCase, didTap target: UIView!, gestureRecognizer: UITapGestureRecognizer) {
	print("Target was tapped!")
}

Note: In order to show-case a UIBarButton, this must be constructed by means of a custom view:

let myBarButton = UIBarButtonItem(customView: myCustomView)
let showCase: BubbleShowCase! = BubbleShowCase(target: myBarButton)
...
showCase.show()

For more information, please check our sample app.

If you have any issues or feedback, please visit issue section.
Please feel free to collaborate make this framework better.

License

BubbleShowCase-iOS is available under the MIT license. See the LICENSE file for more info.

About

ShowCase is a framework that provides with a view that you can display to help your users understand your App features

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.