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

公众号iOS逆向

发布于 2021-07-30 16:30:19

1.8K0

发布于 2021-07-30 16:30:19

文章被收录于专栏：iOS逆向与安全iOS逆向与安全

前言

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

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

demo1下载地址：https://download.csdn.net/download/u011018979/20598998

demo1设置了两个测试开关：测试开关1：将水平方向弹出菜单视图集成到cell 测试开关2：将水平方向弹出菜单视图集成到VC的View

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

demo2的内容是：将水平方向弹出菜单视图集成到VC的View 疑问解答，请关注公众号：iOS逆向

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

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

/**
 触发折叠菜单隐藏和显示的按钮
 */
@property (nonatomic,weak) UIButton *btn;

/**
 用于计算折叠菜单frame，
 */
@property (nonatomic,weak) UIButton *tmpbtn;

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

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

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

竖向弹出菜单视图

弹出菜单：会员模块的右上角的下拉菜单（竖向）https://kunnan.blog.csdn.net/article/details/84618986

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

demo 设置两个测试开关

    [self addpopV2cell];//  测试开关1：将水平方向弹出菜单视图集成到cell

//    [self addpopV2VCView];//  测试开关2：将水平方向弹出菜单视图集成到VC的View

3.1 demo1: 将水平方向弹出菜单视图集成到cell

demo1下载地址：https://download.csdn.net/download/u011018979/20598998疑问解答，请关注公众号：iOS逆向

3.2 demo2:将水平方向弹出菜单视图集成到VC的View

文章：https://kunnan.blog.csdn.net/article/details/106406160视频：https://live.csdn.net/v/173757 demo2下载地址：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、网店商品目前只包含下架功能：展开折叠视图：（包含上/下架商品功能）

3.3 水平方向弹出菜单视图

弹出菜单HorizontalpopupView的具体代码

在这里插入图片描述

完整代码和demo请访问文章：https://kunnan.blog.csdn.net/article/details/106406160

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

3.4 集成到cell

粉丝疑问：是否可以用在cell的点击事件

答：可以，请参考本文的集成例子QCTQCTgoodsListTableViewCellView

你也可以利用cancelsTouchesInView属性，控制点击事件优先级。案例：iOS设置tableView的点击事件优先级低于cell的选中事件【场景：比如筛选视图，监听蒙版的点击事件就隐藏筛选视图】https://blog.csdn.net/z929118967/article/details/89405040

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] init];
    [[tap rac_gestureSignal] subscribeNext:^(id x) {
        @strongify(self);
        if (self.alpha) {
            [self.viewModel.hiddenSubject sendNext:nil];
        }
    }];
    [self addGestureRecognizer:tap];
    
    UITapGestureRecognizer *cutTap = [[UITapGestureRecognizer alloc] init];
    cutTap.cancelsTouchesInView = NO;// 设置tableView的点击事件优先级，低于cell的选中事件
    [[cutTap rac_gestureSignal] subscribeNext:^(id x) {
        //        @strongify(self);
        [self.viewModel.hiddenSubject sendNext:nil];

    }];
    [self.tableView addGestureRecognizer:cutTap];

————————————————
版权声明：本文为CSDN博主「#公众号：iOS逆向」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/z929118967/article/details/89405040

集成到cell的代码请看demo1:https://download.csdn.net/download/u011018979/20598998