iOS纯Autolayout实现UITableView的二级分类下拉菜单展开动画,Autolayout真的快的飞起
最近在做项目，也遇到了各种奇奇怪怪的需求，有个需求一开始看起来有点难搞，但是在大神的指导下，既然做不到那种气泡，那我们就用魔术般切换Cell不就好了么，我用的是纯Autolayout，直观暴力，用习惯了真的强，把效果贴出来还蛮不错的，花了一小时写出了Demo给大家分享下。
Demo效果
1.首先我用的tableView实现的
2.我用了两套cell切换 第二套cell内嵌了collectionView
3.最关键的是由于用的tableView实现，点击每个image的时候回调进行了一些逻辑处理
4.高度计算和模型解析用了FDTemplateLayout和MJExtension 想用的请进传送！！
第一步
上面也提到了我用了两套cell，而且我用的也不是代码布局UI，那么直接点，贴几个图
你们自行感受下
普通状态下
下拉状态下
熟练用IB的应该很容易能看明白，三个ImageView三等分屏幕，高度是宽度的0.8倍，
这里的collectionView高度固定给的200，内容小于200缩短，大于200滚动
无需繁琐的代码，这布局几分钟就写完了，啦啦啦啦
第二步
还是贴一段解析本地数据的用法，我用的MJExtension，好用啊，也是非常迅速
快到不能呼吸，貌似我另一篇文章也有介绍，这里不多说了
- (void)requestCategoryInfo:(requestHelperBlock)block
{
NSString *path = [[NSBundle mainBundle] pathForResource:@"Category" ofType:@"json"];
NSString *categoryStr = [NSString stringWithContentsOfFile:path usedEncoding:nil error:nil];
NSArray *categoryArr = [categoryStr mj_JSONObject];
// 直接给数组里面的字典进行模型赋值
[CategoryInfomation mj_setupReplacedKeyFromPropertyName:^NSDictionary *{
return @{@"categoryID":@"id",
@"categoryPic":@"pic",
@"categoryName":@"group",
@"secondClassificationLists":@"list"
};
}];
[CategoryInfomation mj_setupObjectClassInArray:^NSDictionary *{
return @{@"secondClassificationLists":@"SecondCategoryInfomation"};
}];
// 子模型
[SecondCategoryInfomation mj_setupReplacedKeyFromPropertyName:^NSDictionary *{
return @{@"secondCategoryID":@"id",
@"secondCategoryName":@"name"
};
}];
// 通过数组加载数组模型，这里的类TWTBuyerMarket就是模型数组里面的小集合
NSMutableArray *dataLists = [CategoryInfomation mj_objectArrayWithKeyValuesArray:categoryArr];
// 把对应的每个分组的一级分组加入到二级分组里面去
for (CategoryInfomation *category in dataLists)
{
NSMutableArray *secondLists = category.secondClassificationLists;
SecondCategoryInfomation *secondNewModel = [[SecondCategoryInfomation alloc] init];
secondNewModel.secondCategoryID = category.categoryID;
secondNewModel.secondCategoryName = category.categoryName;
[secondLists insertObject:secondNewModel atIndex:0];
}
if (block)
{
block(dataLists,nil);
}
}第三步
tableView的布局就不介绍了，高度计算简单提下
// 给CollectionView加载对应的数据 selectedIndex传的是具体的 0 1 2哪一个被点击了 同时拿出collectionView的高度
NSInteger idx = indexpath.row * 3 + selectedIndex;
CategoryInfomation *category = self.categoryLists[idx];
cell.secondClassificationLists = category.secondClassificationLists;
cell.collectionView.width = SCREEN_WIDTH;
[cell.collectionView reloadData];
cell.selectedHeightConstraint.constant = cell.collectionView.collectionViewLayout.collectionViewContentSize.height > 200 ? 200 : cell.collectionView.collectionViewLayout.collectionViewContentSize.height;- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat singleWidth = (SCREEN_WIDTH - 6) / 3;
__weak typeof(self)weakSelf = self;
// 能被整除，那么肯定都展示三个
if (self.canDivisible)
{
CategoryInfomation *category = self.categoryLists[indexPath.row * 3 + 0];
CategoryInfomation *category1 = self.categoryLists[indexPath.row * 3 + 1];
CategoryInfomation *category2 = self.categoryLists[indexPath.row * 3 + 2];
// 三个钟有一个是需要打开的，那么就加载选择状态下的cell
if (category.needShowSecondClassification || category1.needShowSecondClassification || category2.needShowSecondClassification)
{
NSInteger selectedIndex;
if (category.needShowSecondClassification)
{
selectedIndex = 0;
}
else if (category1.needShowSecondClassification)
{
selectedIndex = 1;
}
else
{
selectedIndex = 2;
}
return [tableView fd_heightForCellWithIdentifier:selectedIdentify cacheByIndexPath:indexPath configuration:^(CategoryNormalTableViewCell *cell)
{
[weakSelf configSelectedCell:cell indexpath:indexPath selectedIndex:selectedIndex];
}];
}
else
{
return 0.8 * singleWidth + 3;
}
}
return 0;
}第四步 （主要逻辑就在这里）
点击事件切换cell，实现Demo的效果，直接看代码来的实在
#pragma mark - 点击图片的代理回调
- (void)clickImageViewCallBack:(CategoryNormalTableViewCell *)cell imageIndex:(NSInteger)idx
{
// 获取到那个Indexpath
NSIndexPath *indexpath = [self.tableView indexPathForCell:cell];
// 获取到数组里面的第几个
NSInteger index = indexpath.row * 3 + idx;
// 获取对象
CategoryInfomation *category = self.categoryLists[index];
// 修改字段
// 点击同一个
if (self.tempCategoryInfomation == category)
{
category.needShowSecondClassification = !category.needShowSecondClassification;
}
else
{
category.needShowSecondClassification = YES;
}
// 点击的每一次事件，都要让上一次存储的对象的需要展开变为NO
if (self.tempCategoryInfomation)
{
// 如果是同一行的情况下
if (indexpath.row == self.tempIndexpath.row)
{
// 如果是同一个产品
if (self.tempCategoryInfomation == category)
{
}
else // 不同一个产品
{
self.tempCategoryInfomation.needShowSecondClassification = NO;
}
[self.tableView reloadRowsAtIndexPaths:@[indexpath] withRowAnimation:UITableViewRowAnimationAutomatic];
self.tempIndexpath = indexpath;
self.tempCategoryInfomation = category;
return;
}
else // 不是同一行的时候
{
self.tempCategoryInfomation.needShowSecondClassification = NO;
[self.tableView reloadRowsAtIndexPaths:@[self.tempIndexpath] withRowAnimation:UITableViewRowAnimationAutomatic];
}
}
[self.tableView reloadRowsAtIndexPaths:@[indexpath] withRowAnimation:UITableViewRowAnimationAutomatic];
// 往上滚动，以免点击后面几行遮住二级分类
[self.tableView scrollToRowAtIndexPath:indexpath atScrollPosition:UITableViewScrollPositionTop animated:YES];
// 记得把本地点击的信息存储下来
self.tempIndexpath = indexpath;
self.tempCategoryInfomation = category;
}小白写的Demo，大神有什么意见请指教，其实也只是提供一个思路，有的朋友肯定认
为用collectionView写好一点，如果有想法的朋友可以自己试试，反正用不了几分钟，
蛮快的，记得分享哦
本地Demo地址：点击打开链接
噢。。。。。。NO，我把神器Reveal给pod进去了，怪不得工程那么大，10M啊，各位
看官抱歉啦。。。。。。
如果有朋友用了Reveal，可以直接打开看看结构哦，已经给您加载好了，这个东西非常强，还能看淘宝和京东等所有App的结构，太强了
点击打开链接