Установить границу в UICollectionView

Это мой первый раз, когда я хочу создать UICollectionView. Вот как я хочу выглядеть так:

Я прочитал несколько руководств, и я знаю, как это работает. Дело в том, что вы видите на изображении, ячейки UICollection имеют границу сверху, снизу, слева и справа. Знаете ли вы, как установить такой вид в виде коллекции?

Как вы видите, два элемента выбраны красным цветом. возможно ли в UICollectionView иметь несколько выбранных элементов? если да, не могли бы вы дать мне несколько уроков.

Ответы

Ответ 1

Небольшой пример проекта здесь: https://github.com/erikt/ETMultiSelect

Сначала вам нужно выбрать более одной ячейки в UICollectionView. Это делается путем установки свойства allowsMultipleSelection в YES в представлении коллекции.

Контроллер вида будет выглядеть примерно так:

#import "ETViewController.h"
#import "ETCellView.h"

@implementation ETViewController

static NSString *cellIdentifier = @"cvCell";

- (void)viewDidLoad {
    [super viewDidLoad];

    // Register our custom collection view cell
    [self.collectionView registerClass:ETCellView.class forCellWithReuseIdentifier:cellIdentifier];

    // Make it possible to select multiple cells
    self.collectionView.allowsMultipleSelection = YES;
}

#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 10;
}

#pragma mark - UICollectionViewDelegate
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    ETCellView *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    return cell;
}

@end

UICollectionViewCell состоит из нескольких видов. Он имеет представление контента, фоновое представление и выбранное фоновое представление.

Существует много способов добиться чего-то подобного вашему изображению, но я установил границу на выбранном фоновом слое и добавлю представление в представление содержимого, которое вставка, чтобы видимость фона была видимой:

#import "ETCellView.h"
#import <QuartzCore/QuartzCore.h>

@implementation ETCellView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.restorationIdentifier = @"cvCell";
        self.backgroundColor = [UIColor clearColor];
        self.autoresizingMask = UIViewAutoresizingNone;

        CGFloat borderWidth = 3.0f;
        UIView *bgView = [[UIView alloc] initWithFrame:frame];
        bgView.layer.borderColor = [UIColor redColor].CGColor;
        bgView.layer.borderWidth = borderWidth;
        self.selectedBackgroundView = bgView;

        CGRect myContentRect = CGRectInset(self.contentView.bounds, borderWidth, borderWidth);

         UIView *myContentView = [[UIView alloc] initWithFrame:myContentRect];
         myContentView.backgroundColor = [UIColor whiteColor];
         myContentView.layer.borderColor = [UIColor colorWithWhite:0.5f alpha:1.0f].CGColor;
         myContentView.layer.borderWidth = borderWidth;
         [self.contentView addSubview:myContentView];
     }
     return self;
}

@end

Результат выглядит примерно так:

Клонировать и играть с образцом проекта.

В реальном проекте вы хотите отслеживать, что пользователь выбрал в контроллере представления, добавив выбранные объекты модели данных в некоторую структуру (например, NSMutableArray) в метод – collectionView:didSelectItemAtIndexPath: на UICollectionViewDelegate.