在一些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:在需要的地方调用就可以了
两种方式各有自己的方便之处,根据自己的需要选择使用
- 大小: 1.4 KB
- 大小: 1.5 KB
分享到:
相关推荐
一个灵活,简易,扩展性强的气泡提示框。可通过属性设置颜色、边框色、圆角、三角大小、三角位置、按比例设置三角位置、三角方向、气泡中的文字。还暴露一个容器可让用户自定义气泡中的内容。如果你懒得设置这些属性,...
这个是一款不错的拖拽并拉长的气泡视图案例,源码UnReadBubbleView,UnReadBubbleView是一个能够拖拽并拉长的气泡视图。拖拽到一定的长度会消失,可以通过系数设置来控制拖拽的长度。气泡也支持多种属性设置。
使用非常简单。...2、创建控件(无需添加到父视图,只创建就可以) 3、设置消息数量 4、添加气泡消失时的事件 示例代码: 见ViewController的.m文件,使用起来特别简单,这里不再做过多解释了。
源码实现怎样自定义弹出气泡视图的外观效果。并且在每个弹出的视图都会附加一个箭头,用于指向视图弹出的地方。弹出视图的样式的自定义十分灵活。是一个不错的学习案例,喜欢的朋友可以下载研究一下。。
该源码由源码天堂免费提供下载,源码实现了怎样使用滑动界面滑杆时弹出气泡视图。当用户手指移动滑块时,在滑块的上方弹出一个小气泡,用于指示当前滑杆滑动的具体位置。是一个不错的学习案例,喜欢的朋友可以下载...
自定义点击大头针之后弹出的气泡视图。ios百度地图的实现。比较简单。亲测可用。
自定义下拉菜单,自定义有textField的alertView,无输入文本框的alertView和气泡显示,可根据自己的需求,传入相应的参数,灵活的创建自定义相关视图
仿qq未读消息的拖拽效果 ...谢谢啦。 ... 初始化: ...self.bubbleView = [[AYBubbleView alloc] initWithCenterPoint:self.view.center bubleRadius:15 addToSuperView:self...超出一定范围后或未超过范围,气泡会自动回弹。
实现各种弹出消息/tips的效果。点击任意控件,按钮,导航条按钮,工具条按钮...弹出的气泡会自动定位在相应的按钮旁边,并且有小箭头指向这个按钮。气泡的文字和颜色可以自定义。 注意:请在Mac下解压使用
仿写UC的弹性动画,两行代码就可以搞定。在这里要致谢一位朋友,因为此Demo是基于前几天一个果冻效果的Demo写的。站在巨人的肩上,实在感谢。。 ...也麻烦顺手star一下。
来源:Licence:MIT平台:... 滑动 UISlider 时弹出气泡视图。当用户手指移动滑块时,在滑块的上方弹出一个小气泡,用于指示当前 UISlider 滑动的具体位置。 Code4App编译测试,适用环境:Xcode 4.5, iOS 5.0 以上。
您可以在气泡视图中与气泡中的同伴聊天。 我写了关于 BubbleChat 和 TSNPeerBluetooth 的,其中包括一个展示 BubbleChat 实际操作的视频。 克隆和/或并。 更好的是,分叉它们并发送一些拉取请求。 执照 BubbleChat...
一个弹框视图,两种样式。更多优秀Demo请访问github github链接:https://github.com/mengzhihun6
用法:只需将 bubbleView.swift 拖到您的项目文件夹中并在您想要的视图控制器中创建一个 UIView 子类,或者只需在故事板中拖一个新的 UIView 并将其设置为气泡视图的子类。 您可以通过缩略图(UIImageView)设置...
一个iOS UIView子类,它显示一个圆角的矩形“气泡”,其中包含一条文本消息,指向指定的按钮或视图。 SwiftPopTipView将自动将自身定位在视图内,使其指向指定的按钮或视图,并根据需要定位“指针”。 ...
CLToken 输入视图 关于 CLTokenInputView几乎是 iOS 原生联系人选择器输入部分的像素完美复制品,在编写新消息时用于 Mail.app 和 Messages.app。 查看使用 CLTokenInputView 的示例视图控制器,了解如何将其合并到...
一个开源的控件,提供带有气泡的聊天应用风格视图,完全独立的空间,不需要自己再修改代码,拿来就能用
轻量级聊天框架,Swift编写,可扩展,性能好。 在后台计算集合视图和布局的变化;支持横向和纵向输入展示;文本和照片气泡提示;可扩展输入框。 地址:https://github.com/badoo/Chatto
简单的转场动画,包括高仿QQ电话路径动画 CABasicAnimation动画等动画组合(想了解动画的童鞋可以研究研究)、常见的气泡转场动画(UIView动画,好多项目都在用哦)、以及翻页转场、模拟系统的导航、模态动画(对想...
一般来说,我们只能在MKMapView上使用annotation(即点击pin,弹出一个小气泡视图,即CalloutView。而iOS SDK定义的 UICalloutView 是私有的。这份代码定义了一个新的CalloutView,让其能在其他视图中也可以使用...