关闭

MacOS 开发 - NSCollectionView & CNGridView

标签: CNGridViewMacOS开发NSCollecti
2366人阅读 评论(1) 收藏 举报
分类:

系统基本用法

macOS 上的 CollectionView 可以不使用 dategate 和 datasource。
每一小格显示的内容,可以继承自 NSCollectionViewItem。

1、创建 CollectionView



- (void)addCollect{
    NSCollectionView *collectionView = [[NSCollectionView alloc]initWithFrame:[self.window.contentView bounds]];

    [[self.window contentView]addSubview:collectionView];

    CollectionViewItem *itemPrototype = [[CollectionViewItem alloc]initWithNibName:@"CollectionViewItem" bundle:nil];

    collectionView.itemPrototype = itemPrototype;

    NSArray *array0 = @[ NSImageNameMobileMe,NSImageNameMultipleDocuments,NSImageNameUserAccounts,NSImageNamePreferencesGeneral,NSImageNameAdvanced,NSImageNameInfo,NSImageNameFontPanel,NSImageNameColorPanel,NSImageNameUser,NSImageNameUserGroup];

    NSMutableArray *itemArray = [[NSMutableArray alloc]init];

    for (NSString *imgName in array0) {

        NSImage *img = [NSImage imageNamed:imgName];

        NSDictionary *item5 =@{@"title":imgName,
                               @"image":img
                               };

        [itemArray addObject:item5];

    }

    collectionView.content = itemArray;

}

2、创建 CollectionViewItem

2.1 继承自 NSCollectionViewItem,并勾选 xib。
2.2 可以在这个 xib 上拖拽你想要的控件,比如我这里拖放了 NSImageView 和 NSTextField。
2.3 将这些控件连线到 .m 文件。

自定义 NSCollectionViewItem

3、给 item 传值

item 自带 representedObject 属性。取出我们之前存在 collectionView.content 的值就好了。

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

    if(!self.representedObject){
        return;
    }

    self.collImageView.image = [self.representedObject objectForKey:@"image"];

    self.titleField.stringValue = [self.representedObject objectForKey:@"title"];

    self.titleField.maximumNumberOfLines = 0;
    self.collImageView.imageScaling = NSImageScaleNone;

}

小结

  • 这样无法实现 多组效果 和 点击事件。好在 NSCollectionView 也有 delegate 和 datasource,我们可以尝试使用。
  • 当内容很多时,界面并没有滑动条,可以查看没有显示全的内容。当拖拽窗口时,item 内容和排列并没有随之改变。

CNGridView 的简单实用

大家都反映 NSCollectionView 比较多坑(和iOS 中还是不同),需要赶时间,或者有更复杂的功能实现,大家可以参考 CNGridView
https://github.com/phranck

优点:

  • 代理和数据源方法,非常方便;
  • 支持拖拽多选。

缺陷:

多个 section 可能只能显示第一个。可能是博主不会用。

下面以博主的经验,简单介绍下 CNGridView 的使用。


创建

在主窗口中拉一个 NSScrollView, 把 ClipView 的下一级子 View 改为 CNGridView 类型。

注意
- 把 scrollView 拉到.m文件中,然后填在为子 view 无效,如下:
[self.scrollView.contentView addSubview:self.gridView];

  • 设置gridView 为 scrollView.contentView 无效
    self.scrollView.contentView = self.gridView;

GridView


创建数据源

我的 demo 主要是为了显示 系统图片,所以初始化数据代码如下,大家可以根据自己的需要进行修改

- (void)initData{
    NSArray *array0 = @[ NSImageNameMobileMe,NSImageNameMultipleDocuments,NSImageNameUserAccounts,NSImageNamePreferencesGeneral,NSImageNameAdvanced];

    NSArray *array1 = @[NSImageNameMenuMixedStateTemplate,NSImageNameApplicationIcon,NSImageNameTrashEmpty,NSImageNameTrashFull,NSImageNameHomeTemplate,NSImageNameBookmarksTemplate,NSImageNameCaution,NSImageNameStatusAvailable];
     NSArray *wholeNameArray = @[array0,array1];

    for (NSArray *nameArray in wholeNameArray) {
        NSMutableArray *itemArray = [[NSMutableArray alloc]init];
        for (NSString *imgName in nameArray) {

            NSImage *img = [NSImage imageNamed:imgName];

            NSDictionary *item5 =@{@"title":imgName,
                                   @"image":img
                                   };

            [itemArray addObject:item5];
        }
        [self.dataArray addObject:itemArray];
    }
}

实现 delegate 和 datasource 方法

#pragma mark - CNGridView DataSource

-(NSUInteger)numberOfSectionsInGridView:(CNGridView *)gridView
{

    return self.dataArray.count;
}

- (NSUInteger)gridView:(CNGridView *)gridView numberOfItemsInSection:(NSInteger)section {

    NSArray *array = self.dataArray[section];
    return array.count;
}

- (CNGridViewItem *)gridView:(CNGridView *)gridView itemAtIndex:(NSInteger)index inSection:(NSInteger)section {
    static NSString *reuseIdentifier = @"CNGridViewItem";

    CNGridViewItem *item = [gridView dequeueReusableItemWithIdentifier:reuseIdentifier];
    if (item == nil) {
        item = [[CNGridViewItem alloc] initWithLayout:self.hoverLayout reuseIdentifier:reuseIdentifier];
    }
    item.hoverLayout = self.hoverLayout;
    item.selectionLayout = self.hoverLayout;

    NSDictionary *contentDict = self.dataArray[section][index];
    item.itemTitle = [contentDict objectForKey:@"title"];
    item.itemImage = [contentDict objectForKey:@"image"];

    return item;
}


#pragma mark - CNGridView Delegate

- (void)gridView:(CNGridView *)gridView didClickItemAtIndex:(NSUInteger)index inSection:(NSUInteger)section {
    NSLog(@"didClickItemAtIndex: %li", index);
}

- (void)gridView:(CNGridView *)gridView didDoubleClickItemAtIndex:(NSUInteger)index inSection:(NSUInteger)section {
    NSLog(@"didDoubleClickItemAtIndex: %li", index);
}

- (void)gridView:(CNGridView *)gridView didActivateContextMenuWithIndexes:(NSIndexSet *)indexSet inSection:(NSUInteger)section {
    NSLog(@"rightMouseButtonClickedOnItemAtIndex: %@", indexSet);
}

- (void)gridView:(CNGridView *)gridView didSelectItemAtIndex:(NSUInteger)index inSection:(NSUInteger)section {
    NSLog(@"\n ****** \n didSelectItemAtIndex: %li", index);
}

- (void)gridView:(CNGridView *)gridView didDeselectItemAtIndex:(NSUInteger)index inSection:(NSUInteger)section {
    NSLog(@"didDeselectItemAtIndex: %li", index);
}

点击时,代理方法会经历这样的过程:
didDeselectItemAtIndex 取消选中上一个 -> didSelectItemAtIndex –> didClickItemAtIndex


参考资料

http://www.jianshu.com/p/09e23238a990

0
0
查看评论

NSCollectionView 基础

NSCollectionView 作为Mac OS X中比较常用的一个控件。代表就是Finder中的Application展示的效果。但是又有一点区别。动手写一个基于NSCollectionView的应用程序后就能明白他们的区别了。Let's go (一) NSCollection...
  • u012972257
  • u012972257
  • 2014-03-22 15:18
  • 4675

NSCollectionView 实现选中效果

(一)实现选中,并对View添加效果: 1:首先需要设置NSCollectionView允许选中。 可以在IB里面选中CollectionView 后勾选selectable,或者直接代码设置可以勾选 [_collectionView setSelectable:YES]; 2:对NSCol...
  • u012972257
  • u012972257
  • 2014-03-23 12:29
  • 3188

NSCollectionView + NSArrayController 实战

1, 分别拖入 NSCollectionView 和 NSArrayController 到 xib 里面,拖入 NSCollectionView的时候会自动生成 一个 NSCollectionViewItem 和 一个NSView。 2, 设置 NSArrayControll
  • leonpengweicn
  • leonpengweicn
  • 2011-09-22 14:38
  • 3815

iOS6新特征:UICollectionView介绍

1.1. Collection View 全家福: UICollectionView, UITableView, NSCollectionView n   不直接等效于NSCollectionView n   也不替代UITableView----亲兄...
  • eqera
  • eqera
  • 2012-11-01 07:51
  • 152807

浅谈MAC系统

OC项目给了我一个认识MAC系统的机会,虽然开始的时候各种不习惯,但是几天之后,我开始喜欢上MAC系统。关于MAC系统,我最大的体会就是他的灵活性。之前老师一直在告诉我们做东西一定要灵活,尽最大的可能减少用户需要的操作,这样用户才能爱上我们的软件。这次用MAC系统,让我开始认真的考虑老师的话。 因...
  • wangdan1030
  • wangdan1030
  • 2015-08-28 17:14
  • 556

Mac开发

mac 开发的资料太少了, 踩一个坑就记录一次, ---- 坐标系换了, 左下角是 (0,0)点 , 本来iOS的坐标第一次看的时候很别扭,觉得,该是左下角(0,0), 现在做iOS时间长了, 真到mac上反而蛋疼了... 还有 没有了 center ---- mac 上的 Frame ...
  • u014600626
  • u014600626
  • 2016-11-02 13:34
  • 1756

UICollectionView 基础全面解析

大家好,我叫mark qq:1124728522 欢迎大家多多交流 批评指正
  • iOS_mark
  • iOS_mark
  • 2016-07-01 12:53
  • 17242

Masonry适配——(8)UICollectionView的使用

github:https://github.com/potato512/SYDemo_Masonry UICollectionView视图结合masonry适配的使用。 UICollectionView视图中,使用了自定义header页眉视图、footer页脚视图,以及自定义的cel...
  • potato512
  • potato512
  • 2017-01-18 11:06
  • 2094

UICollectionView详解

=====================首先,UICollectionView入门================= 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://rainbownight.blog...
  • BlackWolfSky
  • BlackWolfSky
  • 2016-07-20 16:52
  • 2146

iOS UICollectionView简单使用

NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionView : UIScrollView
  • Apple_app
  • Apple_app
  • 2014-08-27 11:35
  • 124248
    博客专栏
    个人资料
    • 访问:210175次
    • 积分:3453
    • 等级:
    • 排名:第11457名
    • 原创:127篇
    • 转载:6篇
    • 译文:1篇
    • 评论:96条
    最新评论