Grenze in UICollectionView festlegen

Question

Es ist mein erstes Mal, dass ich eine UICollectionView erstellen möchte. Dies ist, wie ich es aussehen soll:

ich einige Tutorials gelesen und ich weiß, wie es funktioniert genau. Die Sache ist, wie Sie in der Abbildung sehen, Die UICollection-Zellen haben Grenze von oben, unten, links und rechts. Wissen Sie, wie Sie diese Art von Rahmen in der Sammlungsansicht festlegen können?

Wie Sie sehen, sind zwei der Elemente rot markiert. Ist es in UICollectionView möglich, mehrere ausgewählte Objekte zu haben? Wenn ja, könntest du mir bitte ein paar Tutorials geben.

Answer 1

Kleines Beispielprojekt hier: https://github.com/erikt/ETMultiSelect

Zuerst müssen Sie es möglich machen, mehr als eine Zelle in den UICollectionView auszuwählen. Dies geschieht, indem die Eigenschaft allowsMultipleSelection in der Sammlungsansicht auf YES gesetzt wird.

Der View-Controller würde wie folgt aussehen:

#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 

Die UICollectionViewCell besteht aus mehreren Ansichten. Es hat eine Inhaltsansicht, eine Hintergrundansicht und eine ausgewählte Hintergrundansicht.

Es gibt viele Möglichkeiten, etwas Ähnliches zu Ihrem Bild zu erreichen, aber ich die Grenze auf der Hintergrundebene ausgewählt und eine Subview zum Inhalt Ansicht hinzufügen, so dass die Hintergrundrand nach innen versetzt ist sichtbar:

#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 

das Ergebnis ist so etwas wie dieses:

Clone und spielen mit the sample project.

In einem realen Projekt Sie im Auge zu behalten wollen würden der Benutzer, was im View-Controller ausgewählt hat, durch (wie ein NSMutableArray) in der – collectionView:didSelectItemAtIndexPath: Methode auf das UICollectionViewDelegate Protokoll zu einem gewissen Struktur der ausgewählten Datenmodell Einheiten hinzufügen.