MacOS 开发 - NSCollectionView & CNGridView

原创 2017年09月14日 19:39:03

系统基本用法

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

版权声明:本文为博主原创文章,转载请附上本文链接地址。

相关文章推荐

NSCollectionView 实现选中效果

(一)实现选中,并对View添加效果: 1:首先需要设置NSCollectionView允许选中。 可以在IB里面选中CollectionView 后勾选selectable,或者直接代码设置可以勾选...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

MacOS 开发 - NSBezelStyle & NSButton(配图)

NSBezelStyle typedef NS_ENUM(NSUInteger, NSBezelStyle) { NSBezelStyleRounded = 1, ...

MacOS 开发 - NSTextField

关键词:MacOS 开发 , NSTextField,doCommandBySelector,isValidObject,NSControlSubclassNotifications,NSContro...

macOS逆向开发之class-dump

一、配置class-dump 1.打开http://stevenygard.com/projects/class-dump下载class-dump-3.5.dmg2.双击class-dump-3.5...

使用Swift开发一个MacOS的菜单状态栏App

这两天突然想看看OSX下的App开发,看了几篇文章。下面这一篇我觉得入门是非常好的。我仅转述为中文,并非原文翻译。原文地址:http://footle.org/WeatherBar/ 下面开始介绍如...

MacOS 搭建Android开发环境

如何在MAC OS X 安装Android SDK我以往用的开发环境都是以MAC OS安装VMware来跑不同的Windows OS,目前慢慢的将所要开发的项目由以往的传统的Wintel转移到Mobi...

macOS 下配置 MAMP 开发环境(Mac + Apache + Mysql + PHP)

macOS 中已经内置了 PHP、Python、Ruby、Perl 等常用的脚本语言,以及 Apache HTTP 服务器,所以使用起来非常方便。本文以最新的 macOS Sierra 10.12 配...

macos/unix下x264开发

macos/unix下x264开发x264新手入门下载x264源码videolan提供下载地址,git安装(没有git的自己装一下),终端进入你想保存源码的目录,输入:git clone git://...

MacOS上Node.js开发环境安装与测试

1.首先我们安装管理工具homebrew。打开终端,输入下面指令。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/H...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:MacOS 开发 - NSCollectionView & CNGridView
举报原因:
原因补充:

(最多只允许输入30个字)