A customizable UI element written in Swift that shows multiple animated progress bars similar to Instagram stories

by iOS Example

StoryBars

A customizable UI element written in Swift that shows multiple animated progress bars similar to Instagram stories.

✅ Supports UIStoryBoard Interface Builder!

✅ Interactive!

Table of contents

? Installation

To integrate using Apple’s Swift package manager, add the following as a dependency to your Package.swift: 

.package(url: "https://github.com/yusif-projects/StoryBars", .upToNextMajor(from: "1.0.0"))

Then specify "StoryBars" as a dependency of the Target in which you wish to use StoryBars. Here’s an example PackageDescription:

// swift-tools-version:5.5
import PackageDescription

let package = Package(
    name: "MyPackage",

    products: [
        .library(name: "MyPackage", targets: ["MyPackage"])
    ],

    dependencies: [
        .package(url: "https://github.com/yusif-projects/StoryBars", .upToNextMajor(from: "1.0.0"))
    ],

    targets: [
        .target(name: "MyPackage", dependencies: ["StoryBars"])
    ]
)

Or you can use Xcode’s built-in tools:

  • Step 1: Select your project from the project navigator;
  • Step 2: Select your project from the project and targets list;
  • Step 3: Select package dependencies tab;
  • Step 4: Click the + button;

  • Step 5: Type https://github.com/yusif-projects/StoryBars in the search bar;
  • Step 6: Select StoryBars from the results list;
  • Step 7: Select Up to Next Major Version from the dependency rules list;
  • Step 8: Type 1.0.0 in the text field near it;
  • Step 9: Select your project from the projects list;
  • Step 10: Click the Add Package button;

  • Step 11: Select your target from the targets list;
  • Step 12: Click the Add Package button.

How to get the latest update:

  • Step 13: Right click (or CTRL click) on the StoryBars in the project navigator;
  • Step 14: Select Update Package.

? Usage

You can find an example project in this repository that demonstrates the usage of StoryBars.

Example using UIStoryBoard Interface Builder:

  • Drag and drop a UIView object from the object library;
  • In the identity inspector change the class from UIView to StoryBars;
  • Customize the parameters in the attributes inspector;
  • Drag and drop another UIView object from the object library;
  • In the identity inspector change the class from UIView to StoryBarsInteractiveView;
  • Connect both the StoryBars and StoryBarsInteractiveView objects to your controller by creating outlets;
  • Assign the StoryBars object to StoryBarsInteractiveView object’s storyBars property;
  • Add an action that happens when a bar fills up by assigning a body to the StoryBars object’s storyEndAction method.

class ViewController: UIViewController {
    
    @IBOutlet weak var storyBars: StoryBars!
    @IBOutlet weak var storyBarsInteractiveView: StoryBarsInteractiveView!

    override func viewDidLoad() {
        super.viewDidLoad()

        storyBarsInteractiveView.storyBars = storyBars
        
        storyBars.storyEndAction = { newStoryIndex in
            // Handler
        }
    }

}

In the viewDidAppear() call the start() method of your StoryBars object.

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    storyBars.start()
}

? License

Apache

GitHub

View Github