自己绘制一个带箭头的UIView

最近在做项目时老大需要在点按钮上弹出一个带有指向按钮箭头的一个视图,视图上放的是tableview。因此,鄙人在一盏茶的功夫就做好了这个功能,所以我把我开始写的demo上传,希望大家可以相互学习,不足之处请指出来,小弟虚心接受。


1. 第一步,创建一个继承于UIView的一个自定义视图(我起名为CusTomView)。

2.通过drawRect方法绘制自己需要的形状,直接上代码

// drawRect方法

- (void)drawRect:(CGRect)rect {

CGRect frame = rect;

frame.size.height = frame.size.height - 20;

rect = frame;

//调用绘制带箭头的

[self drawArrowRectangle:rect];

}

//绘制带箭头的矩形

-(void)drawArrowRectangle:(CGRect) frame

{

// 获取当前图形,视图推入堆栈的图形,相当于你所要绘制图形的图纸

CGContextRef ctx =UIGraphicsGetCurrentContext();

// 创建一个新的空图形路径。

CGContextBeginPath(ctx);

//启始位置坐标x,y

CGFloat origin_x = frame.origin.x;

CGFloat origin_y = frame.origin.y;

//第一条线的位置坐标

CGFloat line_1_x = frame.size.width;

CGFloat line_1_y = origin_y;

//第二条线的位置坐标

CGFloat line_2_x = line_1_x;

CGFloat line_2_y = frame.size.height;

//第三条线的位置坐标

CGFloat line_3_x = origin_x + frame.size.width / 2;

CGFloat line_3_y = line_2_y;

//尖角的顶点位置坐标

CGFloat line_4_x = line_3_x - 25;

CGFloat line_4_y = line_2_y + 20;

//第五条线位置坐标

CGFloat line_5_x = line_4_x - 25;

CGFloat line_5_y = line_3_y;

//第六条线位置坐标

CGFloat line_6_x = origin_x;

CGFloat line_6_y = line_2_y;

CGContextMoveToPoint(ctx, origin_x, origin_y);

CGContextAddLineToPoint(ctx, line_1_x, line_1_y);

CGContextAddLineToPoint(ctx, line_2_x, line_2_y);

CGContextAddLineToPoint(ctx, line_3_x, line_3_y);

CGContextAddLineToPoint(ctx, line_4_x, line_4_y);

CGContextAddLineToPoint(ctx, line_5_x, line_5_y);

CGContextAddLineToPoint(ctx, line_6_x, line_6_y);

CGContextClosePath(ctx);

CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);

CGContextFillPath(ctx);

}

4.在Controller里直接创建CustomView

CustomView *cus= [[CustomView alloc] initWithFrame:CGRectMake(50, 50, 200, 100)];

[self.view addSubview:cus];

效果如图:


你可能感兴趣的:(自己绘制一个带箭头的UIView)