Ustaw granicę w UICollectionView

Question

Po raz pierwszy chcę utworzyć UICollectionView. To jest jak chcę wyglądać:

Czytałem kilka tutoriali i wiem, jak to dokładnie działa. Rzecz jest taka, jak widzisz na obrazku, komórki UICollection mają obramowanie od góry, dołu, lewej i prawej strony. Czy wiesz, jak ustawić takie obramowanie w widoku kolekcji?

Jak widać, dwa elementy są zaznaczone kolorem czerwonym. czy w UICollectionView możliwe jest posiadanie wielu wybranych elementów? jeśli tak, proszę dać mi kilka samouczków.

Answer 1

Mały przykład projekt tutaj: https://github.com/erikt/ETMultiSelect

Najpierw trzeba zrobić to można wybrać więcej niż jedną komórkę w UICollectionView. Odbywa się to poprzez ustawienie właściwości allowsMultipleSelection na YES w widoku kolekcji.

Kontroler widok będzie wyglądać mniej więcej tak:

#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 składa się z kilku widoków. Ma widok zawartości, widok tła i wybrany widok tła.

Istnieje wiele sposobów, aby osiągnąć coś podobnego do zdjęcia, ale ustawić granicę na wybranej warstwie tła i dodać podrzędny do widoku zawartości, która jest wstawka więc granica tło jest widoczne:

#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 

rezultatem jest coś takiego:

Clone i grać z the sample project.

w rzeczywistym projekcie, co chcesz śledzić, co użytkownik wybrał w kontrolerze widoku, dodając wybrane podmioty model danych do pewnej strukturze (jak NSMutableArray) w metodzie – collectionView:didSelectItemAtIndexPath: na protokole UICollectionViewDelegate.