Stepped ProgressBar for iOS

Overview

JKSteppedProgressBar

CI Status Version Platform License

Example

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

Requirements

To use JKSteppedProgressBar Xcode 8.0 or later is required

Installation

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

pod 'JKSteppedProgressBar'

JKSteppedProgressBar can be added and configured directly from storyboard.

How to Add Stepped Progress Bar

  • Add a blank UIView and set constraints
  • Set the Class & Module from identity inspector
  • Set the active & inactive color from Attributes inspector

setting custom title

  • Use the IBOutlet instance to set properties
  • Set your title array to titles property
  progressbar.titles = ["Step 1", "Step 2", "Step 3"]

setting custom title and images

  • Use the IBOutlet instance to set properties
  • Set your title array to titles property
  • Set your images array to images property
  progressbar.titles = ["Step 1", "Step 2", "Step 3"]
  progressbar.images = [
    UIImage(named: "DaisyDuck")!,
    UIImage(named: "MickeyMouse")!,
    UIImage(named: "MinnieMouse")!,
  ]

setting custom color for the progress

  • after setting your titles or images, set the property activeStepColors
progressbar.activeStepColors = [
  UIColor.red,
  UIColor.orange,
  UIColor.green,
]
  • this will change the color whenever you are at that step. For example, when you are at step 1, it will be red. And in second step, the whole progress bar will become orange and when you are at the last step, it will be green. So that the user will get a feeling of accomplishment through the steps.

setting custom active-images

  • this will make it possible to use this as progress for forms
  • Set your images to activeImages property
  • Set your tintActiveImage to tint the images to the active color (default: false)
  • Set your justCheckCompleted to select everything behind the current step but keep the current step highlighted (default: true)
  progressbar.activeImages = [
      UIImage(named: "check")!,
      UIImage(named: "check")!,
      UIImage(named: "check")!,
  ]
  progressbar.tintActiveImage = true
  progressbar.justCheckCompleted = false

Demo

Demo Video

TODO

  • Add image for steps
  • Respect language direction for drawing

Author

License

JKSteppedProgressBar is available under the MIT license. See the LICENSE file for more info.

Comments
  • Code of Latest version in pod for Adding Images

    Code of Latest version in pod for Adding Images

    Hi Team, Thanks for the great lib. I added pod for pod 'JKSteppedProgressBar' to the app, but that is having a older code which doesn't support images as param to be pass.

    In the given code I can found that it is there.

    How can I take the latest version via pod ? please help on the same.

    waiting for user 
    opened by eshajari 5
  • Enhancement / Suggestion

    Enhancement / Suggestion

    Very nice control, I like it. But sometimes I don't want to have the step number display inside the circle, there should be an API to display the a completed step as a full circle vs an empty circle representing a step not completed

    something like this https://designmodo.com/wp-content/uploads/2013/02/711.jpg

    thanks

    enhancement 
    opened by agiguere 3
  • If titles have several lines, only first line is visible

    If titles have several lines, only first line is visible

    Some of my step titles are too long and end up overlapping. I was hoping the titles would automatically wrap so as not to overlap but they didn't. So then I tried replacing spaces by new lines, but then only the first line appears:

    Screenshot 2019-07-11 12 56 46
    opened by sarbogast 2
  • upgrade to 4.2 NS Foundation library

    upgrade to 4.2 NS Foundation library

    Change: Upgrade to Swift 4.2

    Upgrade 4.2

    issues resolved:

    screenshots: if its a new feature or UI issue fix. keep the screenshots fit into the screen and easily identifiable.

    Change Short titles

    Fix: Compatible with Swift 4.2

    opened by phamquan 2
  • Compiler error to swift 4

    Compiler error to swift 4

    Hi I figured out a strange issue when I try to build application: Pods/JKSteppedProgressBar/JKSteppedProgressBar/Classes/SteppedProgressBar.swift:161:27: 'NSForegroundColorAttributeName' has been renamed to 'NSAttributedStringKey.foregroundColor'

    I had to set up on podfile: "pod 'JKSteppedProgressBar'", and i'm using swift 4.0 in project. Do you have any ideias to solve this issue?

    opened by danielideriba 2
  • How to scroll progress bar

    How to scroll progress bar

    I tried adding it to scroll view and searched for some property to allow scrolling It cut from left and right when step increases along with circle spacing Screenshot 2019-05-22 at 8 55 37 AM

    opened by talkabhishek 1
  • refactor: Separated Examples

    refactor: Separated Examples

    Previously we were using single view controller to show both the examples. Now we separated by adding a tab bar controller, which has Title Only section and Image Only section.

    opened by jayahariv 1
  • how can I add different view controllers for each steps??

    how can I add different view controllers for each steps??

    hii,sir could u please help me. I'm new to developing field ,I want to show the stepper in 5 view controllers as step by step process.. thank you in advance

    opened by imtetch 1
  • Swift 3.0 support

    Swift 3.0 support

    On Xcode 8.2, I am unable to run the sample project due to swift 3.0 support issue. This project is either using old swift syntax or it has some issues in build settings.

    help wanted 
    opened by asadali737 1
  • Refactoring

    Refactoring

    Refactored the methods

    • grouped similar methods, image helper, IBInspectable Properties, etc.
    • Added Mark

    Functional Style

    • String class & method added.
    • UIImage method added.
    opened by jayahariv 0
  • Refactoring

    Refactoring

    Refactored the methods

    • grouped similar methods, image helper, IBInspectable Properties, etc.
    • Added Mark

    Functional Style

    • String class & method added.
    • UIImage method added.
    opened by jayahariv 0
  • Is it possible to update the pod for swift 4.2+?

    Is it possible to update the pod for swift 4.2+?

    After doing a pod deintegrate followed by a pod install, every single time I have to replace NSAttributedStringKey from within the pod with NSAttributedString.Key since it was renamed and obsoleted in swift 4.2. It happens at 4 places, 2 from within the same line of screenshot 1.

    Screenshots :

    opened by DavidAmyot 0
  • [Suggestion] I want to achieve active/inactive progress according to index

    [Suggestion] I want to achieve active/inactive progress according to index

    Hello, All things are wonderful and working like a charm but I have one suggestion. I want to achieve a progress bar like this way. Please see attached screenshot.

    Screenshot 2020-08-18 at 12 59 40 PM

    Let's assume I have a below status and want to show it some of them active and inactive based on the activities received from the APIs.

    Progress Status

    1. Order Generated - Active
    2. Email Sent - Still pending (So, I want to be that inactive)
    3. SMS Sent - Active
    4. Order Confirmed - Active

    It would be nice if I can achieve this and an active/inactive index can be manageable rather than sequence index.

    Thanks

    opened by shahbuddin-pb 0
  • Change Inset between checked Image and step circle

    Change Inset between checked Image and step circle

    Hello, Thanks for this awesome pod to make progressStep easier I have one suggestion, is possible to have public var to change inset between checked Image and circle

    Now by default it's 8 in UIImage+UIColor.swift:

    func draw(inside rect: CGRect) {
          let insideRect = rect.insetBy(dx: 8, dy: 8)
          self.draw(in: insideRect)
     }
    

    Cause I have image with white background color and i want it to take all circle like this:

    Screen Shot 2020-07-10 at 11 48 41

    Or is there a way to change checked background color to white ??

    opened by OuSS-90 0
  • Circle radius

    Circle radius

    Sorry, guys, but you have a problem with your understanding of circle radius. Change it to "circle diameter", please. Here link to Wiki: https://en.wikipedia.org/wiki/Radius

    opened by Netochka 1
Releases(0.5.0)
Owner
Johnykutty Mathew
Johnykutty Mathew
Super awesome Swift minion for Core Data (iOS, macOS, tvOS)

⚠️ Since this repository is going to be archived soon, I suggest migrating to NSPersistentContainer instead (available since iOS 10). For other conven

Marko Tadić 306 Sep 23, 2022
A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView and iPhone X safe area support for content reloading. Built for iOS 10 and later.

Arale A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView support for reloading your content. Built f

Putra Z. 43 Feb 4, 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 collection of classic-style UI components for iOS

A collection of classic-style UI components for UIKit, influenced by Windows 95 Introduction This is a little exploration into applying '90s-era desig

Blake Tsuzaki 2.2k Dec 22, 2022
A simple, customizable view for efficiently collecting country information in iOS apps.

CountryPickerView CountryPickerView is a simple, customizable view for selecting countries in iOS apps. You can clone/download the repository and run

Kizito Nwose 459 Dec 27, 2022
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
A message bar for iOS written in Swift.

Dodo, a message bar for iOS / Swift This is a UI widget for showing text messages in iOS apps. It is useful for showing short messages to the user, so

Evgenii Neumerzhitckii 874 Dec 13, 2022
Protocol oriented, type safe, scalable design system foundation swift framework for iOS.

Doric: Design System Foundation Design System foundation written in Swift. Protocol oriented, type safe, scalable framework for iOS. Features Requirem

Jay 93 Dec 6, 2022
A Material Design drop down for iOS

A Material Design drop down for iOS written in Swift. Demo Do pod try DropDown in your console and run the project to try a demo. To install CocoaPods

AssistoLab 2.3k Dec 20, 2022
An easy to use FAQ view for iOS written in Swift

FAQView An easy to use FAQ view for iOS written in Swift. This view is a subclass of UIView. Setup with CocoaPods If you are using CocoaPods add this

Mukesh Thawani 467 Dec 5, 2022
A custom reusable circular / progress slider control for iOS application.

HGCircularSlider Example To run the example project, clone the repo, and run pod install from the Example directory first. You also may like HGPlaceho

Hamza Ghazouani 2.4k Jan 6, 2023
A customizable color picker for iOS in Swift

IGColorPicker is a fantastic color picker ?? written in Swift. Table of Contents Documentation Colors Style Other features Installation Example Gettin

iGenius 272 Dec 17, 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
An iOS picker view to serve all your "picking" needs

Mandoline The PickerView is a UICollectionView that provides a smooth "picking" interface. In order to get the most out of it, a consuming view contro

Blue Apron 883 Nov 28, 2022
A draggable modal for iOS Applications.

Mantle Modal Draggable Modal, PopUp or Menu written in Swift. Description A simple modal resource that uses a UIScrollView to allow the user to close

Ricardo Canales 89 Feb 25, 2022
Material, a UI/UX framework for creating beautiful iOS applications

Material Welcome to Material, a UI/UX framework for creating beautiful applications. Material's animation system has been completely reworked to take

Cosmicmind 12k Jan 2, 2023
Modular and customizable Material Design UI components for iOS

Material Components for iOS Material Components for iOS (MDC-iOS) helps developers execute Material Design. Developed by a core team of engineers and

Material Components 4.6k Dec 29, 2022
Material design components for iOS written in Swift

MaterialKit NOTE: This project is unmaintained. Material design components (inspired by Google Material Design) for iOS written in Swift Please feel f

Le Van Nghia 2.5k Jan 5, 2023
🏞 A simple iOS photo and video browser with optional grid view, captions and selections written in Swift5.0

Introduction ?? MediaBrowser can display one or more images or videos by providing either UIImage objects, PHAsset objects, or URLs to library assets,

Kyle Yi 631 Dec 29, 2022