UICollectionView流佈局中的單元格邊框

我正在使用UICollectionView佈置一組由第一個字母開頭的單元格。每個單元應該有一個非常薄的邊框，並且節標題應該有上下邊框。這是我目前的原型：UICollectionView流佈局中的單元格邊框

Grid of large equally-sized cells, four to a row, with slim light gray headings between sections. Narrow gray borders show the edges of the cells and dividers.

我實現當前外觀上採用了下列規則：

行程的權利，每個單元格的下邊緣。
描邊每個部分標題的底部邊緣。

這是非常接近我想要的東西，但有兩個缺陷：

如果章節標題前行不充分，然後沿航向的頂部邊框停止短屏幕的右邊緣。
在此屏幕截圖中不可見，但如果一行爲已滿，則該行中最後一個單元格的右邊框仍會繪製，這對於屏幕邊緣看起來有點奇怪。

我最好的解決辦法是以某種方式告訴每個單元格，如果它在一個節的最後一行或一行中的最後一個單元格;那麼單元格會關閉有問題的邊界，部分標題會繪製頂部邊框以及底部，並且所有內容都將變得渾濁。不過，我不知道如何實現這一點。

任何想法如何管理，或另一種方式來獲得我的目光？我目前正在使用UICollectionViewFlowLayout。

來源

2013-07-11 Brent Royal-Gordon

我結束了繼承UICollectionViewFlowLayout和應用一些啓發式的流佈局算過之後每個單元的屬性：

如果center.y等於在部分中的最後一個項目的center.y，所述細胞是在該部分的最後一行。
如果CGRectGetMaxY(frame)等於CGRectGetMaxY(self.collectionView.bounds)，那麼該單元就是集合視圖的右邊緣。

我然後存儲這些計算結果中的UICollectionViewLayoutAttributes一個子類，並寫了UICollectionViewCell子類，其-applyLayoutAttributes:方法將調整邊框的背景視圖平局基礎上，附加屬性。

我已經把整個爛攤子放進了fairly enormous gist，所以你可以看到我做了什麼。快樂的黑客攻擊。

來源

2013-07-14 03:34:58

我的最好的辦法，以解決這個問題是以某種方式告訴每一個細胞，如果它是一節或一排最後一個單元格的最後一排;那麼單元格會關閉有問題的邊界，部分標題會繪製頂部邊框以及底部，並且所有內容都將變得渾濁。不過，我不知道如何實現這一點。

你所描述的或多或少是我在類似場景中所做的。我添加了一個邊界屬性，我的手機：

typedef NS_OPTIONS(NSInteger, TLGridBorder) { 
    TLGridBorderNone = 0, 
    TLGridBorderTop = 1 << 0, 
    TLGridBorderRight = 1 << 1, 
    TLGridBorderBottom = 1 << 2, 
    TLGridBorderLeft = 1 << 3, 
    TLGridBorderAll = TLGridBorderTop | TLGridBorderRight | TLGridBorderBottom | TLGridBorderLeft, 
}; 

@interface TLGridCellView : UIView 
@property (nonatomic) TLGridBorder border; 
@end

然後，我將邊框設置爲我的視圖控制器的電池配置：

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
    TLGridCellView *cell = ...; 

    if (indexPath.item == self collectionView:collectionView numberOfItemsInSection:indexPath.section - 1) { 
     cell.border = TLGridBorderLeft; 
    } else { 
     cell.border = TLGridBorderLeft | TLGridBorderRight; 
    } 

    return cell; 
}

來源

2013-07-12 15:27:45

我最終做了一件很喜歡這樣 - 我只要我把它變成一個要點在這裏發表一個答案，所以我可以分享。 –

我用簡單的方法解決這個問題。我沒有添加寄宿生到單元格，而是添加了一個寄宿生標籤到單元格中。對於第一列，標籤的框架與單元格相同。對於另一個標籤，我將x座標設置爲-0.5以使它們的邊框重疊。希望能幫助到你。

下面是代碼：

- (UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { 
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath]; 

    // Then use it 
    UILabel *label = nil; 
    if (cell.contentView.subviews.count > 0) { 
     label = cell.contentView.subviews[0]; 
    } else { 
     label = [[UILabel alloc] init]; 
    } 
    label.text = @"北京"; 

    [label setTextAlignment:NSTextAlignmentCenter]; 
    [label setFont:[UIFont systemFontOfSize:14]]; 
    [label setCenter:cell.contentView.center]; 


    CGRect frame = label.frame; 
    if (indexPath.row%4 == 0) { 
     frame.origin.x = 0; 
    } else { 
     frame.origin.x = -0.5; 
    } 

    frame.origin.y = 0; 
    frame.size.width = self.collectionView.frame.size.width/4; 
    frame.size.height = self.collectionView.frame.size.height/9; 

    [label setFrame:frame]; 

    if (cell.contentView.subviews.count == 0) { 
     [[cell contentView] addSubview:label]; 
    } 

    label.layer.borderWidth = 0.5; 
    label.layer.borderColor = [[UIColor lightGrayColor] CGColor]; 


    cell.backgroundColor = [UIColor whiteColor]; 

    return cell; 
}

來源

2015-09-04 11:56:03 wgr

UICollectionView流佈局中的單元格邊框

回答

相關問題