繪製虛線的UIView

標籤：style   blog   http   color   使用   io   strong   2014   

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