圆形滑块 - 灵活且可定制的实施
环形进度视图
预览
定期检查项目完成进度有点困难,但现在不是了,我们创建了自己的自定义进度视图,以根据任务完成情况衡量单个项目在某一天的进度。这有助于我们生成具有特定数字的每日报告。
现在使用环形进度视图,不再难以衡量结果的爆炸!
A powerful Circular Slider which has been written in SwiftUI
To run the example project, clone the repo, and run from the Example directory.
pod install
Requirements
- iOS 13.0+
- Xcode 12.5+
Installation
Circular Slider is available through CocoaPods. To install it, simply add the following line to your Podfile:
To install it, simply add the following line to your Podfile:
pod 'CircularSlider', git: 'https://github.com/PiyushSelarka/CircularSlider.git', branch: 'main'
Usage
Added import CircularSlider
import CircularSlider
Config
Configration for Circular Slider with completion
CircularSlider(config: Config(minimumValue: 0.0,
maximumValue: 100,
totalValue: 100,
knobRadius: 10,
radius: 125,TotalProgressView: 20.0,
outercircleColor: Color.init(red: 64/255, green: 66/255, blue: 131/255),
innercircleColor: RadialGradient(gradient: Gradient(colors: [.white, .gray]), center: .center, startRadius: 50, endRadius: 100),
lineColor: Color(UIColor.lightGray),
lineWidth: 1.0,
tickColor: Color.gray,
tickhighlightedColor: Color.white,
sliderColor: LinearGradient(gradient: Gradient(colors: [.blue, .white]),startPoint: .topLeading, endPoint: .bottomLeading),
startPointCircleColor: RadialGradient(gradient: Gradient(colors: [.white, .blue,]), center: .center, startRadius: 0, endRadius: 7),
pointCircleColor: RadialGradient(gradient: Gradient(colors: [.blue, .white]), center: .center, startRadius: 0, endRadius: 7),
titleText: "Monday"
),
completion: { (value) in
print(value) // Getting slider value
}
)
minimumValue
Minimum Value of the slider or you can say start value for the slider. It will set in CGFloat.init
maximumValue
Maximum value for the slider which is set in CGFloat.init
totalValue
TotalValue will help to measure progress of the circle while moving which should be equal to maximum value
knobRadius
The Radius of the know that how large you want to show
radius
Size or area of Progress view which can be define by radius
outercircleColor
The color of back circle set in Color.init
innercircleColor
The color of inner side circle set in RadialGradient.init
lineColor
The color of line in inner circle set in Color.init
lineWidth
The width of line in inner circle set in CGFloat.init
tickColor
The color of tick in 360 degree circle set in Color.init
tickhighlightedColor
The color of tick highlighted in 360 degree circle set in Color.init
sliderColor
The color of slider set in LinearGradient.init
startPointCircleColor
The slider start circle color set in RadialGradient.init
pointCircleColor
The slider drag circle color set in RadialGradient.init
titleText
set Title text in circle
TotalProgressView
When you want to put a static number to show the progress only then you can pass the number in this property which will help you to show the circular bar based on the value you pass
CallBack
completion: { (value) in
print(value) // Getting slider value
}
📱 Check out other lists of our Mobile UI libraries
💻 Check out other lists of Web libraries
📝 Get FREE Industry WhitePapers →
Check out our Work
📄 License
MI-Circular Slider is MIT-licensed.
If you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com