iOS支持展开折叠的弹出菜单（水平方向弹出菜单视图）

2022-01-12 254

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： iOS支持展开折叠的弹出菜单（水平方向弹出菜单视图）

前言

文章：https://kunnan.blog.csdn.net/article/details/106406160

视频：https://live.csdn.net/v/173757

demo下载地址：https://download.csdn.net/download/u011018979/20537947

疑问解答，请关注公众号：iOS逆向

1.支持展开折叠的弹出菜单的实现思路：

1.1将弹出视图添加到keyWindow，蒙版也添加到主窗口(主要原因是点击屏幕的空白处，需要隐藏弹出视图) 1.2展示的时候，动画从右上角往左下脚延伸；隐藏的时候，动画从左下脚往右上角收回（展示的时候，从上往下，即x,y 慢慢变大） 1.3 内部视图采用collectionView进行布局 1.4 view的frame 是根据当前点击的菜单按钮所在的商品cell进行计算和坐标转换的。

2.水平方向弹出菜单视图的应用场景：

2.1、门店商品的支持的功能：向右横向展开视图（操作：下/上架、打印、编辑、同步网络）支持再次折叠隐藏视图

2.2、网店商品目前只包含下架功能：展开折叠视图：（包含上/下架商品功能）

竖向弹出菜单视图

弹出菜单：会员模块的右上角的下拉菜单（竖向）

I、支持展开折叠的弹出菜单的实现思路

1.1将弹出视图添加到keyWindow，蒙版也添加到主窗口(主要原因是点击屏幕的空

 #define kWindow [UIApplication sharedApplication].keyWindow
 [kWindow addSubview:self];
 [kWindow addSubview:self.cover];//蒙版添加到主窗口， 蒙版用于监听点击事件，来隐藏弹出视图

1.2 展开

展示的时候，动画从右上角往左下脚延伸；隐藏的时候，动画从左下脚往右上角收回（展示的时候，从上往下，即x,y 慢慢变大）

展开效果的实现原理：

1 点击展示商品信息的cell 上面的弹出按钮时，阴影alpha由0到1，弹窗的scale由0到1（这里使用CABasicAnimation） 2 点击空白处（self.cover），再让阴影alpha由1到0，弹窗的scale由1到0（同样使用CABasicAnimation），动画完成后移除阴影和弹窗

1.3 内部视图采用collectionView进行布局

@property (strong, nonatomic) UICollectionView *collectionView;

1.4 view的frame 是根据当前点击的菜单按钮所在的商品cell进行计算和坐标转换的。

CGRect endRect = [weakSelf.btn.superview convertRect:weakSelf.btn.frame toView:kWindow];
     CGRect Rect = [weakSelf.tmpbtn.superview convertRect:weakSelf.tmpbtn.frame toView:kWindow];
     // 设置菜单的frame
     weakSelf.models.rect = Rect;
     weakSelf.models.endRect =   endRect;// 结束的位置
     [[[weakSelf models].viewModel            expandMenuSubject] sendNext:weakSelf.models];
 }];

II、用法

2.1 创建弹出菜单popmenuView

构建菜单内部的数据模型

+ (NSMutableArray*)getMenudatas4MiniAppWithBlock:(void (^)(id sender))block{
   NSMutableArray* tmp = [NSMutableArray array];
    QCTCollectionModel *network = [QCTCollectionModel new];
    network.titleName =  QCTLocal(@"Shelves_key");
    network.imgName= @"icon_sp_shangjia";
    network.block = block;
    network.type =QCTCollectionModelType4Shelves;
    [tmp addObject:network];
    return tmp;
}

实现popmenuView的懒加载

#pragma mark - ******** 支持展开折叠的弹出菜单视图
- (QCTHorizontalpopupView *)popmenuView{
    if (!_popmenuView) {
        _popmenuView = [[QCTHorizontalpopupView alloc] initWithFrame:self.view.frame viewModel:self.viewModel];
        _popmenuView.hidden = YES;
       #pragma mark - ******** 构建折叠视图的模型
        __weak __typeof__(self) weakSelf = self;
            self.viewModel.Menudatas = [QCTCollectionModel getMenudatas4MiniAppWithBlock:^(  QCTCollectionModel * sender) {
                [[[weakSelf viewModel] hiddenSubject]sendNext:nil];
                NSLog(@"点击了%@",[sender titleName]);
                switch (sender.type) {
                    case QCTCollectionModelType4edit:
                    {
                        [weakSelf setupQCTEditMerchandiseViewController:sender];
                    }
                        break;
                    case QCTCollectionModelType4Shelves:
                        //        /**上架*/
                    {
                        // 根据不同的商品类型进行界面跳转
                        [weakSelf setupQCTCollectionModelType4Shelves:sender];
                    }
                        break;
                    case QCTCollectionModelType4Offtheshelf:
                    {
                        // 根据不同的商品类型进行界面跳转
                        [weakSelf setupQCTCollectionModelType4Shelves:sender];
                    }
                        break;
                        //        /**打印*/
                    case QCTCollectionModelType4Printer:
                    {
                        //打印
                        [weakSelf printerInfo:self.popmenuView.model];
                    }
                        break;
                    default:
                        break;
                }
            } ];
        _popmenuView.models = self.viewModel.Menudatas;
    }
    return _popmenuView;
}

2.2 监听弹出和折叠事件

/**
     监听弹出事件，此事件由展示商品信息的cell发出。
     */
    [self.viewModel.showMenuSubject subscribeNext:^(QCTgoodsManListModel  * x) {
        [weakSelf.popmenuView updateRect:   x.rect  ];// 更新popmenuView的位置。
        [weakSelf.popmenuView updateendRect:   x.endRect  ];// 设置折叠动画的终点
        [weakSelf.popmenuView expandView:x.expandViewCGPoint  ];
    }];
    /**
     折叠弹出菜单
     */
    [self.viewModel.hiddenSubject subscribeNext:^(id  _Nullable x) {
        [weakSelf.popmenuView foldView];
    }];
    // 监听弹出菜单按钮的点击事情，进行判断是展开还是隐藏
    [self.viewModel.expandMenuSubject subscribeNext:^(id  _Nullable x) {
        [weakSelf expandMenu:x];
    }];

判断是展开弹出菜单，还是折叠

#pragma mark - ******** 判断是展开弹出菜单，还是折叠
- (void)expandMenu:(id)x{//点击按钮
    self.popmenuView.model = x;
    [ self.viewModel.reloadSubject sendNext:nil];
    if ([self.popmenuView isHidden]) {
        [self.viewModel.showMenuSubject sendNext:x];
    }else{
        [self.viewModel.hiddenSubject sendNext:nil];
    }
}

III、完整demo

3.1 demo下载

文章：https://kunnan.blog.csdn.net/article/details/106406160视频：https://live.csdn.net/v/173757 demo下载地址：https://download.csdn.net/download/u011018979/20537947疑问解答，请关注公众号：iOS逆向

1.支持展开折叠的弹出菜单的实现思路：

1.1将弹出视图添加到keyWindow，蒙版也添加到主窗口(主要原因是点击屏幕的空白处，需要隐藏弹出视图) 1.2展示的时候，动画从右上角往左下脚延伸；隐藏的时候，动画从左下脚往右上角收回（展示的时候，从上往下，即x,y 慢慢变大） 1.3 内部视图采用collectionView进行布局 1.4 view的frame 是根据当前点击的菜单按钮所在的商品cell进行计算和坐标转换的。

2.水平方向弹出菜单视图的应用场景：