24

新しいアプリ用に2pt の黒いセパレーターを作りたいです。UICollectionViewアプリのスクリーンショットを以下に示します。UITableViewカスタムの挿入/削除アニメーション、スクロール、視差効果などがあるため、 を使用できませんでした。

例

4

6 に答える 6

46

私はそれを作る方法を3つのアイデアから始めました：

  • これらのセパレーターをセル内に実装する
  • で黒一色の背景を使用するとminimumLineSpacing、セル間のスペースに背景が表示されます
  • カスタム レイアウトを使用し、このセパレータを装飾として実装します

最初の 2 つの亜種は、イデオロギーの不一致、カスタム アニメーション、およびコレクション以下のコンテンツがあるため、却下されました。また、私はすでにカスタムレイアウトを持っています。

のカスタム サブクラスを使用して手順を説明しますUICollectionViewFlowLayout。

--1--

UICollectionReusableViewカスタムサブクラスを実装します。

@interface FLCollectionSeparator : UICollectionReusableView

@end

@implementation FLCollectionSeparator

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor blackColor];
    }

    return self;
}

- (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {
    self.frame = layoutAttributes.frame;
}

@end

--2--

カスタム装飾を使用するには、layout と言います。また、セル間の行間を空けます。

UICollectionViewFlowLayout* layout = (UICollectionViewFlowLayout*) self.newsCollection.collectionViewLayout;
[layout registerClass:[FLCollectionSeparator class] forDecorationViewOfKind:@"Separator"];
layout.minimumLineSpacing = 2;

--3--

カスタムUICollectionViewFlowLayoutサブクラスではUICollectionViewLayoutAttributes、 から装飾を返す必要がありlayoutAttributesForElementsInRectます。

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    ... collect here layout attributes for cells ... 

    NSMutableArray *decorationAttributes = [NSMutableArray array];
    NSArray *visibleIndexPaths = [self indexPathsOfSeparatorsInRect:rect]; // will implement below

    for (NSIndexPath *indexPath in visibleIndexPaths) {
        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForDecorationViewOfKind:@"Separator" atIndexPath:indexPath];
        [decorationAttributes addObject:attributes];
    }

    return [layoutAttributesArray arrayByAddingObjectsFromArray:decorationAttributes];
}

--4--

可視 rect の場合、可視装飾のインデックス パスを返す必要があります。

- (NSArray*)indexPathsOfSeparatorsInRect:(CGRect)rect {
    NSInteger firstCellIndexToShow = floorf(rect.origin.y / self.itemSize.height);
    NSInteger lastCellIndexToShow = floorf((rect.origin.y + CGRectGetHeight(rect)) / self.itemSize.height);
    NSInteger countOfItems = [self.collectionView.dataSource collectionView:self.collectionView numberOfItemsInSection:0];

    NSMutableArray* indexPaths = [NSMutableArray new];
    for (int i = MAX(firstCellIndexToShow, 0); i <= lastCellIndexToShow; i++) {
        if (i < countOfItems) {
            [indexPaths addObject:[NSIndexPath indexPathForRow:i inSection:0]];
        }
    }
    return indexPaths;
}

--5--

また、実装する必要がありますlayoutAttributesForDecorationViewOfKind。

- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind atIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:decorationViewKind withIndexPath:indexPath];
    CGFloat decorationOffset = (indexPath.row + 1) * self.itemSize.height + indexPath.row * self.minimumLineSpacing;
    layoutAttributes.frame = CGRectMake(0.0, decorationOffset, self.collectionViewContentSize.width, self.minimumLineSpacing);
    layoutAttributes.zIndex = 1000;

    return layoutAttributes;
}

--6--

ときどき、このソリューションが装飾の外観に視覚的な不具合をもたらすことがわかりましたが、これは を実装することで修正されinitialLayoutAttributesForAppearingDecorationElementOfKindました。

- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingDecorationElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)decorationIndexPath {
    UICollectionViewLayoutAttributes *layoutAttributes =  [self layoutAttributesForDecorationViewOfKind:elementKind atIndexPath:decorationIndexPath];
    return layoutAttributes;
}

それで全部です。コードが多すぎるわけではありませんが、正しく行われています。

于 2015-02-24T08:48:39.790 に答える
2

ありがとう、Anton と Werner の両方が私を助けてくれました。あなたの助けを借りて、ドラッグ アンド ドロップ ソリューションを のカテゴリとして作成しましたUICollectionView。結果を共有したいと思いました。

UICollectionView+Separators.h

#import <UIKit/UIKit.h>

@interface UICollectionView (Separators)

@property (nonatomic) BOOL sep_useCellSeparators;
@property (nonatomic, strong) UIColor *sep_separatorColor;

@end

UICollectionView+Separators.m

#import "UICollectionView+Separators.h"
@import ObjectiveC;

#pragma mark -
#pragma mark -

@interface UICollectionViewLayoutAttributes (SEPLayoutAttributes)

@property (nonatomic, strong) UIColor *sep_separatorColor;

@end

@implementation UICollectionViewLayoutAttributes (SEPLayoutAttributes)

- (void)setSep_separatorColor:(UIColor *)sep_separatorColor
{
    objc_setAssociatedObject(self, @selector(sep_separatorColor), sep_separatorColor, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (UIColor *)sep_separatorColor
{
    return objc_getAssociatedObject(self, @selector(sep_separatorColor));
}

@end

#pragma mark -
#pragma mark -

@interface SEPCollectionViewCellSeparatorView : UICollectionReusableView

@end

@implementation SEPCollectionViewCellSeparatorView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self.backgroundColor = [UIColor blackColor];
    }

    return self;
}

- (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes
{
    self.frame = layoutAttributes.frame;

    if (layoutAttributes.sep_separatorColor != nil)
    {
        self.backgroundColor = layoutAttributes.sep_separatorColor;
    }
}

@end

#pragma mark -
#pragma mark -

static NSString *const kCollectionViewCellSeparatorReuseId = @"kCollectionViewCellSeparatorReuseId";

@implementation UICollectionViewFlowLayout (SEPCellSeparators)

#pragma mark - Setters/getters

- (void)setSep_separatorColor:(UIColor *)sep_separatorColor
{
    objc_setAssociatedObject(self, @selector(sep_separatorColor), sep_separatorColor, OBJC_ASSOCIATION_RETAIN_NONATOMIC);

    [self invalidateLayout];
}

- (UIColor *)sep_separatorColor
{
    return objc_getAssociatedObject(self, @selector(sep_separatorColor));
}

- (void)setSep_useCellSeparators:(BOOL)sep_useCellSeparators
{
    if (self.sep_useCellSeparators != sep_useCellSeparators)
    {
        objc_setAssociatedObject(self, @selector(sep_useCellSeparators), @(sep_useCellSeparators), OBJC_ASSOCIATION_RETAIN_NONATOMIC);

        [self registerClass:[SEPCollectionViewCellSeparatorView class] forDecorationViewOfKind:kCollectionViewCellSeparatorReuseId];
        [self invalidateLayout];
    }
}

- (BOOL)sep_useCellSeparators
{
    return [objc_getAssociatedObject(self, @selector(sep_useCellSeparators)) boolValue];
}

#pragma mark - Method Swizzling

+ (void)load
{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        Class class = [self class];

        SEL originalSelector = @selector(layoutAttributesForElementsInRect:);
        SEL swizzledSelector = @selector(swizzle_layoutAttributesForElementsInRect:);

        Method originalMethod = class_getInstanceMethod(class, originalSelector);
        Method swizzledMethod = class_getInstanceMethod(class, swizzledSelector);

        BOOL didAddMethod =
        class_addMethod(class,
                        originalSelector,
                        method_getImplementation(swizzledMethod),
                        method_getTypeEncoding(swizzledMethod));

        if (didAddMethod) {
            class_replaceMethod(class,
                                swizzledSelector,
                                method_getImplementation(originalMethod),
                                method_getTypeEncoding(originalMethod));
        } else {
            method_exchangeImplementations(originalMethod, swizzledMethod);
        }
    });
}

- (NSArray<UICollectionViewLayoutAttributes *> *)swizzle_layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *layoutAttributesArray = [self swizzle_layoutAttributesForElementsInRect:rect];

    if (self.sep_useCellSeparators == NO)
    {
        return layoutAttributesArray;
    }

    CGFloat lineSpacing = self.minimumLineSpacing;

    NSMutableArray *decorationAttributes = [[NSMutableArray alloc] initWithCapacity:layoutAttributesArray.count];

    for (UICollectionViewLayoutAttributes *layoutAttributes in layoutAttributesArray)
    {
        NSIndexPath *indexPath = layoutAttributes.indexPath;

        if (indexPath.item > 0)
        {
            id <UICollectionViewDelegateFlowLayout> delegate = (id <UICollectionViewDelegateFlowLayout>)self.collectionView.delegate;
            if ([delegate respondsToSelector:@selector(collectionView:layout:minimumLineSpacingForSectionAtIndex:)])
            {
                lineSpacing = [delegate collectionView:self.collectionView layout:self minimumLineSpacingForSectionAtIndex:indexPath.section];
            }

            UICollectionViewLayoutAttributes *separatorAttributes = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:kCollectionViewCellSeparatorReuseId withIndexPath:indexPath];
            CGRect cellFrame = layoutAttributes.frame;

            if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal)
            {
                separatorAttributes.frame = CGRectMake(cellFrame.origin.x - lineSpacing, cellFrame.origin.y, lineSpacing, cellFrame.size.height);
            }
            else
            {
                separatorAttributes.frame = CGRectMake(cellFrame.origin.x, cellFrame.origin.y - lineSpacing, cellFrame.size.width, lineSpacing);
            }

            separatorAttributes.zIndex = 1000;

            separatorAttributes.sep_separatorColor = self.sep_separatorColor;

            [decorationAttributes addObject:separatorAttributes];
        }
    }

    return [layoutAttributesArray arrayByAddingObjectsFromArray:decorationAttributes];
}

@end

#pragma mark -
#pragma mark -

@implementation UICollectionView (Separators)

- (UICollectionViewFlowLayout *)sep_flowLayout
{
    if ([self.collectionViewLayout isKindOfClass:[UICollectionViewFlowLayout class]])
    {
        return (UICollectionViewFlowLayout *)self.collectionViewLayout;
    }
    return nil;
}

- (void)setSep_separatorColor:(UIColor *)sep_separatorColor
{
    [self.sep_flowLayout setSep_separatorColor:sep_separatorColor];
}

- (UIColor *)sep_separatorColor
{
    return [self.sep_flowLayout sep_separatorColor];
}

- (void)setSep_useCellSeparators:(BOOL)sep_useCellSeparators
{
    [self.sep_flowLayout setSep_useCellSeparators:sep_useCellSeparators];
}

- (BOOL)sep_useCellSeparators
{
    return [self.sep_flowLayout sep_useCellSeparators];
}

@end

Objective-C ランタイムといくつかのスウィズリングUICollectionViewを使用して、レイアウトが から/継承されている既存のものに数行でセル区切りを追加できますUICollectionViewFlowLayout。

使用例:

#import "UICollectionView+Separators.h"
...
self.collectionView.sep_useCellSeparators = YES;
self.collectionView.sep_separatorColor = [UIColor blackColor];

いくつかのメモ：

  • セパレーターの高さ/幅は、実装されていない場合はcollectionView:layout:minimumLineSpacingForSectionAtIndex:フォールバックを使用して、セクションごとに決定できますminimumLineSpacing
  • 水平または垂直スクロール方向を処理するように構築

それが役に立てば幸い

于 2016-08-15T22:07:47.367 に答える