关闭

MacOS 开发 - NSCollectionView & CNGridView

标签: CNGridViewMacOS开发NSCollecti
2174人阅读 评论(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
查看评论
发表评论
* 以上用户言论只代表其个人钱柜娱乐开户,不代表CSDN网站的钱柜娱乐开户或立场

NSCollectionView 基础

NSCollectionView 作为Mac OS X中比较常用的一个控件。代表就是Finder中的Application展示的效果。但是又有一点区别。动手写一个基于NSCollectionView的...
  • u012972257
  • u012972257
  • 2014-03-22 15:18
  • 4618

NSCollectionView + NSArrayController 实战

1, 分别拖入 NSCollectionView 和 NSArrayController 到 xib 里面,拖入 NSCollectionView的时候会自动生成 一个 NSCollectionVie...
  • leonpengweicn
  • leonpengweicn
  • 2011-09-22 14:38
  • 3785

NSCollectionView 实现选中效果

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

cocoa、mac拖动文件url到NSView中

【原文地址:cocoa、mac拖动文件url到NSView中】 【作者:chenghxc】 【Demo:源码下载地址】 在项目开发中,有时候需要从外部添加文件或url等数据到程序中,可以通过...
  • chenghxc
  • chenghxc
  • 2013-02-25 11:09
  • 2732

如何在OS X 10.7上开发一个简单的应用教程(二)

本教程由iOS Tutorial Team成员Ernesto García发布,他是一位Mac和iOS开发者,CocoaWithCh
  • yuan_will
  • yuan_will
  • 2015-07-16 15:33
  • 3521

Mac OS X平台下的桌面软件开发感悟

[简历]  常用网名: 猪头三 出生日期: 1981.XX.XX 生理特征: 男 婚姻状况: 已婚 个人网站: http://www.x86asm.com Email:    plicem...
  • Code_GodFather
  • Code_GodFather
  • 2014-10-14 22:32
  • 19928

NSCollectionView 基础

NSCollectionView 作为Mac OS X中比较常用的一个控件。代表就是Finder中的Application展示的效果。但是又有一点区别。动手写一个基于NSCollectionView的...
  • u012972257
  • u012972257
  • 2014-03-22 15:18
  • 4618

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

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

MacOS 搭建钱柜娱乐开户开发环境

如何在MAC OS X 安装钱柜娱乐开户 SDK我以往用的开发环境都是以MAC OS安装VMware来跑不同的Windows OS,目前慢慢的将所要开发的项目由以往的传统的Wintel转移到Mobi...
  • ttth202507
  • ttth202507
  • 2011-06-11 12:46
  • 8223

macOS系统下搭建钱柜娱乐开户开发环境

在开始搭建钱柜娱乐开户开发环境之前,或者在学习钱柜娱乐开户开发之前,建议先学习Java入门知识。 Mac OS X系统在10.12.0起正式更名为“macOS”。 下面将从钱柜娱乐开户 SD...
  • fjnu_se
  • fjnu_se
  • 2017-06-06 19:55
  • 243
    钱柜娱乐开户
    个人资料
    • 访问:192729次
    • 积分:3224
    • 等级:
    • 排名:第12255名
    • 原创:123篇
    • 转载:6篇
    • 译文:1篇
    • 评论:97条
    最新评论