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

Question

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

注意

我已经使用Answer your own question 功能来回答这个问题。如果您有其他方法，请务必添加答案。 :-)

Answer 1

要以编程方式将背景图像添加到表格视图单元格（自定义和默认），最简单的方法是在 - (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

享受吧。

Answer 2

-(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];

}