前言

文章：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

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

前言

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

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

1.2 展开

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

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

II、用法

2.1 创建弹出菜单popmenuView

2.2 监听弹出和折叠事件

III、完整demo

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

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

3.3 水平方向弹出菜单视图

3.4 集成到cell

see also

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

前言

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

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

1.2 展开

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

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

II、用法

2.1 创建弹出菜单popmenuView

2.2 监听弹出和折叠事件

III、完整demo

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

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

3.3 水平方向弹出菜单视图

3.4 集成到cell

see also

热门文章

最新文章

相关电子书

相关实验场景

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

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