ios 在 UICollectionView 中设置边框

Set border in UICollectionView

提问by Ali

It is my first time that I want to create a UICollectionView. This is how I want it to look like:

这是我第一次想创建一个 UICollectionView。这就是我想要的样子：

I read some tutorials and I know how it works exactly. The thing is as you see in the image, The UICollection cells have border from up, bottom, left and right. Do you know how can set these kind of border in Collection View?

我阅读了一些教程，我知道它是如何工作的。事情就像你在图像中看到的那样， UICollection 单元格从上、下、左和右都有边框。你知道如何在 Collection View 中设置这些边框吗？

As you see two of the items are selected by red color. is it possible in UICollectionView to have multiple selected items? if yes, could you please give send me some tutorials.

如您所见，其中两个项目被红色选中。UICollectionView 中是否有可能有多个选定的项目？如果是的话，你能给我一些教程。

回答by Erik Tjernlund

Small example project here: https://github.com/erikt/ETMultiSelect

这里的小示例项目：https: //github.com/erikt/ETMultiSelect

First you have to make it possible to select more than one cell in the UICollectionView. This is done by setting the allowsMultipleSelectionproperty to YESon the collection view.

首先，您必须能够在 .csv 文件中选择多个单元格UICollectionView。这是通过在集合视图上设置allowsMultipleSelection属性来YES完成的。

The view controller would look something like this:

视图控制器看起来像这样：

#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

The UICollectionViewCellis made up of several views. It has a content view, a background view and a selected background view.

该UICollectionViewCell由几意见了。它有一个内容视图、一个背景视图和一个选定的背景视图。

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:

有很多方法可以实现与您的图片类似的效果，但我在选定的背景图层上设置了边框，并向插入的内容视图添加了一个子视图，以便背景边框可见：

#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

The result is something like this:

结果是这样的：

Clone and play with the sample project.

克隆并使用示例项目。

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 NSMutableArray) in the – collectionView:didSelectItemAtIndexPath:method on the UICollectionViewDelegateprotocol.

在实际项目中，您可能希望通过将所选数据模型实体添加到协议方法NSMutableArray中的某个结构（如 a ）来跟踪用户在视图控制器中选择– collectionView:didSelectItemAtIndexPath:的内容UICollectionViewDelegate。