SwiftUI library for a walkthrough or onboarding flow with tap actions

Overview

Concentric Onboarding

iOS library for a walkthrough or onboarding flow with tap actions written with SwiftUI


We are a development agency building phenomenal apps.




Twitter Version Carthage Compatible License Platform

Usage

  1. Create View's descendant class for your pages.
  2. Create at least two pages and fill them with content.
  3. Create an array of colors (same number as pages).
  4. Create ConcentricOnboardingView and place it in your view hierarchy.
struct ContentView: View {
    var body: some View {
        return ConcentricOnboardingView(pages: <your_pages>, bgColors: <your_colors>)
    }
}
  1. Pass duration as an argument if you want animation to be faster/slower
ConcentricOnboardingView(pages: <your_pages>, bgColors: <your_colors>, duration: 2.0)

Public interface

currentPageIndex - read only property to check what page index you are currently on

goToNextPage(animated: Bool = true) - call this method manually if you need to
goToPreviousPage(animated: Bool = true) - call this method manually if you need to

Assignable closures

animationWillBegin - called before animation starts
animationDidEnd - called after animation ends
didGoToLastPage - called after animation leading to last page ends
insteadOfCyclingToFirstPage - replaces default navigation to first page after pressing next on last page
insteadOfCyclingToLastPage - replaces default navigation to last page after pressing prev on first page while navigating backwards
didPressNextButton - replaces default button action with user's custom closure

Examples

To try ConcentricOnboarding examples:

  • Clone the repo https://github.com/exyte/ConcentricOnboarding.git
  • Open terminal and run cd <ConcentricOnboardingRepo>/Example/
  • Run pod install to install all dependencies
  • Run open ConcentricOnboardingExample.xcworkspace/ to open project in the Xcode
  • Try it!

Installation

CocoaPods

To install ConcentricOnboarding, simply add the following line to your Podfile:

pod 'ConcentricOnboarding'

Carthage

To integrate ConcentricOnboarding into your Xcode project using Carthage, specify it in your Cartfile

github "Exyte/ConcentricOnboarding"

Manually

Drop ConcentricOnboardingView.swift in your project.

Requirements

  • iOS 13+
  • Xcode 11+

Acknowledgements

Many thanks to Cuberto team for the design idea and inspiration.

Comments
  • Question on how to use ...

    Question on how to use ...

    Thanks for this very nice Onboarding Screen. My question is related how you envision to leave the cycle after cycling through e.g. 4 screens and then navigate to different screen. I also wonder if you thought about how to perform different actions between the different screens, e.g. asking for Location service permission, Phone book permission, PushNotification permission

    Thanks Armin

    opened by wowo4k 8
  • Example code does not working

    Example code does not working

    Hi, I used xcode 13.3, MacOS 12.4 with M1. The 2nd screen does not show up correctly. Below is what I see.

    The result comes from the example code, no change at all.

    Screen Shot 2022-07-28 at 5 17 52 PM
    opened by TheGatesOfParadise 2
  • Issue with Swift Package Manager: Invalid Manifest

    Issue with Swift Package Manager: Invalid Manifest

    I tried to import this library multiple times, but alway get the same error:

    invalidManifestFormat("/var/folders/hq/xht3hkxj0sj9dmb9l8_s5zm40000gn/T/TemporaryFile.CbTs13.swift:8:15: error: 'v14' is unavailable\n .iOS(.v14)\n ^~~\nPackageDescription.SupportedPlatform:49:27: note: 'v14' was introduced in PackageDescription 5.3\n public static var v14: PackageDescription.SupportedPlatform.IOSVersion\n ^", diagnosticFile: Optional(AbsolutePath:"/Users/dimaprivat/Library/Developer/Xcode/DerivedData/MindMends-dhvxmufwqyjuymghawxgovoejhaf/SourcePackages/ManifestLoading/concentriconboarding.dia")) in https://github.com/exyte/ConcentricOnboarding

    Does it not work with iOS 14?

    opened by GrosserStuhl 2
  • Not working when importing with swift package manager

    Not working when importing with swift package manager

    Hey there ! I tried importing this library inside my project using the swift package manager. Import worked well but there's a lot of compiler error, as you can see on this: print screen.

    Screenshot 2020-10-11 at 11 16 39

    I'm on Xcode 12.0.1 and my project is targeting iOS 13.4+

    As a workaround I installed the file manually and it's working.

    opened by RosayGaspard 2
  • Accessibility of Views

    Accessibility of Views

    Hi this looks beautiful and I would love to add it to my app. I didn't read any mention about the accessibility component. Is the accessibility using VoiceOver working properly for these views as well? Thank you!

    opened by saamerm 1
  • updates on adding next icon to the next circle button.

    updates on adding next icon to the next circle button.

    I made a modification to the next circle button, I read through the source code I discovered the circle button looked for asset file name "arrow" In most cases people might not know they are supposed to add an arrow image asset file into their project. so I made a modification to use system next arrow Icon and also user can set their prefered next Icon button from the nextIcon prop in the ConcentricOnboarding struct...

    please review the PR and if there is anything needed let me know I will modify it.. and also below is the screenshot of what it looks like...

    Screenshot 2021-01-21 at 4 48 06 AM

    opened by DAMMAK 1
  • Navigate to another swiftui view in the insteadOfCyclingToFirstPage callback

    Navigate to another swiftui view in the insteadOfCyclingToFirstPage callback

    Hello In the callback a.insteadOfCyclingToFirstPage = { print("do your thing") } how can i move to a new swiftUI View. In this point I don't have any navigationView or NavigationLink. For example if i use something like that:

    a.insteadOfCyclingToFirstPage = { MyView() } doesn't do anything (and i think its normal). I receive as warning Result of 'MyView' initializer is unused

    Thanks

    opened by anestis1000 1
  • support swipe

    support swipe

    it would be great to add support for swipes, disable the button at the bottom to switch to the next screen and turn off the background color animation, but so that the animation of switching to the next screen remains and add indicator pages?

    opened by xakacuk 1
  • Default next button is invisible

    Default next button is invisible

    case .onboardingPage:
                if (val != nil) {
                    HomeView()
                } else {
                    ConcentricOnboardingView(pageContents: onboardingPages ).duration(1.0).nextIcon("chevron.forward")
                        .insteadOfCyclingToFirstPage {
                        viewRouter.currentPage = .signInPage
                    }
                }
            }
    

    This is the area where I expect to see the chevron.forward default next button, but I don't see it.

    image
    opened by rohandalvi 1
Owner
Exyte
Exyte
SwiftUI: Components Library Inspired by Twitter's Bootstrap

bootswiftui SwiftUI: Components Library Inspired by Twitter's Bootstrap Warning This is just SwiftUI exercise. Please do not consider using this repo

Robert Sandru 1 Oct 27, 2022
A paging scroll view for SwiftUI, using internal SwiftUI components

PagingView A paging scroll view for SwiftUI, using internal SwiftUI components. This is basically the same as TabView in the paging mode with the inde

Eric Lewis 18 Dec 25, 2022
SwiftUI-Drawer - A bottom-up drawer in swiftUI

SwiftUI-Drawer A bottom-up drawer view. Contents Installation Examples Installat

Bruno Wide 9 Dec 29, 2022
SwiftUI-Margin adds a margin() viewModifier to a SwiftUI view.

SwiftUI-Margin adds a margin() viewModifier to a SwiftUI view. You will be able to layout the margins in a CSS/Flutter-like.

Masaaki Kakimoto(柿本匡章) 2 Jul 14, 2022
BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen

BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen. It is especially well

Alexis (Aubry) Akers 5.3k Jan 2, 2023
A library to recreate the iOS Apple Music now playing transition

DeckTransition DeckTransition is an attempt to recreate the card-like transition found in the iOS 10 Apple Music and iMessage apps. Hereʼs a GIF showi

Harshil Shah 2.2k Dec 15, 2022
:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Swift UI library made by @Ramotion

FLUID SLIDER A slider widget with a popup bubble displaying the precise value selected written on Swift. We specialize in the designing and coding of

Ramotion 1.9k Dec 23, 2022
A library, which adds the ability to hide navigation bar when view controller is pushed via hidesNavigationBarWhenPushed flag

HidesNavigationBarWhenPushed A library, which adds the ability to hide navigation bar when view controller is pushed via hidesNavigationBarWhenPushed

Danil Gontovnik 55 Oct 19, 2022
⚡️ A library of widgets and helpers to build instant-search applications on iOS.

By Algolia. InstantSearch family: InstantSearch iOS | InstantSearch Android | React InstantSearch | InstantSearch.js | Angular InstantSearch | Vue Ins

Algolia 567 Dec 20, 2022
A drop-in universal library helps you to manage the navigation bar styles and makes transition animations smooth between different navigation bar styles

A drop-in universal library helps you to manage the navigation bar styles and makes transition animations smooth between different navigation bar styles while pushing or popping a view controller for all orientations. And you don't need to write any line of code for it, it all happens automatically.

Zhouqi Mo 3.3k Dec 21, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Exyte 5.9k Jan 1, 2023
Non-intrusive iOS UI library to implement overlay based interfaces

OverlayContainer is a UI library written in Swift. It makes easier to develop overlay based interfaces, such as the one presented in the Apple Maps, S

Applidium 1k Jan 4, 2023
An iOS Library that makes shadows management easy on UIView.

ShadowView is an iOS Shadow library that makes view's shadow implementation easy and sweet ?? ?? . Add simple shadows to add a gaussian blurred projec

Pierre 404 Dec 8, 2022
StarryStars is iOS GUI library for displaying and editing ratings

StarryStars StarryStars is iOS GUI library for displaying and editing ratings Features StarryStars' RatingView is both IBDesignable and IBInspectable

Peter Prokop 175 Nov 19, 2022
Lightweight touch visualization library in Swift. A single line of code and visualize your touches!

TouchVisualizer is a lightweight pure Swift implementation for visualising touches on the screen. Features Works with just a single line of code! Supp

Morita Naoki 851 Dec 17, 2022
Wallet is a library to manage cards and passes.

Wallet Wallet is a replica of the Apple's Wallet interface. Add, delete or present your cards and passes. Feel free to use this pod in your project an

Russ St Amant 360 Feb 4, 2022
macOS GUI Library for the Nim Programming Language

NimCocoa NimCocoa is an experimental implementation of a Native GUI for the Nim programming language running on macOS. Rather than rely on low level c

null 32 Dec 8, 2022
ScrollViewPlus is a small library that provides some helpful extension and capabilities for working with NSScrollView.

ScrollViewPlus is a small library that provides some helpful extension and capabilities for working with NSScrollView.

Chime 12 Dec 26, 2022
Customizable School Timetable Library

JHTimeTable SwiftUI Customizable School TimeTable Library 설치 Swift Package Manager 사용하기 JHTimeTable뷰를 선언합니다. JHTimeTable(lineColor : .secondary,

LeeProgrammer 4 Jan 6, 2023