绘制虚线的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的相关内容才能进行改写.
时间: 2024-09-19 09:42:07