粉友们我又回来了。国庆回莆田老家几天没有coding就感觉手痒＋满满的罪恶感。这个我里我想对所有的简友(尤其是"只因我为足球而生")和我自己说声抱歉。在高仿美团三里面就说要把github地址贴出来。然后一直拖延到现在。优秀是一种习惯。很明显我还需努力。这段时间我想了好多好多。什么都想做什么都止步不前。这篇最想和大家共勉的一句是：
相信自己。专注一点，再专注一点，你离成功就会更近一点。
话不多说了上效果了：
自定义气泡
机上一个版本说我会独立出来讲下这个东东，觉得在这里说下也很合适
首先抛开项目不谈：
一步一步来怎么画这个气泡的呢？
1.自定义气泡
2.自定义标注
屏幕快照 2015-10-07 21.25.30.png
很明显他是一个view，所有就自定义一个view然后继承于UIView
代码如下：
- (void)drawRect:(CGRect)rect {
[self drawInContext:UIGraphicsGetCurrentContext()];
self.layer.shadowColor = [[UIColor clearColor] CGColor];
self.layer.shadowOpacity = 1.0;
self.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
}
-(void)drawInContext:(CGContextRef)context{
//设置当前图形的宽度
CGContextSetLineWidth(context, 2.0);
//填充泡泡颜色并设置透明度
// CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.3 green:0.3 blue:0.3 alpha:0.8].CGColor);
//填充的颜色
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
//
[self getDrawPath:context];
//填充形状内的颜色
CGContextFillPath(context);
}
// 200, 70
-(void)getDrawPath:(CGContextRef)context{
//取出当前的图形大小
CGRect rrect = self.bounds;
NSLog(@"%f", self.frame.size.width);
NSLog(@"%f", self.frame.size.height);
//设置园弧度
CGFloat radius = 30.0;
CGFloat minx = CGRectGetMinX(rrect),//0
//中点
midx = CGRectGetMidX(rrect),//100
//最大的宽度的X
maxx = CGRectGetMaxX(rrect);//200
CGFloat miny = CGRectGetMinY(rrect),//0
//最大的高度Y
maxy = CGRectGetMaxY(rrect)-kArrorHeight;//60
//1.画向下的三角形
//2.设置起点三角形的右边点为起点
CGContextMoveToPoint(context, midx+kArrorHeight, maxy);
//3.连线 右边点 －>连最下面上下面的点
CGContextAddLineToPoint(context, midx, maxy+kArrorHeight);//画直线
//4.最下面的点连上 最左边的点。
CGContextAddLineToPoint(context, midx-kArrorHeight, maxy);
//画4个圆弧
// CGContextAddArcToPoint(context, x1, y1, x2, y2, CGfloat radius );//画完后 current point不在minx,miny，而是在圆弧结束的地方
CGContextAddArcToPoint(context, minx, maxy, minx, miny, radius);//画完后 current point不在minx,miny，而是在圆弧结束的地方
CGContextAddArcToPoint(context, minx, miny, maxx, miny, radius);
CGContextAddArcToPoint(context, maxx, miny, maxx, maxy, radius);
CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
CGContextClosePath(context);
}
注释已经很清楚了。
自定义气泡已经有了接下来就自定义标注。
百度原始的标注效果图
/**
* 通过mapView快速创建一个annotationView
*/
+(instancetype)annotationViewWithMapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation
{
if ([annotation isKindOfClass:[BMKPointAnnotation class]])
{
static NSString *reuseIndetifier = @"annotationReuseIndetifier";
JFAnnotationView *annotationView = (JFAnnotationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:reuseIndetifier];
if (annotationView == nil)
{
annotationView = [[JFAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:reuseIndetifier];
}
if ([annotation isKindOfClass:[JFAnnotation class]]){
annotationView.jfannotation = (JFAnnotation *)annotation;
}
annotationView.canShowCallout = NO;
###只要只需这一句是不是很easy
annotationView.image = [UIImage imageNamed:@"icon_map_cateid_1"];
// 设置中⼼心点偏移,使得标注底部中间点成为经纬度对应点
// annotationView.centerOffset = CGPointMake(0, -18);
return annotationView;
}
return nil;
}
那么标注和气泡怎么关联在一起？
-(void)setSelected:(BOOL)selected animated:(BOOL)animated{
if (self.selected == selected) {
return;
}
if (selected) {
if (self.calloutView == nil) {
self.calloutView = [[JFCalloutView alloc] initWithFrame:CGRectMake(0, 0, kCalloutWidth, kCalloutHeight)];
self.calloutView.center = CGPointMake(CGRectGetWidth(self.bounds) / 2.f + self.calloutOffset.x,-CGRectGetHeight(self.calloutView.bounds) / 2.f + self.calloutOffset.y);
}
NSString *imgUrl = [self.jfannotation.jfModel.imgurl stringByReplacingOccurrencesOfString:@"w.h" withString:@"104.63"];
[self.calloutView.imageView sd_setImageWithURL:[NSURL URLWithString:imgUrl] placeholderImage:[UIImage imageNamed:@"bg_customReview_image_default"]];
self.calloutView.title = self.annotation.title;
self.calloutView.subtitle = self.annotation.subtitle;
[self addSubview:self.calloutView];
}else{
[self.calloutView removeFromSuperview];
}
[super setSelected:selected animated:animated];
}
在自定义气泡的view里面加你想加的控件，数据等等。
然后在自定义的annotation模型里面依次添加这些属性。
具体看我源码里面已经很清楚里，如果还是有问题的可以提出来我们一起coding.
我的.gif
这两个界面也是webview
高仿美团四就到这里了，本项目继续更新中。。。
源码链接：https://github.com/tubie/JFMeiTuan
屏幕快照 2015-10-08 08.55.27.png
有问题可以提出来我很乐意和大家一起分享。喜欢的话给我一个小星星我会很开心的。同时也希望你能够继续关注我。
