绘制虚线的UIView

绘制虚线的UIView

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

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

实现的源码:

LineDashView.h 与 LineDashView.m

//
//  LineDashView.h
//  DASH
//
//  绘制虚线用的View
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import <UIKit/UIKit.h>

@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的相关内容才能进行改写.