自定义UITableViewCell实现ibooks类似的图书列表形式

前几天实现iBooks类似的图书列表形式，share一下，效果如下。

实现关键代码原理：

1：创建UIt=TableView对象时，设置背景透明，分隔条透明

[plain] view plaincopyprint?

1. // 设置table的分割符透明 
2. tbView.separatorColor = [UIColor clearColor]; 
3. // 设置table背景透明 
4. tbView.backgroundColor = [UIColor clearColor];

// 设置table的分割符透明tbView.separatorColor = [UIColor clearColor];// 设置table背景透明tbView.backgroundColor = [UIColor clearColor];

2：在tableView:cellForRowAtIndexPath中绘制cell内容，展示图书。这里一个技巧是自定义一个UIButton，覆盖在图书图片上，相应点击事件。其中使用button的tag来保存table数组中的所在图书的下标。

[plain] view plaincopyprint?

1. // Customize the appearance of table view cells. 
2. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
3.      
4.     static NSString *identifier = @"etuancell"; 
5.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier]; 
6.     if (!cell) { 
7.         //cell = [[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:identifier]; 
8.         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier]; 
9.          
10.         [cell setAccessoryType:UITableViewCellAccessoryNone]; 
11.         // 取消选择模式 
12.         cell.selectionStyle = UITableViewCellSelectionStyleNone; 
13.     }else{ 
14.         // 删除cell中的子对象,刷新覆盖问题。 
15.         while ([cell.contentView.subviews lastObject] != nil) { 
16.             [(UIView*)[cell.contentView.subviews lastObject] removeFromSuperview]; 
17.         } 
18.     } 
19.     // 定义图书大小 
20. #define kCell_Items_Width 156 
21. #define kCell_Items_Height 230 
22.     // 设置图片大小206*306 
23.     // 图片与图片之间距离为50 
24.     // 每行3，4本图书 
25.     CGFloat x = 80; 
26.     CGFloat y = 40; 
27.      
28.     NSInteger nowNum = kNum; 
29.     if (bLandScape) { 
30.         nowNum += 1; 
31.     } 
32.      
33.     NSInteger row = indexPath.row * nowNum; 
34.     // 循环绘制出图书图片     
35.     for (int i = 0; i<nowNum; ++i) { 
36.         // 跳出循环 
37.         if (row >= [data count]) { 
38.             break; 
39.         } 
40.          
41.         // 展示图片 
42.         UIImageView *bookView = [[UIImageView alloc] initWithFrame:CGRectMake(x, y, kCell_Items_Width, kCell_Items_Height)]; 
43.         NSString *bookName = [[NSString alloc] initWithFormat:@"book%d.png",row]; 
44.         bookView.image = [UIImage imageNamed:bookName]; 
45.         [cell.contentView addSubview:bookView]; 
46.          
47.         // 添加按钮 
48.         UIButton *bookButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
49.         bookButton.frame = CGRectMake(x, y, kCell_Items_Width, kCell_Items_Height); 
50.         // 这里采用一个技巧，使用button的tag，记录tabledata中的序号 
51.         bookButton.tag = row; 
52.         [bookButton addTarget:self action:@selector(testButton:) forControlEvents:UIControlEventTouchUpInside]; 
53.          
54.         [cell.contentView addSubview:bookButton]; 
55.          
56.         x += (80+kCell_Items_Width); 
57.         // row+1 
58.         ++row; 
59.     } 
60.     return cell; 
61. } 

// Customize the appearance of table view cells.- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *identifier = @"etuancell";UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];if (!cell) {//cell = [[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:identifier]; cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier]; [cell setAccessoryType:UITableViewCellAccessoryNone]; // 取消选择模式 cell.selectionStyle = UITableViewCellSelectionStyleNone; }else{ // 删除cell中的子对象,刷新覆盖问题。 while ([cell.contentView.subviews lastObject] != nil) { [(UIView*)[cell.contentView.subviews lastObject] removeFromSuperview]; } } // 定义图书大小#define kCell_Items_Width 156#define kCell_Items_Height 230 // 设置图片大小206*306 // 图片与图片之间距离为50 // 每行3，4本图书 CGFloat x = 80; CGFloat y = 40; NSInteger nowNum = kNum; if (bLandScape) { nowNum += 1; } NSInteger row = indexPath.row * nowNum; // 循环绘制出图书图片 for (int i = 0; i<nowNum; ++i) { // 跳出循环 if (row >= [data count]) { break; } // 展示图片 UIImageView *bookView = [[UIImageView alloc] initWithFrame:CGRectMake(x, y, kCell_Items_Width, kCell_Items_Height)]; NSString *bookName = [[NSString alloc] initWithFormat:@"book%d.png",row]; bookView.image = [UIImage imageNamed:bookName]; [cell.contentView addSubview:bookView]; // 添加按钮 UIButton *bookButton = [UIButton buttonWithType:UIButtonTypeCustom]; bookButton.frame = CGRectMake(x, y, kCell_Items_Width, kCell_Items_Height); // 这里采用一个技巧，使用button的tag，记录tabledata中的序号 bookButton.tag = row; [bookButton addTarget:self action:@selector(testButton:) forControlEvents:UIControlEventTouchUpInside]; [cell.contentView addSubview:bookButton]; x += (80+kCell_Items_Width); // row+1 ++row; }return cell;}

3：在tableView:numberOfRowInSection中，动态返回tableview的row数量，其中kNum为3

[plain] view plaincopyprint?

1. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 
2.     // Return the number of rows in the section. 
3.     NSInteger count = ([data count]+kNum-1)/kNum; 
4.     if (bLandScape) { 
5.         count = ([data count]+kNum)/(kNum+1); 
6.     } 
7.     return count; 
8. } 

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // Return the number of rows in the section. NSInteger count = ([data count]+kNum-1)/kNum; if (bLandScape) { count = ([data count]+kNum)/(kNum+1); } return count;}

4：更多效果参考



源代码下载，点击这里 。如果您有任何问题或者疑问可以随时联系我。转发请注明http://blog.csdn.net/ugg

http://blog.csdn.net/ugg/article/details/7237811