2012-12-20 87 views
5

我一直在尋找,並沒有完全找到我的答案。iPhone - 創建自定義的UITableViewCell頂部和底部邊框

我用JSON填充動態單元格的UITableView,我試圖隱藏任何額外的單元格。我關閉了IB中的分隔符,當然所有的單元分隔符都消失了。如何在每個tableviewcell的底部和頂部添加一行,以便只有具有信息的單元顯示邊框?我已經導入了Quartz並且一直在使用CALayer,但找不到解決方案。

我在這裏發現了一個類似的問題,但唯一的答案是沒有什麼幫助。

什麼會是一個更好的,不同的方式做到這一點?

這裏是我的cellForRowAtIndexPath和我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; 
} 

回答

24

我也認爲這不是最好的主意,但如果你真的想這樣做,這裏的代碼,將實現你想要的:

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]; 

將這個代碼在tableView:cellForRowAtIndexPath:方法。您UITableView的最終外觀將是這樣的:

Table view with selective borders

考慮到這是不是對性能非常不錯,特別是如果你有很多細胞的。如果數據量較大,請參閱this SO question以獲取有關如何優化圖形的幫助。

+0

謝謝你的幫助。什麼是最好的方法來做到這一點?我希望儘可能快。 – Siriss

+0

更好的方法是使用鏈接問題中的代碼繼承'UITableViewCell'並覆蓋'drawRect:'方法。編輯:代碼,你可以看到更多upvotes答案。 –

+0

我認爲在優化解決方案之前,您至少應該嘗試「更簡單」的方法 - 您可能會發現它足夠快。 –

0

這聽起來像一個次優的解決方案,試圖從空的用線來「辨別」您的有效細胞。優越的方法是在填充表格之前清理數據源。

+0

我不創建它們,但是xcode用空單元格填充空的tableview空間。我只創建numberOfRowsInSection中與我的數據數組中的對象數相等的單元格數。目前有兩個對象和單元格創建,但xcode填補了其餘部分。 – Siriss

+0

我編輯了我的答案。我可能可以幫助你創建線條,但它聽起來像這樣一個壞主意...... – HackyStack

+0

我仍然不明白「清理數據源」的含義。數據源與UITableViewCell上的寄宿生有什麼關係?我只創建2個單元格,xcode自動完成剩下的工作,我想象是因爲它是原型單元格。我願意以任何方式做到這一點 – Siriss

0

使用自定義單元格。 Datasoure(模型)應將信息驅動到自定義單元格中。在可以在每行設置的Custom Cell類中創建一個setter。作爲....


  1. 分配您的自定單元重用標識,

  2. 傳遞,如果該行應顯示爲determing屬性:
    [細胞setCustomLines:型號。屬性];

  3. return the cell;


你將有更多的靈活性來設計CustomCell你想,圖像,線條,色彩或者其他讓你的用戶看到你的細胞之間的差異的方式中的任何方式。

從技術上講,馬可的答案將工作,並在一個簡單的解決方案很好的工作。但是你不能將這個擴展得更遠。

1

只有嘗試此方法tableView:cellForRowAtIndexPath:

[cell.contentView.layer setBorderColor:[UIColor grayColor].CGColor]; 
[cell.contentView.layer setBorderWidth:1.0f]; 
+0

會好,但也設置不是OP想要的左右邊界。 –

0

這不是問題的答案,但原問題的乾淨的解決方案。

添加一個空的UIView作爲UITableView的頁腳。然後空單元格將被隱藏。見this answer