iOS 气泡视图的方式

在一些ios应用中经常会需要自定义视图，其中气泡视图就是其中之一，下面介绍两种方式：

方式一：

1：新建一UIView的子类UIBubbleView

2：在initwithframe中初始化

a):要绘制气泡的坐标targetpoint(x,y);

b):气泡的frame bubbleFrame;

c):调用方法setneedslayout;

3:调用drawCGRect方法

只要代码如下：

- (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);

	
}

4:在需要的时候调用UIBubbleView就可使用了。

方式二：使用UIImage的可局部拉伸的功能，对一个气泡图片进行局部拉伸，拉伸后的图片作为uiview的背景view

1：找一张气泡图片如下图；

2：new UIView  ,添加背景图view

只要代码如下：

- (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];
}

3：在需要的地方调用就可以了

两种方式各有自己的方便之处，根据自己的需要选择使用

效果图：

效果图