NSCollectionView Sample Code

NSCollectionView Sample CodeNSCollectionView Sample Code

Created By : Debasis Das (29-Sept-2015)

In this article we will create a simple Cocoa Application in Objective C to create a NSCollectionView and to load it with an array of items that represents a product.

This kind of user interface is popular in retail applications like Apple Store, iBooks or any other retail store.

Here we have defined 5 properties for a product namely

  • Product Title
  • Product Description
  • Product Detailed Description
  • Product Price
  • Product Image / Thumbnail

In this sample we have not used bindings and we have not used datasource methods

NSCollectionView Sample Code 2

NSCollectionView Sample Code 2

NSCollectionView Sample Code 1

NSCollectionView Sample Code 1

Custom NSCollectionViewItem

The following template will be used as the itemPrototype

NSCollectionViewItem

NSCollectionViewItem

Sample Code

//KSRetailStoreCollectionViewItem.h
#import <Cocoa/Cocoa.h>
@interface KSRetailStoreCollectionViewItem : NSCollectionViewItem
@end

//KSRetailStoreCollectionViewItem.m
#import "KSRetailStoreCollectionViewItem.h"

@interface KSRetailStoreCollectionViewItem ()
@property (weak) IBOutlet NSTextField *titleTextField;
@property (weak) IBOutlet NSTextField *descriptionTextField;
@property (weak) IBOutlet NSTextField *detailDescription;
@property (weak) IBOutlet NSTextField *price;
@property (weak) IBOutlet NSImageView *itemImageView;

@end

@implementation KSRetailStoreCollectionViewItem

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do view setup here.
}

-(void)setRepresentedObject:(id)representedObject{
    [super setRepresentedObject:representedObject];
    if (representedObject !=nil)
    {
        NSLog(@"%@",[representedObject valueForKey:@"itemImage"]);
        
        [self.titleTextField setStringValue:[representedObject valueForKey:@"itemTitle"]];
        [self.descriptionTextField setStringValue:[representedObject valueForKey:@"itemDescription"]];
        [self.detailDescription setStringValue:[representedObject valueForKey:@"itemDetailedDescription"]];
        [self.price setStringValue:[representedObject valueForKey:@"itemPrice"]];
        [self.itemImageView setImage:[[NSBundle mainBundle] imageForResource:[representedObject valueForKey:@"itemImage"]]];
        
    }
    else
    {
        [self.titleTextField setStringValue:@"No Value"];
        [self.descriptionTextField setStringValue:@"No Value"];
        [self.detailDescription setStringValue:@"No Value"];
        [self.price setStringValue:@"No Value"];
        
    }
}

- (IBAction)addToCart:(id)sender {
    NSLog(@"%s",__func__);
}

@end

// These classes will be used to create the background of the header and footer of each collection view item and the background color of the collection view item can be set here. 
//This classes are not mandatorily required
//  KSBackgroundView.h
//  RetailStoreUI
//  Created by Debasis Das on 9/29/15.
//  Copyright © 2015 Knowstack. All rights reserved.

#import <Cocoa/Cocoa.h>

@interface KSHeaderView : NSView

@end

@interface KSFooterView : NSView

@end

@interface KSWhiteBackgroundView : NSView

@end
//  KSBackgroundView.m
//  RetailStoreUI
//  Created by Debasis Das on 9/29/15.
//  Copyright © 2015 Knowstack. All rights reserved.

#import "KSBackgroundView.h"

@implementation KSHeaderView

- (void)drawRect:(NSRect)dirtyRect {
    [super drawRect:dirtyRect];
    
    NSColor *startingColor;
    NSColor *endingColor;
    NSGradient* aGradient;
    startingColor = [NSColor blackColor];
    endingColor = [NSColor darkGrayColor];
    aGradient = [[NSGradient alloc]
                 initWithStartingColor:startingColor
                 endingColor:endingColor];
    NSBezierPath *bezierPath = [NSBezierPath bezierPathWithRoundedRect:[self bounds] xRadius:0.0 yRadius:0.0];
    [aGradient drawInBezierPath:bezierPath angle:270];
}

@end

@implementation KSFooterView

- (void)drawRect:(NSRect)dirtyRect {
    [super drawRect:dirtyRect];
    
    NSColor *startingColor;
    NSColor *endingColor;
    NSGradient* aGradient;
    startingColor = [NSColor blackColor];
    endingColor = [NSColor darkGrayColor];

    aGradient = [[NSGradient alloc]
                 initWithStartingColor:startingColor
                 endingColor:endingColor];
    NSBezierPath *bezierPath = [NSBezierPath bezierPathWithRoundedRect:[self bounds] xRadius:0.0 yRadius:0.0];
    [aGradient drawInBezierPath:bezierPath angle:90];
}

@end

@implementation KSWhiteBackgroundView

- (void)drawRect:(NSRect)dirtyRect {

    [super drawRect:dirtyRect];
    [NSGraphicsContext saveGraphicsState];
    [[NSColor colorWithCalibratedWhite:0.95 alpha:1.0] setFill];
    [[NSBezierPath bezierPathWithRoundedRect:[self bounds] xRadius:8.0 yRadius:8.0] fill];
    [NSGraphicsContext restoreGraphicsState];
}
@end

Finally the changes in the App Delegate to setup the collection view in the applicationDidFinishLaunching Method


//  AppDelegate.h
//  RetailStoreUI

#import <Cocoa/Cocoa.h>
#import "KSRetailStoreCollectionViewItem.h"
@interface AppDelegate : NSObject 
@property (strong) NSArray *contents;
@property (assign) IBOutlet NSCollectionView *collectionView;
@property (strong) KSRetailStoreCollectionViewItem *collectionViewItem;

@end

//  AppDelegate.m
//  RetailStoreUI

#import "AppDelegate.h"
@interface AppDelegate ()
@property (weak) IBOutlet NSWindow *window;
@end

@implementation AppDelegate

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
    // Insert code here to initialize your application
    self.collectionViewItem = [KSRetailStoreCollectionViewItem new];
    self.contents = @[
                      @{@"itemTitle":@"Product 1",
                        @"itemDescription":@"Product 1 Description",
                        @"itemDetailedDescription":@"128 Ratings",
                        @"itemPrice":@"$20.90",
                        @"itemImage":@"PastedGraphic-1.png"},

                      @{@"itemTitle":@"Product 2",
                        @"itemDescription":@"Product 2 Description",
                        @"itemDetailedDescription":@"128 Ratings",
                        @"itemPrice":@"$10.90",
                        @"itemImage":@"PastedGraphic-3.png"},

                      @{@"itemTitle":@"Product 3",
                        @"itemDescription":@"Product 3 Description",
                        @"itemDetailedDescription":@"128 Ratings",
                        @"itemPrice":@"$9810.90",
                        @"itemImage":@"PastedGraphic-4.png"},

                      @{@"itemTitle":@"Product 4",
                        @"itemDescription":@"Some New Description",
                        @"itemDetailedDescription":@"128 Ratings",
                        @"itemPrice":@"$100.90",
                        @"itemImage":@"PastedGraphic-5.png"},

                      @{@"itemTitle":@"Product 5",
                        @"itemDescription":@"This product rocks",
                        @"itemDetailedDescription":@"128 Ratings",
                        @"itemPrice":@"$109.19",
                        @"itemImage":@"PastedGraphic-1.png"},

                      @{@"itemTitle":@"Product 6",
                        @"itemDescription":@"This product is for new users",
                        @"itemDetailedDescription":@"128 Ratings",
                        @"itemPrice":@"$910.90",
                        @"itemImage":@"PastedGraphic-6.png"},

                      @{@"itemTitle":@"Product 7",
                        @"itemDescription":@"The best we have built so far",
                        @"itemDetailedDescription":@"128 Ratings",
                        @"itemPrice":@"$632.90",
                        @"itemImage":@"PastedGraphic-7.png"},
                      ];
   
    [self.collectionView setItemPrototype:self.collectionViewItem];
    [self.collectionView setContent:self.contents];    
}

- (void)applicationWillTerminate:(NSNotification *)aNotification {
    // Insert code here to tear down your application
}

@end

You can download the sample code here

Posted in Cocoa, Objective C Tagged with: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news