iPhone - 创建自定义UITableViewCell顶部和底部边框 [英] iPhone - Create custom UITableViewCell top and bottom borders

问题描述

我一直在寻找并且找不到我的答案。

我用JSON中的动态单元格填充UITableView，我试图隐藏任何额外的单元格。我关闭了IB中的分离器，当然所有的细胞分离器都消失了。如何在每个tableviewcell的底部和顶部添加一行，以便只有具有信息的单元格显示边框？我已经导入了Quartz并且一直在玩CALayer但是找不到解决方案。

我在这里发现了一个类似的问题，但唯一的答案并不是很有帮助。 / p>

这样做的更好，不同的方法是什么？

这是我的cellForRowAtIndexPath和我的numberOfRowsInSection：

   - （NSInteger）tableView：（UITableView *）tableView numberOfRowsInSection：（NSInteger）section 
 {
 
 //返回节中的行数。 
 //设置等于数组中的信息
 
 return [_jsonDataArray count]; 
} 
 
  - （UITableViewCell *）tableView：（UITableView *）tableView cellForRowAtIndexPath：（NSIndexPath *）indexPath 
 {
 static NSString * CellIdentifier = @Cell ; 
 UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier：CellIdentifier forIndexPath：indexPath]; 
 
 //在行中创建数据字典
 NSDictionary * jsoninfo = [_ jsonDataArray objectAtIndex：indexPath.row]; 
 
 //从字典中获取所需的密钥并分配给vairables 
 NSString * title = [jsoninfo objectForKey：@title]; 
 NSString * subtitle = [jsoninfo objectForKey：@subtitle]; 
 NSURL * imageURL = [NSURL URLWithString：[jsoninfo objectForKey：@series_image_URL]]; 
 
 //下载图片。 
 NSData * imgData = [NSData dataWithContentsOfURL：imageURL]; 
 UIImage * img = [[UIImage alloc] initWithData：imgData]; 
 
 
 //为自定义单元格设置边框...我需要在我创建的单元格的顶部和底部有一个边框，因此xcode不会自动填充空白区域。 
 
 
 
 //向单元格填写文本
 cell.textLabel.text = title; 
 cell.detailTextLabel.text = subtitle; 
 cell.imageView.image = img; 
 
返回单元格; 
} 
  

解决方案

我也认为这不是最好的想法，但如果你真的想这样做，这里的代码将实现你想要的：

  tableView.separatorStyle = UITableViewCellSeparatorStyleNone ; 
 
 //仅在第一个单元格上绘制顶部边框
 if（indexPath.row == 0）{
 UIView * topLineView = [[UIView alloc] initWithFrame：CGRectMake（0， 0，self.view.bounds.size.width，1）]; 
 topLineView.backgroundColor = [UIColor grayColor]; 
 [cell.contentView addSubview：topLineView]; 
} 
 
 UIView * bottomLineView = [[UIView alloc] initWithFrame：CGRectMake（0，cell.bounds.size.height，self.view.bounds.size.width，1）]; 
 bottomLineView.backgroundColor = [UIColor grayColor]; 
 [cell.contentView addSubview：bottomLineView]; 
  

将此代码放入 tableView：cellForRowAtIndexPath：方法。 UITableView 的最终外观如下：

考虑到这对性能不是很好，特别是如果你有很多细胞。如果您有更多数据，请参阅此SO问题以获取有关如何优化的帮助图纸。

I have been looking everywhere and have not quite found my answer.

I populating a UITableView with dynamic cells from JSON and I am trying to hide any extra cells. I turned off the separators in IB, and of course all the cell separators disappear. How do I add a line to the bottom and top of each tableviewcell so that only the cells that have information show a border? I have imported Quartz and have been playing with CALayer but can't find a solution.

I found a similar question here, but the only answer was not very helpful.

What would be a better, different way of doing this?

Here are my cellForRowAtIndexPath and my numberOfRowsInSection:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{

    // Return the number of rows in the section.
    //set equal to the information in the array

    return [_jsonDataArray count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

    //create Dictionary of data in row
    NSDictionary *jsoninfo = [_jsonDataArray objectAtIndex:indexPath.row];

    //get required keys from dictionary and assign to vairables
    NSString *title = [jsoninfo objectForKey:@"title"];
    NSString *subtitle = [jsoninfo objectForKey:@"subtitle"];
    NSURL *imageURL = [NSURL URLWithString:[jsoninfo objectForKey:@"series_image_URL"]];

    //download the images.
    NSData *imgData = [NSData dataWithContentsOfURL:imageURL];
    UIImage *img = [[UIImage alloc] initWithData:imgData];


    //set boarder for custom cells... I need to have a border on the top and bottom of the cells I am creating so xcode does not autofill the empty space.



    //fill in text to cells
    cell.textLabel.text = title;
    cell.detailTextLabel.text = subtitle;
    cell.imageView.image = img;

    return cell;
}

解决方案

I also think it's not the best idea, but if you really want to do this, here's code that will achieve what you want:

tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

// Draw top border only on first cell
if (indexPath.row == 0) {
    UIView *topLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 1)];
    topLineView.backgroundColor = [UIColor grayColor];
    [cell.contentView addSubview:topLineView];
}

UIView *bottomLineView = [[UIView alloc] initWithFrame:CGRectMake(0, cell.bounds.size.height, self.view.bounds.size.width, 1)];
bottomLineView.backgroundColor = [UIColor grayColor];
[cell.contentView addSubview:bottomLineView];

Put this code in the tableView:cellForRowAtIndexPath: method. The final look of your UITableView will be like this:

Take into account that this is not very good for performance, especially if you have a lot of cells. If you have a bigger amount of data, refer to this SO question for help on how to optimize the drawing.

这篇关于iPhone - 创建自定义UITableViewCell顶部和底部边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！