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

时间:2014-10-19 07:40:26

标签: ios iphone ipad uitableview

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

注意

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

2 个答案:

答案 0 :(得分:1)

GIF of Animated cell

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

享受。

答案 1 :(得分:0)

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

}