StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Small example project here: <a href="https://github.com/erikt/ETMultiSelect" rel="nofollow noreferrer">https://github.com/erikt/ETMultiSelect</a> </p> <p>First you have to make it possible to select more than one cell in the <code>UICollectionView</code>. This is done by setting the <code>allowsMultipleSelection</code>property to <code>YES</code> on the collection view.</p> <p>The view controller would look something like this:</p> <pre><code>#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 </code></pre> <p>The <code>UICollectionViewCell</code> is made up of several views. It has a content view, a background view and a selected background view. </p> <p>There are many ways to achieve something similar to your picture, but I set the border on the selected background layer and add a subview to the content view that's inset so the background border is visible:</p> <pre><code>#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 </code></pre> <p>The result is something like this:</p> <p><img src="https://i.stack.imgur.com/PYVMW.png" alt="iPhone screen shot"></p> <p>Clone and play with <a href="https://github.com/erikt/ETMultiSelect" rel="nofollow noreferrer">the sample project</a>. </p> <p>In a real project you would want to keep track of what the user has selected in the view controller, by adding the selected data model entities to some structure (like a <code>NSMutableArray</code>) in the <code>– collectionView:didSelectItemAtIndexPath:</code> method on the <code>UICollectionViewDelegate</code> protocol.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload