web-dev-qa-db-ja.com

選択すると、UITableViewCellで高さの変化をアニメーション化できますか？

IPhoneアプリでUITableViewを使用していますが、グループに属する人々のリストがあります。ユーザーが特定の人をクリックすると（セルを選択する）、セルの高さが大きくなり、その人のプロパティを編集するためのいくつかのUIコントロールが表示されます。

これは可能ですか？

ioscocoa-touchuitableview
389
Ted

私が取り組んでいたUITableViewへの副作用として、これに対する本当に簡単な解決策を見つけました.....

通常、tableView: heightForRowAtIndexPath:を使用して元の高さを報告する変数にセルの高さを保存し、高さの変更をアニメーション化する場合は、変数の値を変更してこれを呼び出します...

[tableView beginUpdates];
[tableView endUpdates];

完全なリロードは行われませんが、UITableViewがセルを再描画し、セルの新しい高さの値を取得する必要があることを知るには十分です。それはあなたのために変化をアニメートします。甘い。

私は私のブログでより詳細な説明と完全なコードサンプルを持っています... Animate UITableView Cell Height Change

869
Simon Lee

サイモン・リーの答えが好きです。実際にその方法を試したわけではありませんが、リスト内のすべてのセルのサイズが変更されるようです。タップされたセルだけの変更を期待していました。サイモンのようにやったけど、少し違いがあった。これにより、セルが選択されたときにセルの外観が変更されます。そしてアニメートします。それを行う別の方法。

現在選択されているセルインデックスの値を保持するintを作成します。

int currentSelection;

次に：

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    int row = [indexPath row];
    selectedNumber = row;
    [tableView beginUpdates];
    [tableView endUpdates];
}

次に：

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    if ([indexPath row] == currentSelection) {
        return  80;
    }
    else return 40;


}

TableView：cellForRowAtIndexPath：で同様の変更を行って、セルのタイプを変更したり、セルのxibファイルをロードしたりすることもできます。

このように、currentSelectionは0から始まります。リストの最初のセル（インデックス0）がデフォルトで選択されているようにしたくない場合は、調整する必要があります。

60
Mark A.

選択したセルを追跡するプロパティを追加します

@property (nonatomic) int currentSelection;

viewDidLoadが「通常の」位置で開始することを確認するために、UITableViewのセンチネル値に設定します。

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    //sentinel
    self.currentSelection = -1;
}

heightForRowAtIndexPathでは、選択したセルの高さを設定できます

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    int rowHeight;
    if ([indexPath row] == self.currentSelection) {
        rowHeight = self.newCellHeight;
    } else rowHeight = 57.0f;
    return rowHeight;
}

didSelectRowAtIndexPathでは、必要に応じて現在の選択を保存し、動的な高さを保存します

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
        // do things with your cell here

        // set selection
        self.currentSelection = indexPath.row;
        // save height for full text label
        self.newCellHeight = cell.titleLbl.frame.size.height + cell.descriptionLbl.frame.size.height + 10;

        // animate
        [tableView beginUpdates];
        [tableView endUpdates];
    }
}

didDeselectRowAtIndexPathで、選択インデックスをセンチネル値に戻し、セルをアニメーション化して通常の形式に戻します

- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath {       
        // do things with your cell here

        // sentinel
        self.currentSelection = -1;

        // animate
        [tableView beginUpdates];
        [tableView endUpdates];
    }
}
22
Joy

reloadDataは、アニメーションがないので良くありません...

これは私が現在試していることです：

NSArray* paths = [NSArray arrayWithObject:[NSIndexPath indexPathForRow:0 inSection:0]];
[self.tableView beginUpdates];
[self.tableView insertRowsAtIndexPaths:paths withRowAnimation:UITableViewRowAnimationFade];
[self.tableView deleteRowsAtIndexPaths:paths withRowAnimation:UITableViewRowAnimationFade];
[self.tableView endUpdates];

それはほとんど正常に動作します。ほぼ。セルの高さを増やしていますが、テーブルビューのスクロール位置が保持されているかのように、セルが置き換えられるとテーブルビューに少し「しゃっくり」が発生することがあります。新しいセル（最初のセルテーブル内で）オフセットが高すぎる状態になり、スクロールビューがバウンスして位置を変更します。

14
lawrence

連続してbeginUpdates/endUpdatesを呼び出すことに関するこれらすべてが何なのかわかりません。ただ-[UITableView reloadRowsAtIndexPaths:withAnimation:]を使用できます。 これはプロジェクト例です 。

11
axiixc

reloadRowsAtIndexPathsで解決しました。

選択したセルのindexPathをdidSelectRowAtIndexPathに保存し、最後にreloadRowsAtIndexPathsを呼び出します（リロードする要素のリストにNSMutableArrayを送信できます）。

heightForRowAtIndexPathでは、indexPathがexpandIndexPathセルのリストにあるかどうかを確認し、高さを送信できます。

この基本的な例を確認できます。 https://github.com/ferminhg/iOS-Examples/tree/master/iOS-UITableView-Cell-Height-Change/celdascambiadetam これは簡単なソリューションです。

私はあなたを助けるなら一種のコードを追加します

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath: (NSIndexPath*)indexPath
{
    if ([indexPath isEqual:_expandIndexPath])
        return 80;

    return 40;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Celda";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    [cell.textLabel setText:@"wopwop"];

    return cell;
}

#pragma mark -
#pragma mark Tableview Delegate Methods

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSMutableArray *modifiedRows = [NSMutableArray array];
    // Deselect cell
    [tableView deselectRowAtIndexPath:indexPath animated:TRUE];
    _expandIndexPath = indexPath;
    [modifiedRows addObject:indexPath];

    // This will animate updating the row sizes
    [tableView reloadRowsAtIndexPaths:modifiedRows withRowAnimation:UITableViewRowAnimationAutomatic];
}
10
fermin

beginUpdates()/endUpdates()の代わりに、推奨される呼び出しは次のとおりです。

tableView.performBatchUpdates(nil, completion: nil)

Appleは、beginUpdates/endUpdatesについて、「可能な限り、このメソッドの代わりにperformBatchUpdates（_：completion :)メソッドを使用します。」

参照： https://developer.Apple.com/documentation/uikit/uitableview/1614908-beginupdates

4
raf

これは、インデックスごとの行を展開するためのものです。

@property (nonatomic) NSIndexPath *expandIndexPath;
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath
{
if ([indexPath isEqual:self.expandedIndexPath])
    return 100;

return 44;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
NSMutableArray *modifiedRows = [NSMutableArray array];
if ([indexPath isEqual:self.expandIndexPath]) {
    [modifiedRows addObject:self.expandIndexPath];
    self.expandIndexPath = nil;
} else {
    if (self.expandedIndexPath)
        [modifiedRows addObject:self.expandIndexPath];

    self.expandIndexPath = indexPath;
    [modifiedRows addObject:indexPath];
}

// This will animate updating the row sizes
[tableView reloadRowsAtIndexPaths:modifiedRows withRowAnimation:UITableViewRowAnimationAutomatic];

// Preserve the deselection animation (if desired)
[tableView selectRowAtIndexPath:indexPath animated:NO scrollPosition:UITableViewScrollPositionNone];
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ViewControllerCellReuseIdentifier];
    cell.textLabel.text = [NSString stringWithFormat:@"I'm cell %ld:%ld", (long)indexPath.section, (long)indexPath.row];

return cell;
}
3
Nagarjun
BOOL flag;

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    flag = !flag;
    [tableView beginUpdates];
    [tableView reloadRowsAtIndexPaths:@[indexPath] 
                     withRowAnimation:UITableViewRowAnimationAutomatic];
    [tableView endUpdates];
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return YES == flag ? 20 : 40;
}
3
Roman Solodyashkin

カスタムセルに「詳細」を追加するために検索する私のような人へのメモです。

[tableView beginUpdates];
[tableView endUpdates];

すばらしい仕事をしましたが、セルビューを「トリミング」することを忘れないでください。 Interface Builderから、セルを選択->コンテンツビュー->プロパティインスペクターから「Clip subview」を選択

2
Anthony Marchenko

Swift 3のSimons回答の短縮版を示します。また、セルの選択の切り替えも可能です。

var cellIsSelected: IndexPath?


  func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    cellIsSelected = cellIsSelected == indexPath ? nil : indexPath
    tableView.beginUpdates()
    tableView.endUpdates()
  }


  func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    if cellIsSelected == indexPath {
      return 250
    }
    return 65
  }
1
aBikis

サイモンリーの回答の迅速なバージョン。

// MARK: - Variables 
  var isCcBccSelected = false // To toggle Bcc.



    // MARK: UITableViewDelegate
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

    // Hide the Bcc Text Field , until CC gets focused in didSelectRowAtIndexPath()
    if self.cellTypes[indexPath.row] == CellType.Bcc {
        if (isCcBccSelected) {
            return 44
        } else {
            return 0
        }
    }

    return 44.0
}

その後、didSelectRowAtIndexPath（）で

  func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    self.tableView.deselectRowAtIndexPath(indexPath, animated: true)

    // To Get the Focus of CC, so that we can expand Bcc
    if self.cellTypes[indexPath.row] == CellType.Cc {

        if let cell = tableView.cellForRowAtIndexPath(indexPath) as? RecipientTableViewCell {

            if cell.tag == 1 {
                cell.recipientTypeLabel.text = "Cc:"
                cell.recipientTextField.userInteractionEnabled = true
                cell.recipientTextField.becomeFirstResponder()

                isCcBccSelected = true

                tableView.beginUpdates()
                tableView.endUpdates()
            }
        }
    }
}
1
ioopl

はい、可能です。

UITableViewにはデリゲートメソッドdidSelectRowAtIndexPathがあります

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [UIView animateWithDuration:.6
                          delay:0
         usingSpringWithDamping:UIViewAnimationOptionBeginFromCurrentState
          initialSpringVelocity:0
                        options:UIViewAnimationOptionBeginFromCurrentState animations:^{

                            cellindex = [NSIndexPath indexPathForRow:indexPath.row inSection:indexPath.section];
                            NSArray* indexArray = [NSArray arrayWithObjects:indexPath, nil];
                            [violatedTableView beginUpdates];
                            [violatedTableView reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationAutomatic];
                            [violatedTableView endUpdates];
                        }
                     completion:^(BOOL finished) {
    }];
}

しかし、あなたの場合、ユーザーがスクロールして別のセルを選択した場合、現在選択されているセルを縮小および展開するには、最後に選択されたセルを持つ必要がありますreloadRowsAtIndexPaths:はheightForRowAtIndexPath:を呼び出すので、それに応じて処理します。

1
Koushik

入力-

tableView.beginUpdates（）tableView.endUpdates（）これらの関数は呼び出しません

func tableView（_ tableView：UITableView、cellForRowAt indexPath：IndexPath）-> UITableViewCell {}

しかし、そうする場合、tableView.reloadRows（at：[selectedIndexPath！as IndexPath]、with：.none）

func tableView（_ tableView：UITableView、cellForRowAt indexPath：IndexPath）-> UITableViewCell {}この関数を呼び出します。

0
sRoy

@Joyのすばらしい回答を使用しましたが、ios 8.4およびXCode 7.1.1で完全に機能しました。

セルをトグル可能にする場合は、-tableViewDidSelectを次のように変更しました。

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
//This is the bit I changed, so that if tapped once on the cell, 
//cell is expanded. If tapped again on the same cell, 
//cell is collapsed. 
    if (self.currentSelection==indexPath.row) {
        self.currentSelection = -1;
    }else{
        self.currentSelection = indexPath.row;
    }
        // animate
        [tableView beginUpdates];
        [tableView endUpdates];

}

これがあなたのお役に立てば幸いです。

0
Septronic

IOS 7以降でこの方法を確認してください。

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return UITableViewAutomaticDimension;
}

これはiOS 8で改善されました。テーブルビュー自体のプロパティとして設定できます。

0
iGo

Swift 4以降

以下のコードをTableViewのdidselect行デリゲートメソッドに追加します

tableView.beginUpdates()
tableView.setNeedsLayout()
tableView.endUpdates()
0
midhun p

Simon Leeの答え ：の迅速なバージョン

tableView.beginUpdates()
tableView.endUpdates()

高さのプロパティを変更する必要があることに留意してくださいBEFOREendUpdates()。

0
Tamás Sengel

以下に、カスタムUITableViewサブクラスのコードを示します。このサブクラスは、テーブルセルでUITextViewを展開し、リロードせずにキーボードフォーカスを失います。

- (void)textViewDidChange:(UITextView *)textView {
    CGFloat textHeight = [textView sizeThatFits:CGSizeMake(self.width, MAXFLOAT)].height;
    // Check, if text height changed
    if (self.previousTextHeight != textHeight && self.previousTextHeight > 0) {
        [self beginUpdates];

        // Calculate difference in height
        CGFloat difference = textHeight - self.previousTextHeight;

        // Update currently editing cell's height
        CGRect editingCellFrame = self.editingCell.frame;
        editingCellFrame.size.height += difference;
        self.editingCell.frame = editingCellFrame;

        // Update UITableView contentSize
        self.contentSize = CGSizeMake(self.contentSize.width, self.contentSize.height + difference);

        // Scroll to bottom if cell is at the end of the table
        if (self.editingNoteInEndOfTable) {
            self.contentOffset = CGPointMake(self.contentOffset.x, self.contentOffset.y + difference);
        } else {
            // Update all next to editing cells
            NSInteger editingCellIndex = [self.visibleCells indexOfObject:self.editingCell];
            for (NSInteger i = editingCellIndex; i < self.visibleCells.count; i++) {
                UITableViewCell *cell = self.visibleCells[i];
                CGRect cellFrame = cell.frame;
                cellFrame.Origin.y += difference;
                cell.frame = cellFrame;
            }
        }
        [self endUpdates];
    }
    self.previousTextHeight = textHeight;
}
0
Vitaliy Gozhenko