实现类似美团的下拉分级式菜单

最近要实现如下的下拉式二级目录效果:

思路很简单,左右二级目录其实就是两个UITableView,点击左边cell实现右边table刷新。
关键代码如下:


初始化变量:
NSInteger _leftIndex;//关键变量,记录一级目录点击cell的index,用来生成二级目录

//初始化一二级目录tableview
-(void)initsubview{

     //一级目录
    _leftTableView = [UITableView new];
    [_leftTableView setFrame:CGRectMake(0, 0, screenwith/5*2, self.frame.size.height)];
    _leftTableView.tag = 10;
    _leftTableView.delegate = self;
    _leftTableView.dataSource =self;
    _leftTableView.backgroundColor = [UIColor whiteColor];
    [_leftTableView setTableFooterView:[[UIView alloc] initWithFrame:CGRectZero]];
    [self addSubview:_leftTableView];

    //二级目录
    _rightTableView = [UITableView new];
    [_rightTableView setFrame:CGRectMake(screenwith/5*2, 0, screenwith/5*3, self.frame.size.height)];
    _rightTableView.tag = 20;
    _rightTableView.delegate = self;
    _rightTableView.dataSource =self;
    _rightTableView.separatorStyle=UITableViewCellSelectionStyleNone;
    _rightTableView.backgroundColor = [UIColor whiteColor];
    [self addSubview:_rightTableView];
    self.userInteractionEnabled=YES;

}

//获取目录数据 ,一层二层数据一次性获取 此处是本地获取 一般情况下是网络获取json数据
-(void)getData{

    NSString *newPath=[NSString stringWithFormat:@"%@%@%@",[[NSBundle mainBundle]resourcePath],@"/",@"data"];

    //根据文件路径读取数据
    NSData *jdata = [[NSData alloc]initWithContentsOfFile:newPath];
   // 格式化成json数据
    NSDictionary* jsonObject = [NSJSONSerialization JSONObjectWithData:jdata options:kNilOptions error:nil];
    NSArray* arr = (NSArray*)jsonObject[@"data"];
     _leftArr = [CourseSeries mj_objectArrayWithKeyValuesArray:arr];
     __weak typeof(self) weakself= self;
     //刷新ui要回到主线程
     dispatch_async(dispatch_get_main_queue(), ^{
                    [weakself.leftTableView reloadData];
                });
}

//一级二级菜单cell数目
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    if(tableView.tag == 10){
        return [_leftArr count];
    }else {

        if(_leftArr.count==0){
            return 0;
        }
        //根据_leftIndex获取二级菜单数据
        CourseSeries *serie = _leftArr[_leftIndex];
        //二级菜单数目
        return [serie.list count];
    }
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 42;
}

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    if(tableView.tag==10){
     //一级目录cell实现
        return cell;
    }else {

      //二级目录cell实现 ,注意二级目录的实现要通过全局变量_leftIndex获取初始化数据
        CourseSeries *cs = _leftArr[_leftIndex];
       //cell具体赋值
        return cell;
    }
}

//点击一级二级目录的操作
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    if(tableView.tag == 10){
       //注意全局变量_leftIndex的取值
        _leftIndex = indexPath.row;
       //根据_leftIndex刷新二级目录
        [_rightTableView reloadData];

    }else {
        _rightIndex = indexPath.row;
       //根据_leftIndex获得当前二级目录数据
        CourseSeries* sr = _leftArr[_leftIndex];
       //再根据indexPath定位当前电机的二级目录具体cell
       NSArray* arr = [courseTypeMJ mj_objectArrayWithKeyValuesArray:sr.list];
        courseTypeMJ* ct = arr[indexPath.row];
       //点击二级目录cell的具体操作

    }

}

最终实现效果如下:

具体实现效果还要加上遮盖层,可参见上传的demo。
实现效果比较简陋,但是大体效果就是这样。

demo下载:https://github.com/tyrantkemp/XZMenu.git

时间: 2025-01-27 07:26:00

实现类似美团的下拉分级式菜单的相关文章

android组件SwipeRefreshLayout下拉小球式刷新效果

swiperefreshlayout实现下拉小球式的刷新,供大家参考,具体内容如下 布局文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools&quo

国外网站曝光WP8.1视频 新增下拉通知中心菜单

硅谷网讯 最近LeakyLeak网站上 曝光了一段通过诺基亚Lumia920来展示的最新http://www.aliyun.com/zixun/aggregation/3452.html">WindowsPhone8.1的最新视频.从效果模糊的视频中我们能够看到似乎未来的WindowsPhone8.1系统已经将会支持文件夹功能及下拉调出通知中心的功能. 根据视频的内容 来看,用户只需要将手指从屏幕顶端轻轻下滑 就会调出类似通知中心的界面:另外如果在动态磁贴界面显示的是文件夹文件,通过轻轻点

Android实现下拉导航选择菜单效果

本文介绍在Android中如何实现下拉导航选择菜单效果.   关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView来控制里面的菜单项,每个菜单项对应相应的

vb6.0-怎么设置combo的下拉框为菜单条弹出的样式?

问题描述 怎么设置combo的下拉框为菜单条弹出的样式? 怎么设置combo的下拉框为菜单条弹出的样式?VB6.0自带的样式比较难看.而且怎么把combo的编辑框给隐藏,以免造成混乱? 解决方案 你可以试试看toolbar的deopdown风格的按钮配合弹出菜单实现. 解决方案二: 设置Spinner弹出框/下拉框的样式设置Spinner弹出框/下拉框的样式

Android仿今日头条APP实现下拉导航选择菜单效果_Android

本文实例为大家分享了在Android中如何实现下拉导航选择菜单效果的全过程,供大家参考,具体内容如下 关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView

Android仿美团分类下拉菜单实例代码_Android

本文实例为大家分享了Android仿美团下拉菜单的实现代码,分类进行选择,供大家参考,具体内容如下 效果图 操作平台 AS2.0 第三方框架:butterknife build.gradle dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.4.0' compile

Android仿美团分类下拉菜单实例代码

本文实例为大家分享了Android仿美团下拉菜单的实现代码,分类进行选择,供大家参考,具体内容如下 效果图 操作平台 AS2.0 第三方框架:butterknife build.gradle dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.4.0' compile

js 带记忆功能的二级下拉竖向导航菜单

基本信息 基本简介 基本新闻 高级信息 高级简介 高级新闻 系统管理 会员管理 管理设置 权限设置 退出系统

下拉收伸菜单

我的网站 www.netany.net www.netany.net www.netany.net 我的帐务 支付 网上支付 登记汇款 在线招领 历史帐务 网站管理 登录 管理 管理 管理