在一些ios应用中经常会需要自定义视图，其中气泡视图就是其中之一，下面介绍两种方式：
方式一：
1：新建一UIView的子类UIBubbleView
2：在initwithframe中初始化
a):要绘制气泡的坐标targetpoint(x,y);
b):气泡的frame bubbleFrame;
c):调用方法setneedslayout;
3:调用drawCGRect方法
只要代码如下：
[sourcecode lang=”plain”]
– (void)drawRect:(CGRect)rect{
NSLog(@"bubble draw");
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(c, 0.0, 0.0, 0.0, 0.0);
CGContextSetLineWidth(c, 3.0);
//确定画线的宽度，对象组合，颜色
CGMutablePathRef bubblePath = CGPathCreateMutable();
//绘制起点－箭头右边－气泡右上顶点－右下顶点－左下顶点－左上顶点－箭头左边－起点闭合
CGPathMoveToPoint(bubblePath, NULL, targetPoint.x, targetPoint.y);
CGPathAddLineToPoint(bubblePath, NULL, targetPoint.x+pointerSize-1, targetPoint.y-2);
CGPathAddArcToPoint(bubblePath, NULL, bubbleFrame.origin.x, bubbleFrame.origin.y,
bubbleFrame.origin.x + bubbleFrame.size.width, bubbleFrame.origin.y, cornerRadius);
CGPathAddArcToPoint(bubblePath, NULL, bubbleFrame.origin.x + bubbleFrame.size.width, bubbleFrame.origin.y,
bubbleFrame.origin.x+bubbleFrame.size.width, bubbleFrame.origin.y+bubbleFrame.size.height, cornerRadius);
CGPathAddArcToPoint(bubblePath, NULL, bubbleFrame.origin.x+bubbleFrame.size.width, bubbleFrame.origin.y+bubbleFrame.size.height,
bubbleFrame.origin.x, bubbleFrame.origin.y+bubbleFrame.size.height, cornerRadius);
CGPathAddArcToPoint(bubblePath, NULL, bubbleFrame.origin.x, bubbleFrame.origin.y+bubbleFrame.size.height,
bubbleFrame.origin.x, targetPoint.y+pointerSize , cornerRadius);
CGPathAddLineToPoint(bubblePath, NULL, targetPoint.x + pointerSize, targetPoint.y+pointerSize);
CGPathCloseSubpath(bubblePath);
//绘制阴影
CGContextAddPath(c, bubblePath);
CGContextSaveGState(c);
CGContextSetShadow(c, CGSizeMake(0, 3), 5);
CGContextSetRGBFillColor(c, 255.0, 255.0, 255.0, 0.0);
CGContextFillPath(c);
CGContextRestoreGState(c);
//设置边线颜色
CGContextAddPath(c, bubblePath);
CGContextClip(c);
int numberBorderComponents = CGColorGetNumberOfComponents([borderColor CGColor]);
const CGFloat *borderComponents = CGColorGetComponents(borderColor.CGColor);
CGFloat r,g,b,a;
if (numberBorderComponents == 2) {
r = borderComponents[0];
g = borderComponents[0];
b = borderComponents[0];
a = borderComponents[1];
}else {
r = borderComponents[0];
g = borderComponents[1];
b = borderComponents[2];
a = borderComponents[3];
}
CGContextSetRGBStrokeColor(c, r, g, b, a);
CGContextAddPath(c, bubblePath);
CGContextDrawPath(c, kCGPathStroke);
CGPathRelease(bubblePath);
}
[/sourcecode]
4:在需要的时候调用UIBubbleView就可使用了。
方式二：使用UIImage的可局部拉伸的功能，对一个气泡图片进行局部拉伸，拉伸后的图片作为uiview的背景view
1：找一张气泡图片如下图；
2：new UIView ,添加背景图view
只要代码如下：
[sourcecode lang=”plain”]- (UIView *)bubbleView:(NSString *)text from:(BOOL)fromSelf {
// build single chat bubble cell with given text
UIView *returnView = [[UIView alloc] initWithFrame:CGRectZero];
returnView.backgroundColor = [UIColor clearColor];
//根据气泡箭头的方向选择不同气泡图片
UIImage *bubble = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:fromSelf?@"bubbleSelf":@"bubble" ofType:@"png"]];
//对气泡图片进行拉伸
UIImageView *bubbleImageView = [[UIImageView alloc] initWithImage:[bubble stretchableImageWithLeftCapWidth:0.0 topCapHeight:0.0]];
UIFont *font = [UIFont systemFontOfSize:12];
//获取文字所占的大小
CGSize size = [text sizeWithFont:font constrainedToSize:CGSizeMake(150.0f, 1000.0f) lineBreakMode:UILineBreakModeCharacterWrap];
UILabel *bubbleText = [[UILabel alloc] initWithFrame:CGRectMake(21.0f, 14.0f, size.width+10, size.height+10)];
bubbleText.backgroundColor = [UIColor clearColor];
bubbleText.font = font;
bubbleText.numberOfLines = 0;
bubbleText.lineBreakMode = UILineBreakModeCharacterWrap;
bubbleText.text = text;
bubbleImageView.frame = CGRectMake(0.0f, 0.0f, 200.0f, size.height+40.0f);
if(fromSelf)
returnView.frame = CGRectMake(120.0f, 10.0f, 200.0f, size.height+50.0f);
else
returnView.frame = CGRectMake(0.0f, 10.0f, 200.0f, size.height+50.0f);
[returnView addSubview:bubbleImageView];
[bubbleImageView release];
[returnView addSubview:bubbleText];
[bubbleText release];
return [returnView autorelease];
}
[/sourcecode]
3：在需要的地方调用就可以了
两种方式各有自己的方便之处，根据自己的需要选择使用
