如何在表格视图单元格的背景中设置图像动画

如何以编程方式在表格视图单元格的背景中设置图像? 我可以动画吗? 我可以为选定的单元格设置动画吗?

注意

我使用了Answer your own questionfunction来回答这个问题。 如果您有其他方法,请务必添加答案。 🙂

动画单元格的GIF

要以编程方式将背景图像添加到表视图单元格(自定义和默认),最简单的方法是在- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法中完成。

要设置背景图像,需要创建UIImageView引用,然后将该引用分配给图像。 然后为UIImageView引用分配单元格。 这在以下代码中完成,以在tableview中的所有单元格中具有默认图像:

 //have normal background image //Create a UIImageView the size of your tableview row. My row (cell) size is 55 and I want it to expand the full length of the window (iPhone). //You can create an icon look if you like, just play with the sizing. UIImageView * cellBackgrounds = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 55)]; //Next create a reference to the image UIImage * regularImage = [UIImage imageNamed:@"Image"]; //assign the image to the UIImageView cellBackgrounds.image = regularImage; //set the ##background## of the cell //cell has already been defined when you create the UITableViewCell * cell = ... code [cell setBackgroundView: cellBackgrounds]; 

为了给单元设置动画,我们使用相同的方法,除了这次我们引用一组图像。

首先,我们向项目添加一个文件,其中包含我们将要显示为动画的所有图像。 要做到这一点,只需在Xcode打开时将文件拖到Xcode项目中,然后将其放在包含所有.h和.m文件的左侧面板中。 确保以数字顺序命名所有图像 – image1,image2,image3等 – 之前。

然后我们使用以下代码。 请注意唯一的变化是UIImage代码:

 //have animated background UIImageView * cellBackgrounds = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 55)]; //Change UIImage imageNamed to UIImage animatedImageNamed and refer to just the name of your images, not the number //set the duration (which is in seconds) to whatever you like, testing to your desired flow UIImage * animatedImages = [UIImage animatedImageNamed:@"image" duration:3.6]; cellBackgrounds.image = animatedImages; [cell setBackgroundView: cellBackgrounds]; 

现在您有一个动画表格视图单元格背景。

如果您只想在此处设置选定的行动画,请执行以下操作:

 //Create a new reference to an index path //I am referencing to the top cell in the first section NSIndexPath *firstCell = [NSIndexPath indexPathForRow: 0 inSection:0]; //Create a new reference to the UITableViewCell UITableViewCell *topCell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier forIndexPath:firstCell]; UIImageView * cellBackgrounds = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 55)]; UIImage * animatedImages = [UIImage animatedImageNamed:@"image" duration:3.6]; cellBackgrounds.image = animatedImages; [cell setBackgroundView: cellBackgrounds]; 

这个新代码将阻止您尝试显示的文本正确显示,因此将其添加到此代码块的底部以确保文本正确显示

 topCell.title.text = your reference to Strings to be displayed 

请享用。

 -(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{ //1. Setup the CATransform3D structure CATransform3D rotation; rotation = CATransform3DMakeRotation( (90.0*M_PI)/180, 0.0, 0.7, 0.4); rotation.m34 = 1.0/ -600; //2. Define the initial state (Before the animation) cell.layer.shadowColor = [[UIColor blackColor]CGColor]; cell.layer.shadowOffset = CGSizeMake(10, 10); cell.alpha = 0; cell.layer.transform = rotation; cell.layer.anchorPoint = CGPointMake(0, 0.5); //3. Define the final state (After the animation) and commit the animation [UIView beginAnimations:@"rotation" context:NULL]; [UIView setAnimationDuration:0.8]; cell.layer.transform = CATransform3DIdentity; cell.alpha = 1; cell.layer.shadowOffset = CGSizeMake(0, 0); [UIView commitAnimations]; }