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
  • Manually
  • Xcode
• 🏗 Usage
• 📝 License

🚚 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