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

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

自定义UITableViewCell实现ibooks类似的图书列表形式_第1张图片


实现关键代码原理:

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

[plain] view plain copy print ?
  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 plain copy print ?
  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; 
// 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 plain copy print ?
  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; 
- (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:更多效果参考
自定义UITableViewCell实现ibooks类似的图书列表形式_第2张图片自定义UITableViewCell实现ibooks类似的图书列表形式_第3张图片


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


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

你可能感兴趣的:(table,action,UIView,button)