All Projects → pengzishang → Easystepindicator

pengzishang / Easystepindicator

Licence: mit
More attributes for a step indicator, indicates steps with a easy way

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
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (+62.82%)
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
Progress
Progress replacing ProgressDialog
Stars: ✭ 52 (-33.33%)
Mutual labels:  progress
Spincounterview
🎡 一个类似于码表变化的旋转计数器动画控件
Stars: ✭ 47 (-39.74%)
Mutual labels:  progress
Natalie
Natalie - Storyboard Code Generator (for Swift)
Stars: ✭ 1,183 (+1416.67%)
Mutual labels:  storyboard
Progress.c
Progress display lib for c
Stars: ✭ 67 (-14.1%)
Mutual labels:  progress
Alphatabsindicator
高仿微信底部状态栏的轻量级库,非MagicIndicator那么功能庞大,简化功能符合大多数BottomTabBar应用设计需求, Lightweight Library of high imitation WeChat bottom status bar
Stars: ✭ 1,086 (+1292.31%)
Mutual labels:  indicator
Vue Progress Button
Animated button for VueJS
Stars: ✭ 71 (-8.97%)
Mutual labels:  progress
Progressbutton
Custom ProgressButton
Stars: ✭ 52 (-33.33%)
Mutual labels:  progress
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

English

Github

欢迎大家给意见,给Star

给步骤指示器加入更多的属性,更多可定制的样式

M3dU3t.gif

背景

因为自身项目需要, fork了https://github.com/chenyun122/StepIndicator 做出了一些改良,这个步骤指示器能提供更多的属性,比如虚线线条,虚线边框,指示器内文字,步骤描述文字 将来会继续做更多的样式

安装方法

pod 'EasyStepIndicator'

使用

如果你使用Storyboard

KYvweU.png
@IBOutlet weak var indicator: EasyStepIndicator!

如果你要设置步骤进度的方向

K6nd0J.png

Raw值 意义 描述
0 leftToRight 从左到右
1 rightToLeft 从右到左
2 topToBottom 从顶到底
3 bottomToTop 从底到顶

如果要在Storyboard完成所有的工作

图中属性在下面有介绍

MiFJ56.png

如果你用代码

    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可用属性

KYvUyV.png
属性名 描述 图中位置
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 每个标题和起始和圆圈的中心对齐
MiXIu6.gif

关于shouldStepLineFitDescriptionText

    func shouldStepLineFitDescriptionText() -> Bool {
        false
    }

true:整个指示器的长度随着描述内容的多少而变化

false:整个指示器的长度固定为superview长度

MiXvvt.gif

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].