Ячейка аккордеонной таблицы - Как динамически расширить / свернуть uitableviewcell?

Question

Я пытаюсь создать аккордеонный тип uitableviewcell, который, когда пользователь выбирает ячейку, расширяется для отображения подробного информационного представления, встроенного подобно тому, как работает приложение digg.Сначала я попытался заменить текущую табличную ячейку пользовательской ячейкой в ​​cellForRowAtIndex, однако анимация выглядит немного изменчиво, поскольку вы видите заменяемую ячейку, и в целом эффект работает не очень хорошо.

Если вы посмотрите на приложение digg идругим, кто сделал это, кажется, что они не заменяют текущую ячейку, а вместо этого, возможно, добавляют подпредставление в ячейку?Однако первоначальная ячейка, похоже, вообще не оживляет, а только новые аккордеоны вида в таблицу.

У кого-нибудь есть идеи, как добиться подобного эффекта?

Обновление: Я добился некоторого прогресса, используя метод Нехи, приведенный ниже, и пока клетка правильно анимирует, как она наносит ущерб другим ячейкам таблицы.То, что я сделал, это подкласс UITableViewCell с пользовательским классом, который содержит экземпляр UIView, который фактически рисует представление, которое я затем добавляю в представление содержимого ячеек таблицы.

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {

if (selected) { 
    [self expandCell];
}
}

-(void)expandCell { 
    self.contentView.frame = CGRectMake(0.0, 0.0, self.contentView.bounds.size.width, 110);
}

Вот все методы делегата таблицы, которые я использую:

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

if (isSearching && indexPath.row == selectedIndex) {

    static NSString *CellIdentifier = @"SearchCell";
    CustomTableCell *cell = (CustomTableCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[CustomTableCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }

    [cell setCustomTitle:[timeZoneNames objectAtIndex:indexPath.row] detail:[timeZoneNames objectAtIndex:indexPath.row]];

    UILabel *theText = [[UILabel alloc] initWithFrame:CGRectMake(10.0, 10.0, cell.contentView.bounds.size.width -20, 22.0)];
    theText.text = @"Title Text";
    [cell.contentView addSubview:theText];


    UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(10.0, 10 + 46.0, cell.contentView.bounds.size.width - 20, 40.0)];
    textField.borderStyle = UITextBorderStyleLine;
    [cell.contentView addSubview:textField];        

    UILabel *testLabel = [[UILabel alloc] initWithFrame:CGRectMake(5.0, 88.0, cell.contentView.bounds.size.width - 20, 22.0)];
    testLabel.text = [NSString stringWithFormat:@"Some text here"];
    [cell.contentView addSubview:testLabel];

    [theText release];
    [textField release];
    [testLabel release];

    return cell;        
} else {

    static NSString *CellIdentifier = @"Cell";
    CustomTableCell *cell = (CustomTableCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[CustomTableCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }

    [cell setCustomTitle:[timeZoneNames objectAtIndex:indexPath.row] detail:[timeZoneNames objectAtIndex:indexPath.row]];
    return cell; 
}


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

[tableView deselectRowAtIndexPath:indexPath animated:NO];   

selectedIndex = indexPath.row;
isSearching = YES;


[tableView beginUpdates];
[tableView endUpdates];

}


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {        
if (isSearching && indexPath.row == selectedIndex) {
    return 110;
}
return rowHeight;           
} 

Теперь кажется, что ячейка расширяется, но фактически не обновляется, поэтому метки и текстовое поле не используются.показано на рисунке.Однако они появляются, когда я прокручиваю ячейку на экране.

Есть идеи?

Answer 1

Apple делает это довольно просто.

Сначала вам нужно сохранить выбранную строку indexPath:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
   self.selectedRowIndex = [indexPath retain];
   [tableView beginUpdates];
   [tableView endUpdates];
}

Я объясню начало / конец обновленной части позже.

Затем, когда выИмея текущий выбранный индекс, вы можете сказать tableView, что он должен дать этой строке больше места.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
   //check if the index actually exists
   if(selectedRowIndex && indexPath.row == selectedRowIndex.row) {
        return 100;
   }
   return 44;
}

Это вернет высоту 100 для выбранной ячейки.

Теперь мы можем вернуться к началу / концу обновлений.Этот блок вызывает перезагрузку всей геометрии tableView.Кроме того, этот блок является анимированным, что в конечном итоге дает увеличение числа строк.

Надеюсь, это было полезно, Павел

Answer 2

Трюк Павла beginUpdates / endUpdates хорош, и я часто им пользуюсь.Но в этом случае вам просто нужно перезагрузить строки, которые меняют состояние, убедиться, что вы правильно перезагрузили их с нужным типом ячейки и вернули правильную новую высоту ячейки.

Вот полная рабочая реализацияя думаю, что вы пытаетесь выполнить:

.h:

#import <UIKit/UIKit.h>

@interface ExpandingTableViewController : UITableViewController 
{

}

@property (retain) NSIndexPath* selectedIndexPath;

@end

.m:

@implementation ExpandingTableViewController
@synthesize selectedIndexPath;

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // Return the number of sections.
    return 1;
}


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    // Return the number of rows in the section.
    return 10;
}

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

    static NSString *CellIdentifier1 = @"Cell1";
    static NSString *CellIdentifier2 = @"Cell2";

    UITableViewCell *cell;

    NSIndexPath* indexPathSelected = self.selectedIndexPath;

    if ( nil == indexPathSelected || [indexPathSelected compare: indexPath] != NSOrderedSame )
    {
        cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier1];
        if (cell == nil) {
            cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier1] autorelease];
        }

        cell.textLabel.text = [NSString stringWithFormat: @"cell %d", indexPath.row];
    }
    else
    {
        cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier2];
        if (cell == nil) {
            cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier2] autorelease];
        }

        cell.textLabel.text = [NSString stringWithFormat: @"cell %d", indexPath.row];
        cell.detailTextLabel.text = [NSString stringWithFormat: @"(expanded!)", indexPath.row];
    }

    return cell;
}

#pragma mark -
#pragma mark Table view delegate

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ( self.selectedIndexPath != nil && [self.selectedIndexPath compare: indexPath] == NSOrderedSame )
    {
        return tableView.rowHeight * 2;
    }

    return tableView.rowHeight;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 
{
    NSArray* toReload = [NSArray arrayWithObjects: indexPath, self.selectedIndexPath, nil];
    self.selectedIndexPath = indexPath;

    [tableView reloadRowsAtIndexPaths: toReload withRowAnimation: UITableViewRowAnimationMiddle];
}


#pragma mark -
#pragma mark Memory management

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

- (void)viewDidUnload {
}

- (void)dealloc {
    [super dealloc];
}

@end

Если вы не хотите перезагружатьячейка (вы хотите сохранить существующую ячейку и просто изменить размер и, вероятно, добавить / удалить некоторые подпредставления), а затем просто выполните трюк beginUpdates / endUpdates в didSelectRowAtIndexPath: и вызовите некоторый метод в вашей ячейке, чтобы вызвать изменение макета.beginUpdates / endUpdates предложит tableView повторно запросить высоту для каждой ячейки, поэтому обязательно верните правильное значение.

Answer 3

Создайте класс, который подклассов UITableviewcell в вашем проекте. Создайте nib этого класса и установите его родителем класс в вашем проекте с таблицей и переопределите его -

(void)setSelected:(BOOL)selected animated:(BOOL)animated 

Напишите методы contractCell () и expandCell () в этом классе и укажите высоту ячеек, которую вы хотите в методе expandCell. Вызовите эти методы соответствующим образом на основе некоторых флагов, установленных для определения того, находится ли ячейка в расширенном или сжатом состоянии. Используйте ваш просмотр таблицы

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

метод обработки выбора ячеек.

Answer 4

создание массива из словаря, который имеет ключ Select_sts, который равен 0 в начале при щелчке его изменения 1 согласно таблице изменений

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{

    customView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 40.0)];
    UILabel * headerLabel = [[UILabel alloc] initWithFrame:CGRectZero];
    headerLabel.backgroundColor = [UIColor clearColor];
    headerLabel.opaque = NO;
    headerLabel.textColor = [UIColor blackColor];
    headerLabel.highlightedTextColor = [UIColor whiteColor];
    headerLabel.font = [UIFont boldSystemFontOfSize:16];
    headerLabel.frame = CGRectMake(5.0, 10.0, 300.0, 20.0);
    headerLabel.text=[NSString stringWithFormat: @"PNR %@",[[record objectAtIndex:section] objectForKey:@"number"]];
    customView.backgroundColor=[UIColor whiteColor];

btn_openClose.tag=section+10000;
    btn_openClose.backgroundColor=[UIColor clearColor];
    //  [btn_openClose setImage:[UIImage imageNamed:@"down_arrow.png"] forState:UIControlStateNormal];
    [btn_openClose addTarget:self action:@selector(collapseExpandButtonTap:) forControlEvents:UIControlEventTouchUpInside];
    [customView addSubview:btn_openClose];

}


- (void) collapseExpandButtonTap:(id) sender{
    int indexNo=[sender tag]-10000;
//    NSLog(@"total_record    %@",[total_record objectAtIndex:indexNo]);
    NSMutableDictionary *mutDictionary = [[total_record objectAtIndex:indexNo] mutableCopy];
   if([[mutDictionary objectForKey:@"Select_sts"] integerValue]==0)
       [mutDictionary setObject:[NSNumber numberWithInt:1] forKey:@"√"];
    else
       [mutDictionary setObject:[NSNumber numberWithInt:0] forKey:@"Select_sts"];

    [total_record replaceObjectAtIndex:indexNo withObject:mutDictionary];

//    [table_view beginUpdates];
//    [table_view reloadData];
//    [table_view endUpdates];

    NSMutableIndexSet *indetsetToUpdate = [[NSMutableIndexSet alloc]init];
    [indetsetToUpdate addIndex:indexNo]; // [indetsetToUpdate addIndex:<#(NSUInteger)#>]
    // You can add multiple indexes(sections) here.
    [table_view reloadSections:indetsetToUpdate withRowAnimation:UITableViewRowAnimationFade];

}

Answer 5

Замените вашу функцию cellForRowAtIndexPath на эту.

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

    if (isSearching && indexPath.row == selectedIndex) {

        static NSString *CellIdentifier = @"SearchCell";
       CustomTableCell *cell = [[[CustomTableCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

        [cell setCustomTitle:[timeZoneNames objectAtIndex:indexPath.row] detail:[timeZoneNames objectAtIndex:indexPath.row]];

        UILabel *theText = [[UILabel alloc] initWithFrame:CGRectMake(10.0,
10.0, cell.contentView.bounds.size.width
-20, 22.0)];
        theText.text = @"Title Text";
        [cell.contentView addSubview:theText];


        UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(10.0, 10 +
46.0, cell.contentView.bounds.size.width - 20, 40.0)];
        textField.borderStyle = UITextBorderStyleLine;
        [cell.contentView addSubview:textField];        

        UILabel *testLabel = [[UILabel alloc] initWithFrame:CGRectMake(5.0,
88.0, cell.contentView.bounds.size.width - 20, 22.0)];
        testLabel.text = [NSString stringWithFormat:@"Some text here"];
        [cell.contentView addSubview:testLabel];

        [theText release];
        [textField release];
        [testLabel release];

        return cell;        
    } else {

        static NSString *CellIdentifier = @"Cell";
        CustomTableCell *cell = [[[CustomTableCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

        [cell setCustomTitle:[timeZoneNames objectAtIndex:indexPath.row] detail:[timeZoneNames objectAtIndex:indexPath.row]];
        return cell; 
    }
    }