自己繪制一個帶箭頭的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];

效果如圖:


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容