前言

App中常用使用圓角箭頭矩形, 如微博分組提示框, 地圖坐標(biāo)顯示點(diǎn)等. iPad 中有 UIPopoverController 類供開(kāi)發(fā)使用, iPhone中就需要開(kāi)發(fā)人員定制了. 今天作者就聊下 定制 圓角箭頭矩形 提示框.

圓角箭頭矩形.png

一 了解CGContextRef

首先需要對(duì) CGContextRef 了解, 作者有機(jī)會(huì)再進(jìn)行下詳細(xì)講解, 這篇中簡(jiǎn)單介紹下, 方便后文閱讀理解. 先了解 CGContextRef 坐標(biāo)系

舉例說(shuō)明 : 對(duì)于 商城類App 有很多原價(jià), 現(xiàn)價(jià)對(duì)比 .那 原件的橫線怎么畫, 就可以用CGContextRef

- (void)drawRect:(CGRect)rect { // Drawing code [super drawRect:rect]; // 獲取文本 CGContextRef context = UIGraphicsGetCurrentContext(); // 設(shè)置起始點(diǎn)坐標(biāo) (x軸: 0 . y軸: 控件高度一半) CGContextMoveToPoint(context, 0, rect.size.height * 0.5); // 設(shè)置直線連接點(diǎn) (x軸:控件全長(zhǎng). y軸:控件高度一半 ) CGContextAddLineToPoint(context, rect.size.width, rect.size.width * 0.5); //設(shè)置顏色 寬度 [[UIColor redColor] set]; CGContextSetLineWidth(context, 1); CGContextStrokePath(context); }

說(shuō)明: 從上面例子可以看到 是由兩點(diǎn)確定一條直線.

二 自定義UILabel

進(jìn)入正文. 控件可以自定義 UIView . 作者為了簡(jiǎn)單直接 自定義 UILabel .

CustomLabel *customLabel = [[CustomLabel alloc] initWithFrame:CGRectMake(0, 200, 400, 500)];
[self.view addSubview:view];
 view.backgroundColor = [UIColor orangeColor];

首先 .h 文件

.h文件沒(méi)什么說(shuō)的, 定義的 字符串一會(huì)再解釋說(shuō)明

#import <UIKit/UIKit.h>

@interface CustomLabel : UILabel

@property (nonatomic, copy) NSString *fillColorStr;

@end

.m文件

我們用 - (void)drawRect:(CGRect)rect; 繪制 圓角箭頭

#import "CustomLabel.h"

@implementation CustomLabel

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 自定義你需要的屬性
    }
    return self;
}

// 主要講解
- (void)drawRect:(CGRect)rect {

  // 隨便設(shè)置個(gè) 長(zhǎng)寬
   float w = rect.size.width - 20;
   float h = rect.size.height - 20;

    // 獲取文本
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 設(shè)置 邊線寬度
    CGContextSetLineWidth(context, 0.2);
    //邊框顏色
    CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
    //矩形填充顏色
    CGContextSetFillColorWithColor(context, [UIColor cyanColor].CGColor);


  /** 先介紹 CGContextAddArcToPoint 參數(shù)
    * CGContextRef : 為獲取的文本
    * x1, y1 : 第一點(diǎn)
    * x2, y2 : 第二點(diǎn)
    * radius : 圓角弧度
    * 說(shuō)明 : 兩點(diǎn)連線 如同矢量線, 有方向性.  
    */

    // [開(kāi)始點(diǎn)] 坐標(biāo)從左上角開(kāi)始 (6, 0)
    CGContextMoveToPoint(context, 6, 0); 
    // 設(shè)置 第一點(diǎn) 第二點(diǎn) 弧度. 詳解 : [開(kāi)始點(diǎn)]到[第一點(diǎn)], 確定一條直線 (6, 0) -> (w, 0); [第一點(diǎn)]到[第二點(diǎn)]確定一條直線(w, 0)->(w, 10)
    // 兩條線連接與方向 為直角 設(shè)置弧度
    CGContextAddArcToPoint(context, w, 0, w, 10, 6);  // 右上角圓弧設(shè)置完

    // 現(xiàn)在 [開(kāi)始點(diǎn)] 坐標(biāo)變?yōu)?(w, 10).   第一條線(w, 10) -> (w , h) ; 第二條線(w, h) -> (w - 10, h).  
    CGContextAddArcToPoint(context, w , h , w - 10, h, 6);  // 右下角圓弧設(shè)置完

    // 現(xiàn)在 [開(kāi)始點(diǎn)] 坐標(biāo)變?yōu)?(w - 10, h) . 由 (w - 10, h) -> (30, h) 向左畫直線
    CGContextAddLineToPoint(context, 30, h ); // 向左畫線

    // 現(xiàn)在 [開(kāi)始點(diǎn)] 坐標(biāo)變?yōu)?(30, h). 由(30, h) -> (25, h + 8) 向左下畫直線 
    CGContextAddLineToPoint(context, 25, h + 8); // 左下直線

    // 現(xiàn)在 [開(kāi)始點(diǎn)] 坐標(biāo)變?yōu)?(25, h + 8). 由 (25, h + 8)-> (20, h) 向左上畫直線 
    CGContextAddLineToPoint(context, 20, h ); // 左上直線

    // 現(xiàn)在 [開(kāi)始點(diǎn)] 坐標(biāo)變?yōu)?(20, h ). 第一條線(20, h)-> (0, h) ; 第二條線(0, h)->(0, h - 10) 
    CGContextAddArcToPoint(context, 0, h, 0, h - 10, 6); // 左下角圓弧設(shè)置完

    // 現(xiàn)在 [開(kāi)始點(diǎn)] 坐標(biāo)變?yōu)?(0, h - 10 ). 第一條線(0, h - 10)-> (0, 0) ; 第二條線(0, 0)->(6, 0) 
    // 說(shuō)明: 最開(kāi)始設(shè)置的坐標(biāo)點(diǎn)為(6, 0) 不為(0, 0).  就是為了最后可以連接上, 不然 畫的線不能連接上 , 讀者可自行試驗(yàn)
    CGContextAddArcToPoint(context, 0, 0, 6, 0, 6); // 左上角圓弧設(shè)置完

    CGContextDrawPath(context, kCGPathFillStroke); //根據(jù)坐標(biāo)繪制路徑

}

三 簡(jiǎn)單封裝

看到上面 你可以畫出 圓角箭頭矩形 下面簡(jiǎn)單封裝下

還記得 .h 中 定義的屬性 fillColorStr;

僅簡(jiǎn)單封裝下 (讀者自行嚴(yán)謹(jǐn)封裝)

- (void)drawRect:(CGRect)rect {


    // 默認(rèn)圓角角度
    float r = 4;
    // 居中偏移量(箭頭高度)
    float offset = 5;
    // 設(shè)置 箭頭位置
    float positionNum = 20;


    // 定義坐標(biāo)點(diǎn) 移動(dòng)量
    float changeNum = r + offset;
    // 設(shè)置畫線 長(zhǎng) 寬
    float w = self.frame.size.width ;
    float h = self.frame.size.height;


    // 獲取文本
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 設(shè)置 邊線寬度
    CGContextSetLineWidth(context, 0.2);
    //邊框顏色
    CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
    //矩形填充顏色
    if ([self.fillColorStr isEqualToString:@"fillColorChange"]) {

        CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
    }else{
        CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    }

    CGContextMoveToPoint(context, r, offset);  // 開(kāi)始坐標(biāo)左邊開(kāi)始
    CGContextAddArcToPoint(context, w, offset, w, changeNum, r);  // 右上角角度
    CGContextAddArcToPoint(context, w , h - offset, w - changeNum, h - offset, r);  // 右下角角度

    CGContextAddLineToPoint(context, positionNum + 10, h - offset); // 向左劃線
    CGContextAddLineToPoint(context, positionNum + 5, h); // 向下斜線
    CGContextAddLineToPoint(context, positionNum, h - offset); // 向上斜線

    CGContextAddArcToPoint(context, 0, h - offset, 0, h - changeNum, r); // 左下角角度
    CGContextAddArcToPoint(context, 0, offset, r, offset, r); // 左上角角度

    CGContextDrawPath(context, kCGPathFillStroke); //根據(jù)坐標(biāo)繪制路徑

    /** 父類調(diào)用 放在畫完邊線 后.  不然 設(shè)置的文字會(huì)被覆蓋 */
    [super drawRect:rect];

}

// 當(dāng) 要改變填充顏色 可以進(jìn)行調(diào)用改變
-(void)setFillColorStr:(NSString *)fillColorStr{

        _fillColorStr = fillColorStr;

    // 調(diào)用- (void)drawRect:(CGRect)rect; 重繪填充顏色
    [self setNeedsDisplay];    
}

將控件顏色 設(shè)置為透明, 一個(gè) 自定義的提示框完成. 作者僅提供一種方法, 讀者也可用 UIBezierPath 去實(shí)現(xiàn).

 

 

來(lái)自：http://www.jianshu.com/p/0c609bf5cb6f

 

標(biāo)簽： isp

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。