在UICollectionView中设置边框
这是我第一次创build一个UICollectionView。 这是我想要的样子:
我读了一些教程,我知道它是如何工作的。 事情就像你在图像中看到的那样,UICollection单元格有上,下,左,右的边界。 你知道如何在Collection View中设置这种边框吗?
当你看到两个项目被选中的红色。 在UICollectionView有可能有多个选定的项目? 如果是的话,可否请给我一些教程。
小例子项目在这里: https : //github.com/erikt/ETMultiSelect
首先你必须在UICollectionView
select多个单元格。 这是通过在集合视图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
由几个视图组成。 它有一个内容视图,一个背景视图和一个选定的背景视图。
有许多方法可以实现类似于您的图片的function,但是我在所选的背景图层上设置了边框,并在插入的内容视图中添加了一个子视图,以便背景边框可见:
#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
结果是这样的:
克隆和玩示例项目 。
在一个真实的项目中,您将需要跟踪用户在视图控制器中select的内容,方法是将选定的数据模型实体添加到UICollectionViewDelegate
协议的– collectionView:didSelectItemAtIndexPath:
方法中的某个结构(如NSMutableArray
)。