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

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

实现关键代码原理：

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

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

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

// 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

- (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.youkuaiyun.com/ugg