DMScrollBar - SwiftGit

Uncategorized

DMScrollBar

November 30, 2023

Example

iOS style	Default style	iOS & Default combined style	Absolutely custom style	Right label style	Easy to change

Description

DMScrollBar is best in class customizable ScrollBar for ScrollView. It has:

Showing info label when user interaction with ScrollBar is started
Decelerating, Bounce & Rubber band mechanisms
Super customizable configuration
Different states for active / inactive states
Haptic feedback on interaction start / end and when info label changes on specified offset
Super Fancy animations

Installation

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


                                              
                                                pod ‘DMScrollBar’, ‘~> 1.0.0’

and run


                                              
                                                pod install

Usage

On any ScrollView you want to add the ScrollBar with default configuration, just call (see result on Gid #2):


                                              
                                                scrollView.configureScrollBar()

If you want to provide title for info label, implement DMScrollBarDelegate protocol on your ViewController:


                                              
                                                extension ViewController: DMScrollBarDelegate {

/// In this example, this method returns the section header title for the top visible section

func indicatorTitle(forOffset offset: CGFloat) -> String? {

return “Your title for info label”

}

}

If you want to have iOS style scroll bar, configure ScrollBar with .iosStyle config (Next code will create config for the Scroll Bar for Gif #1):


                                              
                                                scrollView.configureScrollBar(with: .iosStyle, delegate: self)

Any ScrollBar configuration can be easily combined with another one (Next code will create config for the Scroll Bar for Gif #3):


                                              
                                                let iosCombinedDefaultConfig = DMScrollBar.Configuration(

indicator: .init(

normalState: .iosStyle(width: 3),

activeState: .default

)

)

scrollView.configureScrollBar(with: iosCombinedDefaultConfig, delegate: self)

If you want to configure scroll bar, with custom config, create configuration and call configureScrollBar (Next code will create config for the Scroll Bar for Gif #4):


                                              
                                                let customConfig = DMScrollBar.Configuration(

isAlwaysVisible: false,

hideTimeInterval: 1.5,

shouldDecelerate: false,

indicator: DMScrollBar.Configuration.Indicator(

normalState: .init(

size: CGSize(width: 35, height: 35),

backgroundColor: UIColor(red: 200 / 255, green: 150 / 255, blue: 80 / 255, alpha: 1),

insets: UIEdgeInsets(top: 8, left: 0, bottom: 8, right: 0),

image: UIImage(systemName: “arrow.up.and.down.circle”)?.withRenderingMode(.alwaysOriginal).withTintColor(UIColor.white),

imageSize: CGSize(width: 20, height: 20),

roundedCorners: .roundedLeftCorners

),

activeState: .custom(

config: .init(

size: CGSize(width: 50, height: 50),

backgroundColor: UIColor.brown,

insets: UIEdgeInsets(top: 8, left: 0, bottom: 8, right: 6),

image: UIImage(systemName: “calendar.circle”)?.withRenderingMode(.alwaysOriginal).withTintColor(UIColor.cyan),

imageSize: CGSize(width: 28, height: 28),

roundedCorners: .allRounded

),

textConfig: nil

),

stateChangeAnimationDuration: 0.5,

insetsFollowsSafeArea: true,

animation: .init(showDuration: 0.75, hideDuration: 0.75, animationType: .fadeAndSide)

),

infoLabel: DMScrollBar.Configuration.InfoLabel(

font: .systemFont(ofSize: 15),

textColor: .white,

distanceToScrollIndicator: 40,

backgroundColor: .brown,

textInsets: UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8),

maximumWidth: 300,

roundedCorners: .init(radius: .rounded, corners: [.topLeft, .bottomRight]),

animation: .init(showDuration: 0.75, hideDuration: 0.75, animationType: .fadeAndSide)

)

)

scrollView.configureScrollBar(with: customConfig, delegate: self)

GitHub

View Github

#cocoapods #collectionview #ios #scroll #scrollbar #scrollindicator #scrollview #scrollviewcomponent #swift #tableview #uicollectionview #uiscrollview #uitableview