高仿美团<三>

作者: 土鳖不土 | 来源:发表于2015-09-12 00:01 被阅读5845次

    亲爱的粉友们,高仿美团<三>终于和大家见面了

    首先感谢你们的一直关注。同时也感谢我自己。
    曾经c++挂科,java接近挂科,英语挂科等等。大学里四年每年都挂科。看到代码就头疼就回避,但是我很自信的。从来都没觉得自己不行。我坚信我想要做的事,只要就动手去做,并坚持下去一定会有成果的。哪怕是一点点也会有无限的成就感。或许现在的我们距大牛还很远。so what?
    这篇博文最想和你们分享的不是怎么实现这些功能 而是一句话:

    相信自己, 别人可以做到,你也可以。


    这里也要谢谢iOS让我觉得原来代码可以这么玩,这么有趣。
    接下里跟你们说说美三的主要功能的实现,一个一个来:如下选选择地址


    选择地址 屏幕快照 2015-09-11 21.46.59.png

    如上界面截图一眼望上去实现方案如下:
    1.创建N个button,或者xib拉N个button
    2.UICollectionView
    3.for循环九宫格创建button
    第一种SB才这么干,第二种吃饱了撑着(杀鸡焉用宰牛刀?)
    所以我用第三种代码如下:

    
    //三列
         int totalloc = 3;
        
         CGFloat buttonw = 70;
         CGFloat buttonh = 30;
        
        //算出间距 self.frame.size.width
         CGFloat margin=(self.frame.size.width - totalloc * buttonw) / (totalloc + 1);
         //int count=11;
         for (int i = 0; i < areaArray.count; i++) {
             NSDictionary *dict = areaArray[i];
             NSString *titleStr = dict[@"areaName"];
             int row = i / totalloc;//行号
             //0/3=0,1/3=0,2/3=1; (i 从0到2都是第一行) i= 3的时候第二行
             
             int loc = i % totalloc;//列号
             
             //横坐标
             CGFloat buttonx = margin + (margin + buttonw) * loc;
             
             //纵坐标
             CGFloat buttony = margin + (margin + buttonh) * row;
             
             
             //创建uiview控件
             UIButton *areaButton=[[UIButton alloc]initWithFrame:CGRectMake(buttonx, buttony, buttonw, buttonh)];
             [areaButton setTitle:titleStr forState:UIControlStateNormal];
             [areaButton setBackgroundColor: navigationBarColor];
             [areaButton addTarget:self action:@selector(areaButtonClick:) forControlEvents:UIControlEventTouchUpInside];
             [self.scrollView addSubview:areaButton];
    
    屏幕快照 2015-09-11 22.02.41.png

    这个界面的热门实现也是用的九宫格创建右边的“热ABCD。。。”
    用的如下方法:

    - (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
    {
        return _keys;
    }
    

    点击之后回到主界面的传值,用的是block传值
    定义一个block 声明该block对象

    typedef void(^JFSendCityNameBlock)(NSString *cityNameStr);
    
    @property (nonatomic , copy)JFSendCityNameBlock sendCityBlock;
    
    -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
        if (indexPath.section >0) {
            NSString *key = _keys[indexPath.section] ;
            NSString *cityName = [_cities objectForKey:key][indexPath.row];
            JFLog(@"%@", cityName);
    ##这个地方调用block用来传值
            self.sendCityBlock (cityName);
            [self dismissViewControllerAnimated:YES completion:^{
            }];
        }
    }
    
    #pragma mark -changeCityButtonClickDelegate
    -(void)changCityButtonClick:(UIButton *)sender{
        JFShowAllCityViewController *showAllCityVC = [[JFShowAllCityViewController alloc]init];
     ###再要跳转得倒这个控制器对象的时候给他用block回调传值   
        showAllCityVC.sendCityBlock = ^(NSString *str){
            [self.leftButton setTitle:str forState:UIControlStateNormal];
            JFLog(@"主界面%@,",str);
        };
        [self presentViewController:showAllCityVC animated:YES completion:^{
            
        }];
    //    [self.navigationController pushViewController:showAllCityVC animated:YES];
        
    }
    

    webview

    接下里说说下面这个界面这个界面用webView做的没啥技术含量
    说下隐藏底部导航按钮

    /**
     *  隐藏底部导航条
     */
    -(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{
        self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
        if (self) {
            self.hidesBottomBarWhenPushed = YES;
        }
        return self;
    }
    

    webView代理方法给给当前的控制器title赋值

    -(void)webViewDidFinishLoad:(UIWebView *)webView{
        JFLog(@"加载webview完成");
        NSString *theTitle=[webView stringByEvaluatingJavaScriptFromString:@"document.title"];
        _titleLabel.text = theTitle;
        [_activityView stopAnimating];
        
    }
    

    自定义大头针气泡

    我要重点说下上面这个界面,是我困惑了很久的一个鬼东西百度地图自定义气泡,记得之前问一个简友,让我很郁闷。问他一个问题什么都解释不清楚。

    我会独立一篇出来讲解这个东东

    主要思路如下:
    1.创建一个数据模型(里面友经纬度,气泡上的数据)
    项目中用:JFDataModel类
    2.继承BMKPointAnnotation(里面声明一个数据模型属性用来传递模型数据)
    项目中用:JFAnnotation类
    3.画气泡图:(所谓自定义气泡,就是根据需求来自 定义)
    项目中用:JFCalloutView类
    代码如下:

    //画气泡
    -(void)drawRect:(CGRect)rect{
        [self drawInContext:UIGraphicsGetCurrentContext()];
        
        self.layer.shadowColor = [[UIColor blackColor] 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);
        //
        [self getDrawPath:context];
        CGContextFillPath(context);
    }
    
    -(void)getDrawPath:(CGContextRef)context{
        
        CGRect rrect = self.bounds;
        CGFloat radius = 6.0;
        CGFloat minx = CGRectGetMinX(rrect),
        midx = CGRectGetMidX(rrect),
        maxx = CGRectGetMaxX(rrect);
        CGFloat miny = CGRectGetMinY(rrect),
        maxy = CGRectGetMaxY(rrect)-kArrorHeight;
        
        //画向下的三角形
        CGContextMoveToPoint(context, midx+kArrorHeight, maxy);
        CGContextAddLineToPoint(context, midx, maxy+kArrorHeight);//画直线
        CGContextAddLineToPoint(context, midx-kArrorHeight, maxy);
        
        //画4个圆弧
        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);
    }
    

    4.创建标注(就是创建大头针)
    项目中用 JFAnnotationView
    关键代码如下

    /**
     *  通过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;
            annotationView.image = [UIImage imageNamed:@"icon_map_cateid_1"];
    
            // 设置中⼼心点偏移,使得标注底部中间点成为经纬度对应点
            
            // annotationView.centerOffset = CGPointMake(0, -18);
            return annotationView;
        }
        return nil;   
    }
    
    上门服务

    这个界面的点击事件也是 用的webview做的没啥好讲的

    切换

    这个界面只是预留了界面供下一个版本的控制器


    接下里说说这个界面的功能


    搜索

    代码如下:

    #pragma mark -UITextFieldDelegate
    - (BOOL)textFieldShouldReturn:(UITextField *)textField{
    
        if (textField.text.length) {
            for (NSString *text in self.hisDatas) {
                if ([text isEqualToString:textField.text]) {
                    return YES;
                }
            }
            //输入之后立马插到数组 然后写入文件
            [self.hisDatas insertObject:textField.text atIndex:0];
            [self.hisDatas writeToFile:JFSearchHistoryPath atomically:YES];
            [self.searchTableView reloadData];
            textField.text = @"";
        }
        
        return YES;
    }
    

    没搜索一个我就把他插到文件里面,也是数据持久化的一个应用了
    然后每次打开这个界面的时候就从新读取这个文件转为数组,再加载到tableView上这个功能有点像一个简友:尼维的小熊的高仿城觅,搜索功能,是的这个功能是看他的,但是我做了另一些封装。

    详情

    详细源码我已经放到github上面了里面已经解释的很清楚了

    本项目会继续更新下去的,希望你继续关注我哦,我一定会分享更好的文章更好的项目供大家一起学习。

    如果你觉得还不错就给我一个star或者给我提意见我都会非常感谢。

    相关文章

      网友评论

      • Zcocoa:帅气,求博主更新Github地址时候@一下,谢谢啊!
        Zcocoa: @tubiebutu 谢谢啊
        土鳖不土:@Zcocoa 已经在高仿美团<4>中贴出来了
      • 中神通:楼主,请教一下:百度的BMKAnnotationView上有现成的气泡paopaoView,这个paopaoView也是可以自定义的,楼主为什么不用这种?楼主这种气泡是直接addSubView上去的,点击时不是显示在地图图的最上层,请问这个怎么解决?
      • 工藤新er:/**
        * 这个地方如果用KVC 的话有局限性,因为他都是一一对应的,少一个都不行
        */
        //[self setValuesForKeysWithDictionary:dict];
        self.title = dict[@"title"];
        self.imageName = dict[@"image"];
        PO主 KVC是可以的 只要实现两个方法
        - (void)setValue:(id)value forUndefinedKey:(NSString *)key
        {

        }
        - (id)valueForUndefinedKey:(NSString *)key
        {
        return nil;
        }
        在没有key 返回nil就行 之前解析json到model都用KVC 看了PO主的 发现MJ的两个库简直强大到没sei了
        土鳖不土:@工藤新er 主要是用Runtime字典转模型
      • 9e91f01ff9c2:是怎么实现弹出JFSelectAddressView的,看半天没看出来!!!!
        土鳖不土:@9e91f01ff9c2JFSelectAddressView是一个透明层,在初始化的时候就创建,并且隐藏。 点击主界面左边按钮的时候让JFSelectAddressView不隐藏。然后在透明层上加一个JFAddressScrollView,用来显示地区信息。
      • 花了个缺:博主,要是github出来记得跟我说下,支持你。。
        花了个缺:@tubiebutu 好的。。 :smile:
        土鳖不土:@花了个缺 在高仿美团<四>里面已经贴出来了。
      • e2764ddb8272:不错、回头尝试用Swift重写,来学习学习!
        土鳖不土:@SpongeBob_Ma 加油
      • 街灯下de橱窗:想问一下,商圈的url是如何抓取的,我只能抓取到分类的url,可是商圈的url没有抓取到
      • Scott_Mr:另外,想问一下为什么我在storyBoard中创建的tabBar,然后在每个控制的viewDidLoad里面赋值了一张点击的时候的图片,可是运行起来,底部的tabBar的图片还是会被渲染成蓝色的呢?
        工藤新er:@Scott_Mr
        UIImage *image = [[UIImage imageNamed:name]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];设置不要渲染图片 再赋值image imageselected
        Scott_Mr:@tubiebutu 想问一下你用UIWebView做出来的还能交互,是用到的什么?
        土鳖不土:@Scott_Mr 很有可能就是你没移除系统自带的tabbar.只是覆盖在上面。
      • Scott_Mr:mark一下,博主贴出github之后记得@我一下,多谢,另外,请问你这数据都是抓取的么?
        土鳖不土:@Scott_Mr 已经在高仿美团四里面贴出
      • 夕若若:支持 ~~~ 学习
        土鳖不土:@夕若若 谢谢
      • ChrisPzzz:collectionView 实现固定的button排列不算是大材小用吧 挺方便的
        土鳖不土:@蔡镇安 如果你觉得方便,就用吧。个人只是建议九宫格更轻量级。
        菜先生:@tubiebutu 3个就够了
        土鳖不土:@碎步_Model 1.要用collectionView至少需要5个代理方法。2.给控制器增压了。3.根据apple思想尽量一个视图对应一个控制器
      • 770115dc80ae:火钳留名
        土鳖不土:@茉茉茉莉酒 ?
      • _____柠檬:再次过来学习了 ,谢谢楼主的无私 :clap:
        土鳖不土:@柠檬沟酸奶 谢谢
      • 只因我为足球而生:帅气!可是没见到Github地址呢…😳
        土鳖不土:@只因我为足球而生 在github里面已经适配了iOS9并优化了资源,和打开bug.希望可以帮助到你
      • 煜寒了:美团用的是高德地图,楼主写的挺棒,自定义气泡做得很完善了
        土鳖不土:@Jianer 没事。 谢谢你的分享
        煜寒了:@tubiebutu 看到不开心的,百度地图那块不会是说我的吧,刚去看了评论,感觉很详细的呢 抱歉哈
        土鳖不土:@Jianer 谢谢
      • niuxinghua:源码地址呢
        土鳖不土:@niuxinghua 后续会贴出来的最近在整理github项目
      • 穷得瑟M:群主 没看到Github链接
        土鳖不土:@19021105cc5e 已经在高仿美团4里面贴出
        土鳖不土:@19021105cc5e 后续会贴出来的最近在整理github项目
      • 叶舞清风:我的才8.1
        叶舞清风:@tubiebutu 就是我的Xcode版本太低,才6.1
        土鳖不土:@叶舞清风 ?啥意思
      • 叶舞清风:知识需要动力
        土鳖不土:@叶舞清风 加油
      • 郑钦洪_:谢谢分享
        土鳖不土:@郑钦洪_ 谢谢
      • AbelSu:额,木有看见Github链接?求博主Github名字
        土鳖不土:@AbelSu 最近在整理github项目,会贴出来的哦。
      • AbelSu:支持博主,写得不错,不过博主有这个源码可以分享吗?
        土鳖不土:@AbelSu 已经在高仿美团4里面贴出

      本文标题:高仿美团<三>

      本文链接:https://www.haomeiwen.com/subject/mqppcttx.html