12

UICollectionView を作成したいのは初めてです。これは私がそれをどのように見せたいかです：

ここに画像の説明を入力

いくつかのチュートリアルを読んで、それがどのように機能するかを正確に知っています。事は画像でわかるように、 UICollection セルには上下左右の境界線があります。コレクションビューでこの種の境界線を設定する方法を知っていますか?

ご覧のとおり、2 つの項目が赤色で選択されています。UICollectionView で複数のアイテムを選択することは可能ですか? はいの場合は、いくつかのチュートリアルを送ってください。

4

1 に答える 1

27

ここの小さなサンプル プロジェクト: https://github.com/erikt/ETMultiSelect

まず、 で複数のセルを選択できるようにする必要がありますUICollectionView。これを行うには、コレクション ビューで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いくつかのビューで構成されています。コンテンツ ビュー、背景ビュー、および選択された背景ビューがあります。

写真に似たものを実現する方法はたくさんありますが、選択した背景レイヤーに境界線を設定し、挿入されたコンテンツ ビューにサブビューを追加して、背景の境界線が見えるようにします。

#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

結果は次のようになります。

iPhoneのスクリーンショット

サンプル プロジェクトを複製して再生します。

実際のプロジェクトでは、選択したデータ モデル エンティティをプロトコルのメソッドの構造体 ( などNSMutableArray) に追加することで、View Controller でユーザーが選択したものを追跡する必要があります。– collectionView:didSelectItemAtIndexPath:UICollectionViewDelegate

于 2012-11-04T00:09:06.340 に答える