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

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

实现关键代码原理：

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

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

// 设置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;
}

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

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