粉友們我又回來了。國慶回莆田老家?guī)滋鞗]有coding就感覺手癢＋滿滿的罪惡感。這個我里我想對所有的簡友(尤其是"只因我為足球而生")和我自己說聲抱歉。在高仿美團(tuán)三里面就說要把github地址貼出來。然后一直拖延到現(xiàn)在。優(yōu)秀是一種習(xí)慣。很明顯我還需努力。這段時間我想了好多好多。什么都想做什么都止步不前。這篇最想和大家共勉的一句是：
相信自己。專注一點，再專注一點，你離成功就會更近一點。
話不多說了上效果了：
自定義氣泡
機上一個版本說我會獨立出來講下這個東東，覺得在這里說下也很合適
首先拋開項目不談：
一步一步來怎么畫這個氣泡的呢？
1.自定義氣泡
2.自定義標(biāo)注
屏幕快照 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{
//設(shè)置當(dāng)前圖形的寬度
CGContextSetLineWidth(context, 2.0);
//填充泡泡顏色并設(shè)置透明度
// CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.3 green:0.3 blue:0.3 alpha:0.8].CGColor);
//填充的顏色
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
//
[self getDrawPath:context];
//填充形狀內(nèi)的顏色
CGContextFillPath(context);
}
// 200, 70
-(void)getDrawPath:(CGContextRef)context{
//取出當(dāng)前的圖形大小
CGRect rrect = self.bounds;
NSLog(@"%f", self.frame.size.width);
NSLog(@"%f", self.frame.size.height);
//設(shè)置園弧度
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.設(shè)置起點三角形的右邊點為起點
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，而是在圓弧結(jié)束的地方
CGContextAddArcToPoint(context, minx, maxy, minx, miny, radius);//畫完后 current point不在minx,miny，而是在圓弧結(jié)束的地方
CGContextAddArcToPoint(context, minx, miny, maxx, miny, radius);
CGContextAddArcToPoint(context, maxx, miny, maxx, maxy, radius);
CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
CGContextClosePath(context);
}
注釋已經(jīng)很清楚了。
自定義氣泡已經(jīng)有了接下來就自定義標(biāo)注。
百度原始的標(biāo)注效果圖
/**
* 通過mapView快速創(chuàng)建一個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"];
// 設(shè)置中?心點偏移,使得標(biāo)注底部中間點成為經(jīng)緯度對應(yīng)點
// annotationView.centerOffset = CGPointMake(0, -18);
return annotationView;
}
return nil;
}
那么標(biāo)注和氣泡怎么關(guān)聯(lián)在一起？
-(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里面加你想加的控件，數(shù)據(jù)等等。
然后在自定義的annotation模型里面依次添加這些屬性。
具體看我源碼里面已經(jīng)很清楚里，如果還是有問題的可以提出來我們一起coding.
我的.gif
這兩個界面也是webview
高仿美團(tuán)四就到這里了，本項目繼續(xù)更新中。。。
源碼鏈接：https://github.com/tubie/JFMeiTuan
屏幕快照 2015-10-08 08.55.27.png
有問題可以提出來我很樂意和大家一起分享。喜歡的話給我一個小星星我會很開心的。同時也希望你能夠繼續(xù)關(guān)注我。
