美文网首页iOS
三分钟实现一个类似美团的导航菜单栏

三分钟实现一个类似美团的导航菜单栏

作者: 75afc06dcc73 | 来源:发表于2018-05-31 12:37 被阅读24次

    惯例,先看效果

    瓦达西.gif

    问:实现这样的一个效果需要多久?
    三分钟,三分钟足矣。GitHub :MTMenusDemo


    使用介绍,掐表,计时开始。。。

    MTMenus基于UIScrollerView,未考虑复用问题,因为实际项目中不会出现四五十个导航菜单。

    支持Cocoapods导入,pod 'MTMenusView'

    MTMenus使用方法与UITableView类似,需要遵守两个代理,及其简单方便。

    MTMenusViewDataSource与MTMenusViewDelegate
    

    前方纯代码

    //推荐使用frame方式创建,原因如下:
    //使用自动布局可能会导致MTmenus内部item计算出现偏差
    self.menus = [[MTMenusView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 140)];
    self.menus.dataSource = self;//数据源代理
    self.menus.delegate = self;//点击事件代理
    self.menus.currentPageIndicatorTintColor = [UIColor redColor];//当前分页指示器颜色
    self.menus.pageIndicatorTintColor = [UIColor blackColor];//其它分页指示器颜色
    [self.view addSubview:self.menus];//将其加在当前视图中
    

    数据源方法

    #pragma mark - DataSource
    - (NSInteger)mt_numberOfDisplayInMenusView:(MTMenusView *)menusView {
        return 导航菜单的总数量;
    }
    
    - (NSInteger)mt_numberOfRowsInMenusView:(MTMenusView *)menusView {
        return 显示为几行;
    }
    
    - (MTMenusViewColumnNumber)mt_numberOfColumnsInMenusView:(MTMenusView *)menusView {
        return 每页显示几列,目前仅支持4列与5列;
    }
    
    - (UIButton *)mt_menusView:(MTMenusView *)menusView itemForIndex:(NSInteger)index {
        UIButton *item = [[UIButton alloc] init];
        [item setTitle:[NSString stringWithFormat:@"%ld", index] forState:UIControlStateNormal];
        item.backgroundColor = UIColorRandom;
        return 每个导航菜单的样式及显示内容;
    }
    

    点击事件方法

    #pragma mark - Delegate
    //当点击MT其中的某个item时会触发此方法
    - (void)mt_menusView:(MTMenusView *)menusView didSelectIndex:(NSInteger)index {
    NSLog(@"%ld", index);
        self.lab.text = [NSString stringWithFormat:@"您当前点击为第 %ld 个", index];
    }
    

    最后一点

    #pragma mark - 刷新数据
    [self.menus reloadData];
    

    结束,三分钟应该还没到。下面就打个广告吧


    我的iOS开发交流群.JPG

    MTMenusView GitHub地址:https://github.com/CoderDwang/MTMenusDemo

    相关文章

      网友评论

        本文标题:三分钟实现一个类似美团的导航菜单栏

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