4

UICollectionView を使用して、タイトルの最初の文字で区切られた一連のセルをレイアウトしています。各セルには非常に細い境界線があり、セクション ヘッダーには上下に境界線が必要です。これが私の現在のプロトタイプです：

同じサイズの大きなセルが 4 行に並んだグリッドで、セクション間に細いライト グレーの見出しがあります。 狭い灰色の境界線は、セルと仕切りの端を示しています。

次のルールで現在の外観を実現します。

  1. 各セルの右端と下端をストロークします。
  2. 各セクションの見出しの下端をなでます。

これは私が望むものに非常に近いですが、2 つの欠陥があります。

  1. セクション見出しの前の行がいっぱいでない場合、見出しの上部に沿った境界線は画面の右端の手前で止まります。
  2. このスクリーンショットには表示されていませんが、行がいっぱいの場合、行の最後のセルの右側の境界線がまだ描画されているため、画面の端に対して少し奇妙に見えます.

これを修正するための私の最善のアイデアは、各セルがセクションの最後の行にあるか、行の最後のセルにあるかをどうにかして伝えることです。次に、セルは問題のある境界線をオフにし、セクションの見出しは上部の境界線と下部の境界線を描画し、すべてがハンキードーリーになります。しかし、それを達成する方法はわかりません。

それを管理する方法、または私が目指している外観を得る別の方法について何か考えはありますか? 現在、UICollectionViewFlowLayout を使用しています。

4

3 に答える 3

4

UICollectionViewFlowLayoutフロー レイアウトが各セルの属性を計算した後、サブクラス化していくつかのヒューリスティックを適用することになりました。

  1. center.yがセクションの最後の項目と等しい場合center.y、セルはセクションの最後の行にあります。
  2. CGRectGetMaxY(frame)が に等しい場合CGRectGetMaxY(self.collectionView.bounds)、セルは再びコレクション ビューの右端になります。

次に、これらの計算結果を のサブクラスに格納し、追加のプロパティに基づいて背景ビューが描画する境界線を調整するメソッドをUICollectionViewLayoutAttributes持つUICollectionViewCellサブクラスを作成しました。-applyLayoutAttributes:

私がやったことを正確に見ることができるように、私は全体の混乱をかなり巨大な要旨に入れました。ハッピーハッキング。

于 2013-07-14T03:34:58.123 に答える
3

これを修正するための私の最善のアイデアは、各セルがセクションの最後の行にあるか、行の最後のセルにあるかをどうにかして伝えることです。次に、セルは問題のある境界線をオフにし、セクションの見出しは上部の境界線と下部の境界線を描画し、すべてがハンキードーリーになります。しかし、それを達成する方法はわかりません。

あなたが説明することは、多かれ少なかれ私が同様のシナリオで行ったことです。セルにボーダー プロパティを追加しました。

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

次に、View Controller のセル構成で境界線を設定します。

- (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-12T15:27:45.870 に答える