FlexibleSteppedProgressBar 0.7.2

FlexibleSteppedProgressBar 0.7.2

测试测试
Lang语言 SwiftSwift
许可 NOASSERTION
发布上次发布2021年11月
SPM支持 SPM

Amrata Baghel 维护。



  • Amrata Baghel

FlexibleSteppedProgressBar

CI Status Swift Version License Platform

这是一个用于 iOS 的分步进度条。基本代码源于 ABSteppedProgressBar。大部分设计都可以自定义。文本可以放置在圆圈内部或顶部或底部,也可以在用户想要的情况下放置在三者之中。请参阅使用部分以获取更多详细信息。

alt tag alt tag

示例

要运行示例项目,请克隆仓库,然后首先从 Example 目录运行 pod install

要求

安装

FlexibleSteppedProgressBar 通过 CocoaPods 提供。要安装它,只需将以下行添加到您的 Podfile 中

pod "FlexibleSteppedProgressBar"

基本用法

import FlexibleSteppedProgressBar

class ViewController: UIViewController, FlexibleSteppedProgressBarDelegate {

    var progressBar: FlexibleSteppedProgressBar!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        progressBar = FlexibleSteppedProgressBar()
        progressBar.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(progressBar)

        let horizontalConstraint = progressBar.centerXAnchor.constraintEqualToAnchor(self.view.centerXAnchor)
        let verticalConstraint = progressBar.topAnchor.constraintEqualToAnchor(
            view.topAnchor,
            constant: 80
        )
        let widthConstraint = progressBar.widthAnchor.constraintEqualToAnchor(nil, constant: 500)
        let heightConstraint = progressBar.heightAnchor.constraintEqualToAnchor(nil, constant: 150)
        NSLayoutConstraint.activateConstraints([horizontalConstraint, verticalConstraint, widthConstraint, heightConstraint])

        // Customise the progress bar here
        progressBar.numberOfPoints = 5
        progressBar.lineHeight = 9
        progressBar.radius = 15
        progressBar.progressRadius = 25
        progressBar.progressLineHeight = 3
        progressBar.delegate = self
    }
    
    func progressBar(progressBar: FlexibleSteppedProgressBar,
                 didSelectItemAtIndex index: Int) {
        print("Index selected!")
    }
    
    func progressBar(progressBar: FlexibleSteppedProgressBar,
                 willSelectItemAtIndex index: Int) {
        print("Index selected!")
    }

    func progressBar(progressBar: FlexibleSteppedProgressBar,
                     canSelectItemAtIndex index: Int) -> Bool {
        return true
    }

    func progressBar(progressBar: FlexibleSteppedProgressBar,
                     textAtIndex index: Int, position: FlexibleSteppedProgressBarTextLocation) -> String {
        if position == FlexibleSteppedProgressBarTextLocation.BOTTOM {
            switch index {
                
            case 0: return "First"
            case 1: return "Second"
            case 2: return "Third"
            case 3: return "Fourth"
            case 4: return "Fifth"
            default: return "Date"
                
            }
        }
    return ""
    }
}

定制

在ABSteppedProgressBar的基础上进行了一些修改,因为我需要额外的一个状态,即“最后状态”。它指定了用户在进度条上已经覆盖的最后一个索引。例如,我的用例是通过进度条指定产品的某些属性,假设有步骤1, 步骤2到步骤5。所以,如果用户完成到步骤3,然后回到步骤1进行修改,进度条应分别指示步骤3为最后状态,步骤1为选中状态。这是完全可选的。如果您想使用最后状态,可以通过useLastState参数简单地表达您的意愿,并指定completedTillIndex为最后状态。进度条不会跟踪最后状态。

There are four states for a progress point:
1. Unselected and unvisited
2. Unselected and visited
3. Currently selected: These will have two concentric circles whose colors can be specified through 
    a) currentSelectedCenterColor: for inner circle fill color
    b) selectedOuterCircleStrokeColor: outer circle stroke color
    c) selectedOuterCircleLineWidth: outer circle line width
4. Last state: Use of this state is up on the discretion of the implementation. It is by default false and can be changed through useLastState. If present, it will also have two concentric circles whose colors can be modified through:
    a) lastStateCenterColor: for inner circle fill color
    b) lastStateOuterCircleStrokeColor: for outer circle stroke color
    c) lastStateOuterCircleLineWidth: for outer circle line width

Some general customisation options: 
a) radius: Radius of circles for unvisited indices.
b) progressRadius: Radius of circles for visited indices.
c) lineHeight: Line height of the outer line for complete progress bar.
d) progressLineHeight: Line height for the inner line with the selected background color that is shown only for the visited indices.
e) numberOfPoints: It is the number of indices on the progress bar.
f) stepAnimationDuration: Duration of animation
g) backgroundShapeColor: This is the color for unselected and unvisited indices.
h) selectedBackgoundColor: This is the color for unselected but visited indices.
i) currentIndex: It is the current selected index. Value: 0 to (number of points - 1)
j) completedTillIndex: It is the last state index. Value: 0 to (number of points - 1)

CAUTION: If your background view is of any other color than white, please specify it in viewBackgroundColor. Otherwise you will keep seeing white color in between.

Second reason for this library was text location. I needed flexible position for text. So, here I am providing three locations. 
a) TOP
b) CENTER
c) BOTTOM

You can specify the text you want to show through delegate method textAtIndex. For customising how text is displayed, specify the following values:
a) currentSelectedTextColor: This is the text color for the current selected index for top and bottom positions.
b) centerLayerTextColor: This is the text color for the the indices when it is neither selected nor last state only for center position.
c) centerLayerDarkBackgroundTextColor: This is the text color for center position when it is either selected or last state.
d) stepTextColor: This is the text color in the top or bottom positions for all but selected indices.
e) stepTextFont: This is the font for all the positions and indices.
f) textDistance: This is the distance of top and bottom text from the center of their respective indices. 

Also, other customisation options are available through delegate methods.

作者

Amrata Baghel, [email protected]

许可

FlexibleSteppedProgressBar在MIT许可下可用。有关更多信息,请参阅LICENSE文件。