pengzishang / Easystepindicator
Licence: mit
More attributes for a step indicator, indicates steps with a easy way
Stars: ✭ 78
Programming Languages
swift
15916 projects
Projects that are alternatives of or similar to Easystepindicator
RemainingCountIndicator
Remaining count indicator like a tweet screen of twitter.
Stars: ✭ 17 (-78.21%)
Mutual labels: progress, indicator
Funnyloader
Loading indicator for android with over 200 random messages
Stars: ✭ 77 (-1.28%)
Mutual labels: progress, indicator
Theglowingloader
TheGlowingLoader is the highly configurable library to indicate progress and is natively created for Android Platform. It is an implementation of a design composed by Shashank Sahay.
Stars: ✭ 379 (+385.9%)
Mutual labels: progress, indicator
Stepindicator
StepIndicator is an iOS library that indicates steps in an animated way.
Stars: ✭ 229 (+193.59%)
Mutual labels: progress, indicator
Uiutil
UIUtil for Android, Lyrics, Tick animations, Comparisons, Satellite menus, Praise, Slide buttons, TAB indicators, Contact sorting, Drag sorting, Skidding deletes, Shadow effects, RecyclerView nesting RecyclerView, Map list Poi/Drawer effects, Progress settings, Clock set, Damping, Progress, Album, Snap, Progress, CircleDownload, AdvertSwitcher, Carousel ad, FlowLayout, Tag...; 歌词控件、打勾动画、对比、卫星菜单、点赞、滑动按钮、TAB指示器、联系人排序、拖曳排序、侧滑删除、阴影效果.、RecyclerView嵌套RecyclerView.、地图列表Poi/抽屉效果、进度设置、时钟设置、滑动阻尼、相册媒体快照、圆形下载进度,轮播广告, 流式布局,标签...
Stars: ✭ 1,018 (+1205.13%)
Mutual labels: progress, indicator
Progress Bar
Multiplatform netstandard 2.0 C# console progress bar, with support for single or multithreaded progress updates.
Stars: ✭ 53 (-32.05%)
Mutual labels: progress
Storyline.js
Storyline - generic sequencer for JavaScript projects
Stars: ✭ 70 (-10.26%)
Mutual labels: storyboard
Natalie
Natalie - Storyboard Code Generator (for Swift)
Stars: ✭ 1,183 (+1416.67%)
Mutual labels: storyboard
Alphatabsindicator
高仿微信底部状态栏的轻量级库,非MagicIndicator那么功能庞大,简化功能符合大多数BottomTabBar应用设计需求, Lightweight Library of high imitation WeChat bottom status bar
Stars: ✭ 1,086 (+1292.31%)
Mutual labels: indicator
Magicindicator
A powerful, customizable and extensible ViewPager indicator framework. As the best alternative of ViewPagerIndicator, TabLayout and PagerSlidingTabStrip —— 强大、可定制、易扩展的 ViewPager 指示器框架。是ViewPagerIndicator、TabLayout、PagerSlidingTabStrip的最佳替代品。支持角标,更支持在非ViewPager场景下使用(使用hide()、show()切换Fragment或使用setVisibility切换FrameLayout里的View等),http://www.jianshu…
Stars: ✭ 8,969 (+11398.72%)
Mutual labels: indicator
Uploader
A lightweight and very configurable jQuery plugin for file uploading using ajax(a sync); includes support for queues, progress tracking and drag and drop.
Stars: ✭ 1,042 (+1235.9%)
Mutual labels: progress
Iprogresshud
An elegant, lightweight and responsive progress HUD for iOS app with very simple usage. Available 32 indicators by NVActivityIndicatorView.
Stars: ✭ 66 (-15.38%)
Mutual labels: progress
Listr2
NodeJS Task List derived from the best! Create beautiful CLI interfaces via easy and logical to implement task lists that feel alive and interactive.
Stars: ✭ 73 (-6.41%)
Mutual labels: progress
Mkringprogressview
⭕️ Ring progress view similar to Activity app on Apple Watch
Stars: ✭ 1,140 (+1361.54%)
Mutual labels: progress
EasyStepIndicator
Github
欢迎大家给意见,给Star给步骤指示器加入更多的属性,更多可定制的样式
背景
因为自身项目需要, fork了https://github.com/chenyun122/StepIndicator 做出了一些改良,这个步骤指示器能提供更多的属性,比如虚线线条,虚线边框,指示器内文字,步骤描述文字 将来会继续做更多的样式
安装方法
pod 'EasyStepIndicator'
使用
如果你使用Storyboard
@IBOutlet weak var indicator: EasyStepIndicator!
如果你要设置步骤进度的方向
Raw值 | 意义 | 描述 |
---|---|---|
0 | leftToRight | 从左到右 |
1 | rightToLeft | 从右到左 |
2 | topToBottom | 从顶到底 |
3 | bottomToTop | 从底到顶 |
如果要在Storyboard完成所有的工作
图中属性在下面有介绍
如果你用代码
self.indicator = EasyStepIndicator.init(frame: CGRect.init(origin: CGPoint.zero, size: CGSize.init(width: self.view.bounds.width, height: self.view.bounds.width/2)))
self.indicator?.center = self.view.center
indicator?.numberOfSteps = 4 // 必须第一时间赋予
self.view.addSubview(indicator!)
Storyboard和代码的公共部分
如果你要设置圈内文字和描述文字
self.indicator.dataSource = self
extension VerticalController:EasyStepIndicatorDataSource {
func characterForStep(indicator: EasyStepIndicator, index: Int) -> String {
["1","B","2","D"][index]
}
func titleForStep(indicator: EasyStepIndicator, index: Int) -> String {
["Yours faithfully", " This is to introduce Mr. Frank Jones, our new marketing specialist who will be in London from April 5 to mid April on business. We are pleased to introduce Mr. Wang You, our import manager of Textiles Department. Mr. Wang is spending three weeks in your city to develop our business with chief manufactures and to make purchases of decorative fabrics for the coming season.", "Track progress", "Finishes\ninvestigation"][index]
}
}
如果你要单独设置每个圈
self.indicator.delegate = self
extension VerticalController :EasyStepIndicatorDelegate {
func stepConfigForStep(indicator: EasyStepIndicator, index: Int, config: inout StepConfig){
if index == 2{
config.radius = 30
}
if index == 3 {
config.stepText.fontSize = 30
}
config.stepText.colors.complete = randomColor()
config.stepText.colors.incomplete = randomColor()
config.annular.colors.complete = randomColor()
config.annular.colors.incomplete = randomColor()
config.tint.colors.complete = randomColor()
config.tint.colors.incomplete = randomColor()
}
func lineConfigForProcess(indicator: EasyStepIndicator, index: Int, config:inout LineConfig){
config.colors.complete = randomColor()
config.colors.incomplete = randomColor()
}
func titleConfigForStep(indicator: EasyStepIndicator, index: Int, config:inout TitleConfig){
config.colors.complete = randomColor()
config.colors.incomplete = randomColor()
}
}
你可以对每一个元素的每个属性做出自己的定制
属性列表
Storyboard可用属性
属性名 | 描述 | 图中位置 |
---|---|---|
numberOfSteps(必须的) | 总步骤数量(必须大于1) | |
currentStep | 当前步骤 | ① |
currentStepAsIncomplete | 当前步骤视为未完成 | ① |
circleRadius | 圆大小 | ③ |
circleAnnularIncompleteColor | 指示圆框未完成时候的颜色 | ④ |
circleAnnularCompleteColor | 指示圆框完成时候的颜色 | ② |
circleStrokeWidth | 指示圆框线条的宽度 | ③ |
circleAnnularLineDashWidth | 指示圆框虚线长度 | ④ |
circleAnnularLineDashMargin | 指示圆框虚线间隔 | ④ |
circleTintIncompleteColor | 圆内未完成时候的颜色 | ④对应的圆 |
circleTintCompleteColor | 圆内完成时候的颜色 | ② |
lineIncompleteColor | 指向线条未完成的颜色 | ⑥ |
lineCompleteColor | 指向线条完成的颜色 | A-B之间的颜色 |
lineMargin | 指向线条离圆形的距离 | ⑤ |
lineStrokeWidth | 指向线条宽度 | ⑥ |
lineImaginaryMargin | 指向线条虚线间隔 | ⑥ |
lineImaginaryWidth | 指向线条小虚线宽度 | ⑥ |
direction | 进度方向,写代码时候可以设置,在枚举值中选择 | a-b-c-d |
directionRaw | 进度方向的Int值,用Storyboard中选择方向 | 无 |
circleTextIncompleteColor | 圆形内文字未完成时候颜色 | C的颜色 |
circleTextCompleteColor | 圆形内文字完成时候颜色 | A的颜色 |
stepDescriptionTextIncompleteColor | 描述文字未完成时候的颜色 | 11 |
stepDescriptionTextCompleteColor | 描述文字完成时候的颜色 | 13 |
stepDescriptionTextMargin | Indicator和Description之间Margin | 12 |
stepDescriptionTextFontSize | 步骤描述文字的大小 | 13 |
maxContentWidth | 内容最大宽度(仅仅横向可用) | |
minContentMargin | 描述文字强制最小间距 | |
contentScrollView | 内容滚动视图 | |
freezeZone | 冻结区域,区域将没有内容,留白 |
可代码配置属性
类名 | 属性 | 描述 |
---|---|---|
StepConfig | stepText | 圈内文字相关属性 |
StepConfig | annular | 圆环相关属性 |
StepConfig | tint | 圆圈内的相关属性 |
StepConfig | radius | 圆圈半径 |
StepConfig | stepIndex | 步骤序号 |
StepConfig | titleMargin | 描述文字和圆圈底部的距离 |
- | - | - |
LineConfig | colors | 线的颜色相关属性 |
LineConfig | dashPatternComplete | 已完成线的虚线相关属性 |
LineConfig | dashPatternIncomplete | 未完成线的虚线相关属性 |
LineConfig | strokeWidth | 线宽度 |
LineConfig | marginBetweenCircle | 线条离圆形的距离 |
LineConfig | processIndex | 线条序号 |
- | - | - |
TitleConfig | title | 描述标题相关属性 |
TitleConfig | colors | 描述标题颜色相关属性 |
TitleConfig | stepIndex | 描述标题序号 |
关于 alignmentMode
public var alignmentMode: AlignmentMode = .center
值 | 描述 |
---|---|
top | 每个标题和圆圈的起始对齐 |
center | 每个标题和起始和圆圈的中心对齐 |
关于shouldStepLineFitDescriptionText
func shouldStepLineFitDescriptionText() -> Bool {
false
}
true:整个指示器的长度随着描述内容的多少而变化
false:整个指示器的长度固定为superview长度
TODO
欢迎大家提意见和建议
- [x] 上传到Cocoapods;
- [x] 描述文字适配垂直方向;
- [x] Demo
- [x] 代码描述
- [x] 将超出部分显示为 "..."
- [x] 自适应超出部分设置为滚动
- [ ] 自定义描述部分的View(类似于"高德地图"中交通路线和"车来了"中公交动态的样子),不限于文字
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].