iOS仿keep5.3.0版本健身等级界面实现自定义UITableViewCell显示进度效果

最新推荐文章于 2024-08-31 07:18:45 发布

博丽芙兰

最新推荐文章于 2024-08-31 07:18:45 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： iOS开发文章标签： ios uitableviewcell 界面

本文链接：https://blog.youkuaiyun.com/nanquan11/article/details/78864750

本文介绍如何在iOS中实现仿keep5.3.0版本的健身等级界面，特别是自定义UITableViewCell显示进度效果。通过使用UIView.layer.addSublayer方法，创建了两个重叠的UIView，分别展示灰色总体进度和绿色实际进度。详细讲解了如何初始化进度条，绘制完整阶段的实线，以及绘制未贯穿整个阶段带有圆形终点的实线。最后提到了TableViewCell重用时的注意事项，防止滑动时出现异常绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们继续上面那篇来，在实现了头部图片下拉纵向拉伸效果后，紧接着就是这个页面的核心，当前进度占总进度的比例效果显示。按照我的需求就是下面这个图的样子。

效果动图

左侧进度和右侧进度说明整体被封装在一个自定义的TableViewCell里，如下图所示。

自定义单个cell样式

为了方便控制，我在写的时候把这个自定义cell分为了左右两部分，即左面白色背景部分和右面灰色背景部分。右面灰色背景部分就是普通的空间堆叠，这里不具体阐述，接下来我们讲一下左面进度的实现。

这里我采用的是UIView.layer addSublayer的方式。所以这里我做了两个重叠的UIView，分别用来显示灰色的总体进度以及绿色的实际进度。由于需要多次进行线段的绘制，因此在这里要封装一个绘制线段的方法，如下：

/**
 *  通过 CAShapeLayer方式绘制虚线
 *
 *  param lineView:       需要绘制成虚线的view
 *  param lineLength:     虚线的宽度
 *  param lineSpacing:    虚线的间距
 *  param lineColor:      虚线的颜色
 **/
- (void)drawLineOfDashByCAShapeLayer:(UIView *)lineView lineLength:(int)lineLength lineSpacing:(int)lineSpacing lineColor:(UIColor *)lineColor {
    CGRect rect = CGRectMake(0, 0, 1, CGRectGetHeight(lineView.frame));
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = lineColor.CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = CGRectGetWidth(lineView.frame);
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath;
    shapeLayer.lineDashPattern = @[[NSNumber numberWithInt:lineLength], [NSNumber numberWithInt:lineSpacing]];//画虚线
    [lineView.layer addSublayer:shapeLayer];
}