繪制虛線的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的相關內容才能進行改寫.