A brief.

An ordered collection of data items displayed in a customizable layout.

@interface NSCollectionView : NSView
Copy the code

2. Official attribute method

// The object that provides data for the collection view
@property (nullable.weak) id<NSCollectionViewDataSource> dataSource API_AVAILABLE(macos(10.11)); 
@property (nullable.weak) id<NSCollectionViewPrefetching> prefetchDataSource API_AVAILABLE(macos(10.13));
// Delegate object
@property (nullable.weak) id<NSCollectionViewDelegate> delegate;
// Provide an array of data for the collection view
@property (copy) NSArray<id> *content;
@property (nullable.strong) NSView *backgroundView API_AVAILABLE(macos(10.11));
// Background color array
@property (null_resettable.copy) NSArray<NSColor *> *backgroundColors;
// Whether the background view scrolls along with the project and other content
@property BOOL backgroundViewScrollsWithContent API_AVAILABLE(macos(10.12));
// Build a layout object for the contents of the collection view
@property (nullable.strong) __kindof NSCollectionViewLayout *collectionViewLayout API_AVAILABLE(macos(10.11));
Copy the code

!!!!!!!!! I will add later!!

Three sample.

1. The rendering

Effects to be achieved:

  • Displays the left chat list
  • Split sliding item Internal controller position does not change
  • Display in full screen
  • Click on item to adjust the selected color

The following figure

2. Specific code

2.1 createNSCollectionView

This is for the convenience of using Storyboard

2.2 Configuring the flowLayout(you can create or proxy it)

self.flowLayout = [[NSCollectionViewFlowLayout alloc] init];
self.flowLayout.itemSize = NSMakeSize(self.collectionView.frame.size.width, 60); / / size of the item
self.flowLayout.minimumLineSpacing = 0; // Minimum horizontal spacing
self.flowLayout.minimumInteritemSpacing = 0; // Minimum vertical spacing
self.collectionView.collectionViewLayout = self.flowLayout;
Copy the code

Note: The reason for not using the Storyboard or proxy to configure the flowLayout is that it is easier to set itemSize when sliding SplitView.

2.3 Configuring the Proxy

@interface FSMessageVC(a)
<
NSSplitViewDelegate.NSCollectionViewDelegate.NSCollectionViewDataSource.NSCollectionViewDelegateFlowLayout
>

self.collectionView.delegate = self;
self.collectionView.dataSource = self;
Copy the code

2.4 Setting the CollectionView Property

// Set the background color of the CollectionView
self.collectionView.layer.backgroundColor = NSColor.whiteColor.CGColor;
self.collectionView.wantsLayer = YES;
// Optional Settings!! Attention!! Clicking item without setting it to YES will have no effect
self.collectionView.selectable = YES;
Copy the code

2.5 Registering a custom Item

[self.collectionView registerNib:[[NSNib alloc] initWithNibNamed:@"FSChatCell" bundle:nil]
               forItemWithIdentifier:@"kChatItem"];
Copy the code

2.6 Implementing proxy methods

/ / area
- (NSInteger)numberOfSectionsInCollectionView:(NSCollectionView *)collectionView {
    return 1;
}
/ / item number
- (NSInteger)collectionView:(NSCollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.dataSource.count;
}
// FSChatCell inherits from NSCollectionViewItem
- (nonnull NSCollectionViewItem *)collectionView:(nonnull NSCollectionView *)collectionView itemForRepresentedObjectAtIndexPath:(nonnull NSIndexPath *)indexPath {
    FSChatCell *cell = (FSChatCell *)[collectionView makeItemWithIdentifier:@"kChatItem" forIndexPath:indexPath];
    cell.name = self.dataSource[indexPath.item];
    return cell;
}

- (BOOL)commitEditingAndReturnError:(NSError *__autoreleasing  _Nullable * _Nullable)error {
    return YES;
}

- (void)encodeWithCoder:(nonnull NSCoder *)coder {
    
}
Copy the code

2.7 Split sliding item Internal controller position does not change

// 1. Add NSSplitViewDelegate
self.splitView.delegate = self;

// Minimum slippable point
- (CGFloat)splitView:(NSSplitView *)splitView constrainMinCoordinate:(CGFloat)proposedMinimumPosition ofSubviewAt:(NSInteger)dividerIndex {
    return 200;
}
// Maximum sliding point
- (CGFloat)splitView:(NSSplitView *)splitView constrainMaxCoordinate:(CGFloat)proposedMaximumPosition ofSubviewAt:(NSInteger)dividerIndex {
    return 300;
}
// Notification agent when sliding, set itemSize
- (void)splitViewDidResizeSubviews:(NSNotification *)notification {
    self.flowLayout.itemSize = NSMakeSize(self.collectionView.frame.size.width, 60);
}
Copy the code

2.8 Display in full screen

Add a full-screen notification in notification callback method calls self. FlowLayout. ItemSize = NSMakeSize (self. CollectionView. Frame. The size, width, 60). , relatively simple no longer tired.

2.9 Click item to adjust the background color

There are two ways to do this:

  • didSelectItemsAtIndexPathsanddidDeselectItemsAtIndexPathsModify item background color
  • Override in custom itemselectedmethods
1 / / way
- (void)collectionView:(NSCollectionView *)collectionView didSelectItemsAtIndexPaths:(NSSet<NSIndexPath *> *)indexPaths {
    NSIndexPath *indexPath = indexPaths.allObjects.firstObject;
    FSChatCell *cell = (FSChatCell *)[collectionView itemAtIndexPath:indexPath];
    cell.view.wantsLayer = YES;
    cell.view.layer.backgroundColor = NSColor.lightGrayColor.CGColor;
}

- (void)collectionView:(NSCollectionView *)collectionView didDeselectItemsAtIndexPaths:(NSSet<NSIndexPath *> *)indexPaths {
    NSIndexPath *indexPath = indexPaths.allObjects.firstObject;
    FSChatCell *cell = (FSChatCell *)[collectionView itemAtIndexPath:indexPath];
    cell.view.wantsLayer = YES;
    cell.view.layer.backgroundColor = NSColor.whiteColor.CGColor;
}

2 / / way
// FSChatCell.m
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.wantsLayer = YES;
	  self.view.layer.backgroundColor = NSColor.whiteColor.CGColor;
}

- (void)setSelected:(BOOL)selected {
    super.selected = selected;
    [self changeBgViewColor];
}

- (void)changeBgViewColor {
    if (self.selected) {
        if (self.highlightState == NSCollectionViewItemHighlightForSelection) {
            self.view.layer.backgroundColor = NSColor.lightGrayColor.CGColor;
        } else if (self.highlightState == NSCollectionViewItemHighlightNone ||
                   self.highlightState == NSCollectionViewItemHighlightForDeselection) {
            self.view.layer.backgroundColor = NSColor.whiteColor.CGColor; }}else {
        self.view.layer.backgroundColor = NSColor.whiteColor.CGColor; }}Copy the code

2.10 FSChatCell.xib

Description:

  • createObjectObject and bindFSChatCell

  • It is best to connect the controls to the created Objects-chatcell

Github Demo