绘制虚线的UIView

CAShapeLayer配合贝塞尔曲线可以绘制曲线,笔者继承了一个UIView的子类,并将该子类的backedLayer替换为CAShapeLayer,以此来实现绘制虚线的效果.

绘制出各种虚线的效果图:

实现的源码:

LineDashView.h 与 LineDashView.m

////  LineDashView.h//  DASH////  绘制虚线用的View//  Copyright (c) 2014年 Y.X. All rights reserved.//#import 
    
     @interface LineDashView : UIView@property (nonatomic, strong) NSArray   *lineDashPattern;  // 线段分割模式@property (nonatomic, assign) CGFloat    endOffset;        // 取值在 0.001 --> 0.499 之间- (instancetype)initWithFrame:(CGRect)frame              lineDashPattern:(NSArray *)lineDashPattern                    endOffset:(CGFloat)endOffset;@end
    

////  LineDashView.m//  DASH////  绘制虚线用的View//  Copyright (c) 2014年 Y.X. All rights reserved.//#import "LineDashView.h"@interface LineDashView (){    CAShapeLayer  *_shapeLayer;}@end@implementation LineDashView- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self)    {        UIBezierPath *path      = [UIBezierPath bezierPathWithRect:self.bounds];        _shapeLayer             = (CAShapeLayer *)self.layer;        _shapeLayer.fillColor   = [UIColor clearColor].CGColor;        _shapeLayer.strokeStart = 0.001;        _shapeLayer.strokeEnd   = 0.499;        _shapeLayer.lineWidth   = frame.size.height;        _shapeLayer.path        = path.CGPath;    }    return self;}- (instancetype)initWithFrame:(CGRect)frame              lineDashPattern:(NSArray *)lineDashPattern                    endOffset:(CGFloat)endOffset{    LineDashView *lineDashView   = [[LineDashView alloc] initWithFrame:frame];    lineDashView.lineDashPattern = lineDashPattern;    lineDashView.endOffset       = endOffset;        return lineDashView;}#pragma mark - 修改view的backedLayer为CAShapeLayer+ (Class)layerClass{    return [CAShapeLayer class];}#pragma mark - 改写属性的getter,setter方法@synthesize lineDashPattern = _lineDashPattern;- (void)setLineDashPattern:(NSArray *)lineDashPattern{    _lineDashPattern            = lineDashPattern;    _shapeLayer.lineDashPattern = lineDashPattern;}- (NSArray *)lineDashPattern{    return _lineDashPattern;}@synthesize endOffset = _endOffset;- (void)setEndOffset:(CGFloat)endOffset{    _endOffset = endOffset;    if (endOffset < 0.499 && endOffset > 0.001)    {        _shapeLayer.strokeEnd = _endOffset;    }}- (CGFloat)endOffset{    return _endOffset;}#pragma mark - 重写了系统的backgroundColor属性- (void)setBackgroundColor:(UIColor *)backgroundColor{    _shapeLayer.strokeColor = backgroundColor.CGColor;}- (UIColor *)backgroundColor{    return [UIColor colorWithCGColor:_shapeLayer.strokeColor];}@end

////  RootViewController.m//  DASH////  Copyright (c) 2014年 Y.X. All rights reserved.//#import "RootViewController.h"#import "LineDashView.h"@interface RootViewController ()@end@implementation RootViewController- (void)viewDidLoad{    [super viewDidLoad];    self.view.backgroundColor = [UIColor blackColor];    // 线条宽度    CGFloat lineHeight = 1;        // 线条1    LineDashView *line1 = [[LineDashView alloc] initWithFrame:CGRectMake(0, 100, 320, lineHeight)                                              lineDashPattern:@[@10, @10]                                                    endOffset:0.495];    line1.backgroundColor = [UIColor redColor];    [self.view addSubview:line1];        // 线条2    LineDashView *line2 = [[LineDashView alloc] initWithFrame:CGRectMake(0, 110, 320, lineHeight)                                              lineDashPattern:@[@5, @5]                                                    endOffset:0.495];    line2.backgroundColor = [UIColor redColor];    [self.view addSubview:line2];        // 线条3    LineDashView *line3 = [[LineDashView alloc] initWithFrame:CGRectMake(0, 120, 320, lineHeight)                                              lineDashPattern:@[@10, @5, @20, @10]                                                    endOffset:0.495];    line3.backgroundColor = [UIColor redColor];    [self.view addSubview:line3];        // 线条4    LineDashView *line4 = [[LineDashView alloc] initWithFrame:CGRectMake(0, 130, 320, lineHeight)                                              lineDashPattern:@[@10, @5, @20, @10, @30, @20]                                                    endOffset:0.495];    line4.backgroundColor = [UIColor redColor];    [self.view addSubview:line4];}@end

需要注意的地方:

修改了UIView的backedLayer

重写了两个属性的setter方法

不过,你也可以解放限制,实现更高端用法哦,不过你需要了解下CAShapeLayer的相关内容才能进行改写.