如何为 UITableViewController 添加手风琴效果？

Question

这是当前屏幕：

如您所见，这是所提供服务的列表。我从公司的 api 中检索了数据，并且表格视图单元格是动态填充的。

这是它应该如何工作的：

单击其中一个单元格时，类似手风琴的效果应该会展开单元格并显示特定服务的更多详细信息。再次单击它或单击其他服务应将其关闭。我应该如何实现这个？

这是cellForRowAtIndexPath的代码：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ServiceCell" forIndexPath:indexPath];

// Configure the cell...
Service * serviceObject;
serviceObject = [servicesArray objectAtIndex:indexPath.row];

//Configuring the images
Image * air = [[Image alloc] initWithLocation:@"icons/air.png" andWithServiceID:21];
Image * pest = [[Image alloc] initWithLocation:@"icons/pest.png" andWithServiceID:18];
Image * carpenter = [[Image alloc] initWithLocation:@"icons/carpenter" andWithServiceID:16];
Image * laundry = [[Image alloc] initWithLocation:@"icons/laundry" andWithServiceID:20];
Image * electrician = [[Image alloc] initWithLocation:@"icons/electrician.png" andWithServiceID:17];
Image * plumber = [[Image alloc] initWithLocation:@"icons/plumber.png" andWithServiceID:14];
Image * appliance = [[Image alloc] initWithLocation:@"icons/appliance.png" andWithServiceID:15];

NSArray * images = [[NSArray alloc] initWithObjects:[UIImage imageNamed:air.location], [UIImage imageNamed:pest.location], [UIImage imageNamed:carpenter.location], [UIImage imageNamed:laundry.location], [UIImage imageNamed:electrician.location], [UIImage imageNamed:plumber.location], [UIImage imageNamed:appliance.location], nil];

if([serviceObject.serviceID isEqualToNumber:[[NSNumber alloc] initWithInt:air.serviceID]]){
    cell.imageView.image = images[0];
}else if([serviceObject.serviceID isEqualToNumber:[[NSNumber alloc] initWithInt:pest.serviceID]]){
    cell.imageView.image = images[1];
}else if([serviceObject.serviceID isEqualToNumber:[[NSNumber alloc] initWithInt:carpenter.serviceID]]){
    cell.imageView.image = images[2];
}else if([serviceObject.serviceID isEqualToNumber:[[NSNumber alloc] initWithInt:laundry.serviceID]]){
    cell.imageView.image = images[3];
}else if([serviceObject.serviceID isEqualToNumber:[[NSNumber alloc] initWithInt:electrician.serviceID]]){
    cell.imageView.image = images[4];
}else if([serviceObject.serviceID isEqualToNumber:[[NSNumber alloc] initWithInt:plumber.serviceID]]){
    cell.imageView.image = images[5];
}else{
    cell.imageView.image = images[6];
}

//Setting the row labels
cell.textLabel.text = serviceObject.serviceName;

cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

return cell;

}

我目前正在使用 Xcode 6.3.2 和最新的 iPhone SDK。

感谢任何帮助。谢谢。

Answer 1

您应该在单击的表格视图中插入新的单元格（或多个）。并注册点击，让您知道选择了哪个单元格

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    [tableView beginUpdates];  
    if(self.selectedCellPath) { //Index path for already expanded cell

        [tableView deleteRowsAtIndexPaths:@[self.selectedCellPath] withRowAnimation: UITableViewRowAnimationTop];
    }

    //if we clicked already expanded cell we just clear everything
    if([self.selectedCellPath isEqual:indexPath]) {
       self.selectedCellPath = nil;
    }
    else {
        self.selectedCellPath = indexPath;

        [tableView insertRowsAtIndexPaths:@[self.selectedCellPath] withRowAnimation: UITableViewRowAnimationTop];
    }
    [tableView endUpdates];

}

而且，在你cellForRowAtIndexPath

if([indexPath isEqual:self.selectedCellPath]) {
   //Create your specific cell with text fields
}
else {
   //Create your common cell 
   //Your code for cell creation from question post actually goes here
}

更新 1

一点性能建议 - 将所有这些 Image * 代码移至 viewDidLoad 方法。并使您的 NSArray *images 成为您的控制器的属性。因为在您的变体中，您在每次表格视图要求单元格时创建它。你不需要这个。做一次 - viewDidLoad 是做这些事情的正确地方