IOS详解TableView——选项抽屉（天猫商品列表）_ios tableview抽屉动画-优快云博客

在之前的有篇文章讲述了利用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;
}

将数据模型的信息绑定到自定义类中进行处理，这个类在加载视图之后由tableview进行了注册。