iPhone - Tạo các biên giới trên và dưới UITableViewCell tùy chỉnh

Question

Tôi đã tìm kiếm ở khắp mọi nơi và không tìm thấy câu trả lời của mình.

Tôi điền UITableView với các ô động từ JSON và tôi đang cố gắng ẩn bất kỳ ô bổ sung nào. Tôi tắt các bộ tách trong IB, và tất nhiên tất cả các bộ tách tế bào biến mất. Làm thế nào để thêm một dòng vào dưới cùng và trên cùng của mỗi tableviewcell để chỉ các ô có thông tin hiển thị một đường viền? Tôi đã nhập Quartz và đã chơi với CALayer nhưng không thể tìm được giải pháp.

Tôi đã tìm thấy câu hỏi tương tự ở đây, nhưng câu trả lời duy nhất không hữu ích lắm.

Điều gì sẽ là cách tốt hơn, khác nhau để thực hiện việc này?

Dưới đây là cellForRowAtIndexPath tôi và numberOfRowsInSection tôi:

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

Answer 1

Tôi cũng nghĩ rằng nó không phải là ý tưởng tốt nhất, nhưng nếu bạn thực sự muốn làm điều này, đây là mã mà sẽ đạt được những gì bạn muốn:

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

Đặt mã này trong phương pháp tableView:cellForRowAtIndexPath:. Giao diện cuối cùng của UITableView của bạn sẽ như thế này:

Đi vào tài khoản rằng đây không phải là rất tốt cho hiệu suất, đặc biệt là nếu bạn có rất nhiều tế bào. Nếu bạn có số lượng dữ liệu lớn hơn, hãy tham khảo this SO question để được trợ giúp về cách tối ưu hóa bản vẽ.

Answer 2

Nghe có vẻ như một giải pháp tối ưu phụ để cố gắng "phân biệt" các tế bào hợp lệ của bạn từ những cái trống với dòng. Một cách tiếp cận vượt trội là dọn sạch nguồn dữ liệu trước khi điền bảng với nó.

Answer 3

Sử dụng các ô tùy chỉnh. Datasoure (Models) của bạn sẽ đưa thông tin vào các ô tùy chỉnh. Tạo một setter trong lớp Custom Cell có thể được thiết lập ở mỗi hàng. như trong ....

---

1. Allocation di Tuỳ chỉnh của bạn với Id tái sử dụng,

2. Vượt qua tài sản đó được determing nếu dòng sẽ hiển thị:
   [setCustomLines di động: Model. bất động sản];

3. trả lại ô;

---

Bạn sẽ phải linh hoạt hơn rất nhiều để thiết kế các CustomCell bất kỳ cách nào bạn muốn, hình ảnh, Lines, màu sắc, hoặc những cách khác để cho người dùng của bạn thấy sự khác biệt giữa các tế bào của bạn.

Về mặt kỹ thuật, Câu trả lời của Marco sẽ hoạt động và làm tốt công việc đơn giản. Nhưng bạn sẽ không thể mở rộng điều này ra xa hơn thế này.

Answer 4

Chỉ thử này tại tableView:cellForRowAtIndexPath: phương pháp

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

Answer 5

Đây không phải là câu trả lời cho các câu hỏi, nhưng giải pháp sạch cho các vấn đề gốc.

Thêm UIView trống làm chân trang của UITableView. Sau đó, các ô trống sẽ bị ẩn. Xem this answer.