ios弧形进度条_iOS圆形进度条
最近在做一个类似于滴滴打车派单的功能,需要做一个圆形进度条。效果如下图:
其中实现圆形进度条的demo代码如下:
@interface ProgressView() {
NSUInteger num;
}
/** timer */
@property (nonatomic, strong) NSTimer *timer;
/** 图片 */
@property (nonatomic, strong) UIImageView *imageView;
/** 背景layer */
@property (nonatomic, strong) CAShapeLayer *backgroundLayer;
/** 进度条layer */
@property (nonatomic, strong) CAShapeLayer *progressLayer;
@end
@implementation ProgressView
- (void)dealloc {
if (_timer) {
[_timer invalidate];
_timer = nil;
}
}
- (id)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
[self buildView];
}
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
}
- (void)buildView {
// 设置self
self.transform = CGAffineTransformMakeRotation(-M_PI_2);
self.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);
self.layer.cornerRadius = self.frame.size.width * 0.5;
self.layer.masksToBounds = YES;
// 添加专辑图片
[self addSubview:self.imageView];
self.imageView.image = [UIImage imageNamed:@"img1418"];
[self addSubview:self.imageView];
// 设置进度条的背景 Layer
[self.layer addSublayer:self.backgroundLayer];
// 设置进度条 Layer
[self.layer addSublayer:self.progressLayer];
self.progressLayer.strokeEnd = 0;
// 设置 Timer
NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeInterval) userInfo:nil repeats:YES];
self.timer = timer;
}
- (UIImageView *)imageView {
if (!_imageView) {
_imageView = [[UIImageView alloc] initWithFrame:self.bounds];
_imageView.contentMode = UIViewContentModeScaleAspectFit;
}
return _imageView;
}
- (CALayer *)backgroundLayer {
if (!_backgroundLayer) {
_backgroundLayer = [self buildShapeLayerColor:[UIColor lightGrayColor] lineWidth:kLineWidth];
}
return _backgroundLayer;
}
- (CALayer *)progressLayer {
if (!_progressLayer) {
_progressLayer = [self buildShapeLayerColor:[UIColor blueColor] lineWidth:kLineWidth];
}
return _progressLayer;
}
- (CAShapeLayer *)buildShapeLayerColor:(UIColor *)color lineWidth:(CGFloat)width {
CAShapeLayer *layer = [CAShapeLayer layer];
CGRect rect = {kLineWidth * 0.5, kLineWidth * 0.5, self.frame.size.width - kLineWidth, self.frame.size.height - kLineWidth};
// 设置path
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];
layer.path = path.CGPath;
// 设置layer
layer.strokeColor = color.CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
layer.lineWidth = width;
layer.lineCap = kCALineCapRound;
return layer;
}
- (void)timeInterval {
if (num == 20) {
[self.timer invalidate];
self.timer = nil;
}
num ++;
[self updateProgressWithNumber:num];
}
- (void)updateProgressWithNumber:(NSUInteger)number {
[CATransaction begin];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
[CATransaction setAnimationDuration:1];
// 20为倒计时时间
self.progressLayer.strokeEnd = number / 20.0f;
[CATransaction commit];
}
这么调用的:
CGFloat width = [UIScreen mainScreen].bounds.size.width;
ProgressView *progress = [[ProgressView alloc] initWithFrame:CGRectMake(10, 20, width - 20, width - 20)];
[self.view addSubview:progress];
效果图是这样的:
ios弧形进度条_iOS圆形进度条相关推荐
- ios弧形进度条_ios 圆形进度条
今天产品要弄一个圆形的进度条 1532512706923.jpg 有很多开源的进度条不用,非要弄这种效果,就不吐槽了,还是想想怎么实现 废话就不多说了 直接上代码 #import @interface ...
- Android 之 ProgressDialog用法介绍(矩形进度条 和 圆形 进度条)
2019独角兽企业重金招聘Python工程师标准>>> 布局文件: <LinearLayout xmlns:android="http://schemas.andro ...
- 前端 圆形进度图_Highcharts 圆形进度条式测量图
Highcharts 圆形进度条式测量图 以下实例演示了圆形进度条式测量图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置. 配置 chart.type ...
- android 圆形拖动条,Android圆形进度条自定义
自定义圆形进度条 示例.png 示例 (2).png 示例 (3).png 示例 (4).png 实现 override fun onSizeChanged(w: Int, h: Int, oldw: ...
- Flutter进度条Flutter圆形进度条Flutter条形进度条Flutter Progress进度条LinearProgressIndicator
更多文章请查看 flutter从入门 到精通 Flutter Progress 1 条形无固定值进度条 //LinearProgressIndicator不具备设置高度的选项,可以使用SizedBox ...
- 前端 圆形进度图_js圆形进度的实现,可以自定义进度图标
需求是下图这样,是一个环形进度条.最前面还有个自定义的图标.搜了很多各种环形进度,前面有自定义图标的不多,记录一下 html文件代码: 首页 重新开始 $(function () { var run ...
- 异步下载圆形进度条显示进度
圆形进度条参考链接即可:使用css3实现圆形进度条 需求点击下载后遮罩层显示下载进度: 1.圆形进度条参考以上链接,有点小瑕疵,可更改定位距离实现重合. 2.遮罩层: .lbOverlay{ disp ...
- unity 超简单的圆形进度条
1.首先在Canves下创建一个Image组件,将进度条的图片赋值 2.修改image组件,将Image Type修改为Filled,Fill Method 修改为Radial 360,Fill Or ...
- 自定义绘制圆形进度条
自定义圆形进度条 Android 圆形进度条控件 demo示例 1.定义 attrs.xml <?xml version="1.0" encoding="utf-8 ...
- android 进度条 代码,Android进度条ProgressBar的实现代码
ProgressBar进度条 当一个应用在后台执行时,前台界面不会有任何信息,这时,用户根本不知道程序是否在执行以及执行的进度等, 因此需要使用进度条来提示程序执行的进度. 而ProgressBar就 ...
最新文章
- 看完秒懂大数据用户画像!
- ArcGIS中QueryTask,FindTask,IndentifyTask 之间的区别
- 802.11n兼容a/b/g问题(Legacy mode,Mixed mode,Greenfield mode)
- 容器学习 之 base镜像(四)
- 事业单位计算机技术岗工资,事业单位新入职的人员在管理岗位和技术岗位工资待遇是否有区别?...
- bootstrap弹出的模态框水平垂直居中的实现
- Hadoop学习笔记(七)
- c#后台如何导出excel到本地_小程序导出数据到excel表,借助云开发后台实现excel数据的保存...
- rxtx串口事件不触发_STM32F0单片机快速入门七 串口(UART)操作从轮询到中断
- EditText常用属性总结
- 四、Python-元组
- 【操作系统】输入输出系统(上)-思维导图
- matlab imadjust将暗图像分别在RGB与HSV域增加亮度
- 串口调试助手fx2n_PLC串口调试软件(PLC串口通信调试)
- Byte measurements
- 手把手逆向Playcanvas天空盒编码(一次乌龙的任务)
- 后台开发面试要点(腾讯互娱事业群)
- java短信发送接口开发
- 宏基掠夺者圣盾5000、圣盾3000 评测
- python网络爬虫——pyquery的使用(六)
热门文章
- 金山WPS服务端开发工程师(第一次)(2018年秋招 2018-9-4)
- pc计算机shift,电脑上的shift键怎么读?shift表示什么意思?
- 51单片机仿真例程-八段数码管
- 【元宵节】中国人民大学与加拿大女王大学金融硕士项目与你的那份“缘”
- 转发 微博 Qzone 微信 iPhone 11曝光,卢伟冰怒批的5伏1安亮了,网友:价格才是重点
- 代数结构与有限域之 群
- S5P4418裸机开发(三):运行裸机程序
- html挪车隐藏手机,挪车电话轻易泄露你的隐私!车主这样做才能万无一失!
- 区块链和AI的比武,谁将登上黑科技这一宝座
- MSSQL_8 操作结果集