iOS实现圆角箭头矩形的提示框

先来看看我们见过的一些圆角箭头矩形的提示框效果图

一、了解CGContextRef

首先需要对 CGContextRef 了解, 作者有机会再进行下详细讲解, 这篇中简单介绍下, 方便后文阅读理解. 先了解 CGContextRef 坐标系


坐标系

举例说明 : 对于 商城类App 有很多原价, 现价对比 .那 原件的横线怎么画, 就可以用CGContextRef

- (void)drawRect:(CGRect)rect {
 // Drawing code
 [super drawRect:rect];

 // 获取文本
 CGContextRef context = UIGraphicsGetCurrentContext();
 // 设置起始点坐标 (x轴: 0 . y轴: 控件高度一半)
 CGContextMoveToPoint(context, 0, rect.size.height * 0.5);
 // 设置直线连接点 (x轴:控件全长. y轴:控件高度一半 )
 CGContextAddLineToPoint(context, rect.size.width, rect.size.height * 0.5);

 //设置颜色 宽度
 [[UIColor redColor] set];
 CGContextSetLineWidth(context, 1);

 CGContextStrokePath(context);

}

说明 : 从上面例子可以看到 是由两点确定一条直线.

二、自定义UILabel

进入正文. 控件可以自定义 UIView . 作者为了简单直接 自定义UILabel.

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

首先 .h文件

.h文件没什么说的, 定义的 字符串一会再解释说明

#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 {

 // 随便设置个 长宽
 float w = rect.size.width - 20;
 float h = rect.size.height - 20;

 // 获取文本
 CGContextRef context = UIGraphicsGetCurrentContext();
 // 设置 边线宽度
 CGContextSetLineWidth(context, 0.2);
 //边框颜色
 CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
 //矩形填充颜色
 CGContextSetFillColorWithColor(context, [UIColor cyanColor].CGColor);

 /** 先介绍 CGContextAddArcToPoint 参数
 * CGContextRef : 为获取的文本
 * x1, y1 : 第一点
 * x2, y2 : 第二点
 * radius : 圆角弧度
 * 说明 : 两点连线 如同矢量线, 有方向性.
 */

 // [开始点] 坐标从左上角开始 (6, 0)
 CGContextMoveToPoint(context, 6, 0);
 // 设置 第一点 第二点 弧度. 详解 : [开始点]到[第一点], 确定一条直线 (6, 0) -> (w, 0); [第一点]到[第二点]确定一条直线(w, 0)->(w, 10)
 // 两条线连接与方向 为直角 设置弧度
 CGContextAddArcToPoint(context, w, 0, w, 10, 6); // 右上角圆弧设置完

 // 现在 [开始点] 坐标变为 (w, 10). 第一条线(w, 10) -> (w , h) ; 第二条线(w, h) -> (w - 10, h).
 CGContextAddArcToPoint(context, w , h , w - 10, h, 6); // 右下角圆弧设置完

 // 现在 [开始点] 坐标变为 (w - 10, h) . 由 (w - 10, h) -> (30, h) 向左画直线
 CGContextAddLineToPoint(context, 30, h ); // 向左画线

 // 现在 [开始点] 坐标变为 (30, h). 由(30, h) -> (25, h + 8) 向左下画直线
 CGContextAddLineToPoint(context, 25, h + 8); // 左下直线

 // 现在 [开始点] 坐标变为 (25, h + 8). 由 (25, h + 8)-> (20, h) 向左上画直线
 CGContextAddLineToPoint(context, 20, h ); // 左上直线

 // 现在 [开始点] 坐标变为 (20, h ). 第一条线(20, h)-> (0, h) ; 第二条线(0, h)->(0, h - 10)
 CGContextAddArcToPoint(context, 0, h, 0, h - 10, 6); // 左下角圆弧设置完

 // 现在 [开始点] 坐标变为 (0, h - 10 ). 第一条线(0, h - 10)-> (0, 0) ; 第二条线(0, 0)->(6, 0)
 // 说明: 最开始设置的坐标点为(6, 0) 不为(0, 0). 就是为了最后可以连接上, 不然 画的线不能连接上 , 读者可自行试验
 CGContextAddArcToPoint(context, 0, 0, 6, 0, 6); // 左上角圆弧设置完

 CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径

}

三、简单封装

看到上面 你可以画出 圆角箭头矩形

还记得 .h 中 定义的属性 fillColorStr, 可以进行调用, 随意更改填充颜色, 圆弧角度等.

仅简单封装下 (读者自行严谨封装)

- (void)drawRect:(CGRect)rect {

 // 默认圆角角度
 float r = 4;
 // 居中偏移量(箭头高度)
 float offset = 5;
 // 设置 箭头位置
 float positionNum = 20;

 // 定义坐标点 移动量
 float changeNum = r + offset;
 // 设置画线 长 宽
 float w = self.frame.size.width ;
 float h = self.frame.size.height;

 // 获取文本
 CGContextRef context = UIGraphicsGetCurrentContext();
 // 设置 边线宽度
 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); // 开始坐标左边开始
 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); //根据坐标绘制路径

 /** 父类调用 放在画完边线 后. 不然 设置的文字会被覆盖 */
 [super drawRect:rect];

}

// 当 要改变填充颜色 可以进行调用改变
-(void)setFillColorStr:(NSString *)fillColorStr{

  _fillColorStr = fillColorStr;

 // 调用- (void)drawRect:(CGRect)rect; 重绘填充颜色
 [self setNeedsDisplay];
}

将控件颜色 设置为透明, 一个 自定义的提示框完成. 作者仅提供一种方法, 读者也可用 UIBezierPath等 去实现.

四、补充说明

有人说 直接用图片实现, 都可以 , 看工程需求. 此文主要聊的是

用 - (void)drawRect:(CGRect)rect; 绘制 圆角箭头

介绍CGContextAddArcToPoint的使用

对用图片实现 , 形变问题.

UIImage 类提供

(UIImage*)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight;

简单说明下

图片为 100 * 56 像素

UIImage *tempImage = [UIImage imageNamed:@"tip.png"];

/** 说明 : 创建一个内容可拉伸,边角不拉伸的图片, 单位为像素
 * LeftCapWidth: 左边不拉伸区域的宽度
 * topCapHeight: 上面不拉伸区域高度
 * 之后沿此区域 横纵拉伸, 边角不变
 */
 tempImage = [tempImage stretchableImageWithLeftCapWidth:80 topCapHeight:20];

 UIImageView *imgView=[[UIImageView alloc]initWithImage:tempImage];
 imgView.frame = CGRectMake(100, 100, 200, 56);
 [self. view addSubview:imgView];

拉伸后与原图对比

总结

以上就是这篇文章的全部内容了,希望本文的内容对各位iOS开发者们能有所帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • iOS为UIView设置阴影效果

    UIView的阴影设置主要通过UIView的layer的相关属性来设置 阴影的颜色 imgView.layer.shadowColor = [UIColor blackColor].CGColor; 阴影的透明度 imgView.layer.shadowOpacity = 0.8f; 阴影的圆角 imgView.layer.shadowRadius = 4.f; 阴影偏移量 imgView.layer.shadowOffset = CGSizeMake(4,4); imgView.layer.s

  • iOS如何为圆角添加阴影效果示例代码

    前言 大家都知道在iOS中为UIView添加阴影还是比较简单的,只需要设置layer的shadow属性就可以了,但是问题在于设置阴影之后,必须设置masksToBounds为NO,而圆角图片则要求masksToBounds必须为YES,两者相互冲突,会导致无法正确的添加阴影.下面就来给大家介绍正确为圆角添加阴影的效果,话不多说了,来一起看看详细的介绍吧. 先来看看效果图: 正确的做法: 先创建一个透明的UIView,并添加阴影,设置masksToBounds为NO: 然后在透明的UIView上添

  • IOS设置按钮为圆角的示例代码

    iOS中很多时候都需要用到指定风格的圆角按钮,以下是UIButton提供的创建圆角按钮方法 设置按钮的4个角: 左上:UIRectCornerTopLeft 左下:UIRectCornerBottomLeft 右上:UIRectCornerTopRight 右下:UIRectCornerBottomRight 示例代码: UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 60, 80, 40)]; button.b

  • iOS应用开发中UIView添加边框颜色及设置圆角边框的方法

    UIView加边框及边框颜色 引用库: 复制代码 代码如下: #import <QuartzCore/QuartzCore.h> 使用: 复制代码 代码如下: //添加边框和提示         CGRect frameRect = CGRectMake(20, 90, self.window.frame.size.width-40, self.window.frame.size.height-180);         UIView   *frameView = [[UIView alloc

  • iOS中设置view圆角化的四种方法示例

    前言 在最近进行项目性能优化的过程中,遇到view圆角优化的问题,有一些粗略的看法,现总结一下.分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 设置圆角目前知道的有四种方法: 1.通过shapeLayer设置 2.通过view的layer设置 3.通过BezierPath设置 4.通过贴图的方式设置 1.shapeLayer的实现 通过bezizerpath设置一个路径,加到目标视图的layer上.代码如下: // 创建一个view UIView *showView = [[U

  • IOS设置UIView的边框为圆角详解及实例

    IOS设置UIView的边框为圆角 iOS 系统自带的 View 组件都是正方形的,看起来都太生硬,有时候我需要变成圆角形式,如下图: 具体的实现是使用QuartzCore库,下面我具体的描述一下实现过程: •    首先创建一个项目,名字叫:ipad_webwiew     •    利用Interface Builder添加一个UIWebView,然后和相应的代码相关联     •    添加QuartzCore.framework 代码实现: 头文件: #import <UIKit/UIK

  • iOS设置圆角的三种方式

    第一种方法:通过设置layer的属性 最简单的一种,但是很影响性能,一般在正常的开发中使用很少. UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)]; //只需要设置layer层的两个属性 //设置圆角 imageView.layer.cornerRadius = imageView.frame.size.width / 2; //将多余的部分切掉 imageView

  • iOS中设置圆角的几种方法示例

    前言 圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点讨论的话题.我查阅了一些现有的资料,收获良多的同时也发现了一些误导人错误. 1. 使用layer属性 layer.backgroundColor = [UIColor cyanColor].CGColor; // 给图层添加背景色 layer.contents = (id)[UIImage i

  • iOS实现图片六边形阴影效果

    先来看看效果图 这个效果写起来挺简单,主要运用下面几个知识点 layer 的mask : 图层蒙版 layer 的shadowPath : 绘制自定义形状阴影 UIBezierPath :绘制六边形路线 说完知识点下面上代码了 绘制六边形的路线 -(CGPathRef)getCGPath:(CGFloat)viewWidth{ UIBezierPath * path = [UIBezierPath bezierPath]; path.lineWidth = 2; [[UIColor whiteC

  • iOS设置可选择圆角方向的控件圆角

    前言 这篇文章主要给大家介绍利用iOS如何设置可选择圆角方向的控件圆角,话不多说,以下是实现的示例代码,一起来看看吧. 示例代码 一.通过设置控件layer的cornerRadius来设置圆角 self.view.layer.cornerRadius =10.f;//如果设置圆角角度为半圆,则数值为控件高度的一半 self.view.layer.masksToBounds = YES;//是否删除多余的位置 二.通过贝塞尔曲线来设置圆角 UIBezierPath *maskPath = [UIB

随机推荐