ios - 如何给 UITableViewController 添加 Accordion 效果？

Question

这是当前屏幕:

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

这是它应该如何工作的:

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

这是 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

您应该将新单元格(或多个)插入到您的 TableView 中，然后单击。并注册点击，让您知道选择了哪个单元格

- (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 成为 Controller 的属性。因为在您的变体中，您会在每次时间 TableView 请求单元格时创建它。你不需要这个。做一次 - viewDidLoad 是做这些事情的正确地方