在之前的有篇文章讲述了利用HeaderView来写类似QQ好友列表的表视图。
这里写的天猫抽屉其实也可以用该方法实现,具体到细节每个人也有所不同。这里采用的是点击cell对cell进行运动处理以展开“抽屉”。
最后完成的效果大概是这个样子。
主要的环节:
点击将可视的Cell动画弹开。
其他的Cell覆盖一层半透明视图,将视线焦点集中在弹出来的商品细分类别中。
再次点击选中的或其他Cell,动画恢复到点击之前所在的位置。
商品细分类别属于之前写过的九宫格实现。这里就不贴代码了。之前的文章:点击打开链接
这里的素材都来自之前版本天猫的IPA。
加载数据
- (void)loadData
{
NSString *path = [[NSBundle mainBundle] pathForResource:@"shops" ofType:@"plist"];
NSArray *array = [NSArray arrayWithContentsOfFile:path];
NSMutableArray *arrayM = [NSMutableArray arrayWithCapacity:array.count];
[array enumerateObjectsUsingBlock:^(NSDictionary *dict, NSUInteger idx, BOOL *stop) {
ProductType *proType = [[ProductType alloc] init];
proType.name = dict[@"name"];
proType.imageName = dict[@"imageName"];
proType.subProductList = dict[@"subClass"];
[arrayM addObject:proType];
}];
self.typeList = arrayM;
}
一个ProductType数据模型,记录名称,图片名称等。
单元格数据源方法
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
TypeCell *cell = [tableView dequeueReusableCellWithIdentifier:RTypeCellIdentifier];
[cell bindProductKind:_typeList[indexPath.row]];
return cell;
}
将数据模型的信息绑定到自定义类中进行处理,