iOS支持展开折叠的弹出菜单（水平方向弹出菜单视图）
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.水平方向弹出菜单视图的应用场景：
2.1、门店商品的支持的功能：向右横向展开视图（操作：下/上架、打印、编辑、同步网络）支持再次折叠隐藏视图
2.2、网店商品目前只包含下架功能：展开折叠视图：（包含上/下架商品功能）
3.2 具体实现的代码
请访问文章：https://kunnan.blog.csdn.net/article/details/106406160
疑问解答，请关注公众号：iOS逆向
see also
- 竖向弹出菜单视图
弹出菜单：会员模块的右上角的下拉菜单（竖向）https://kunnan.blog.csdn.net/article/details/84618986
- 【点击导航条标题，下拉选择分类】iOS导航条的标题按钮的左侧是分类名称，右边的下拉图标
https://blog.csdn.net/z929118967/article/details/104315227
