概要

階段一，完成數(shù)據(jù)的顯示。
階段二卿操，完成數(shù)據(jù)拖拽的調(diào)整。(存在未知問題)
階段三傻挂，實現(xiàn)撤銷功能。(存在問題)

階段一實現(xiàn)數(shù)據(jù)的顯示

1.新建項目挖息，打開storyboard金拒，將source list拖拽直默認的view controller中。

image.png

2.將tree controller和object拖拽至默認的view controller的頂部旋讹。(不會的請看前文)

image.png

3.點擊選中object殖蚕，設(shè)置其【Custom Class】為“NSMutableArray”，設(shè)置其【Document Label】為playlits沉迹。

image.png

4.點擊選中Tree Controller睦疫，按住Control鍵將其拖拽至object圖標上，選擇content鞭呕。

image.png

5.點擊選中Tree Controller蛤育，設(shè)置其Children為children、Ledf為isLeaf、Class Name為Playlist瓦糕。(聰明的你知道我們下一步要做什么了嗎底洗？)

image.png

6.新建一個NSObject的子類Playlist，聲明兩個屬性name和creator咕娄，聲明并實現(xiàn)isLeaf和初始化方法亥揖。

//Playlist.h
#import <Cocoa/Cocoa.h>
@interface Playlist : NSObject
@property NSString *name;
@property NSString *creator;
- (bool) isLeaf;
- (id) init;
- (id) initWithCustom:(NSString*)name;
@end

#import "Playlist.h"

@implementation Playlist
-(id) init{
    self = [super init];
    if(self){
        _name = @"New Player";
        _creator = @"N/A";
    }
    return self;
}

-(id) initWithCustom:(NSString*)name{
    self = [super init];
    if(self){
        _name = name;
        _creator = @"N/A";
    }
    return self;
}

-(bool) isLeaf{
    return YES;
}
@end

7、綁定圣勒。
7-1费变、將Table Column與Tree Controller進行綁定；

image.png

7-2將HEADER CELL與Table Cell View進行綁定圣贸，并設(shè)置其key path為objectvalue.name挚歧；

image.png

7-3、將Table View Cell與Table Cell View進行綁定吁峻，設(shè)置為其key path為objectvalue.name滑负。

image.png

7-4、最后將View Controller做為Outline View的Datasource與Delegate用含。

image.png

8.拖拽大法矮慕，將outline view與tree controller拖拽直ViewController.h中。

image.png

并且在ViewController.h中添加NSOutlineViewDataSource和NSOutlineViewDelegate協(xié)議耕餐。

//ViewController.h
#import <Cocoa/Cocoa.h>
@interface ViewController : NSViewController<NSOutlineViewDataSource,NSOutlineViewDelegate>
@property (weak) IBOutlet NSOutlineView *outlineView;
@property (strong) IBOutlet NSTreeController *treeController;
@end

9.在ViewController.m中添加addData方法凡傅，并在viewDidLoad中調(diào)用，實現(xiàn)outlineView的協(xié)議方法肠缔。

#import "ViewController.h"
#import "Playlist.h"
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // Do any additional setup after loading the view.
    [self addData];
}

//內(nèi)部方法1:初始化數(shù)據(jù)
- (void) addData{
    NSDictionary *root = @{@"name":@"Library",@"isLeaf":@NO};
    
    NSMutableArray *array =[[NSMutableArray alloc] initWithCapacity:(NSUInteger)10];
    [array addObject:[[Playlist alloc] initWithCustom:@"New Player1"]];
    [array addObject:[[Playlist alloc] initWithCustom:@"New Player2"]];
    
    NSMutableDictionary *dict = [[NSMutableDictionary alloc] initWithDictionary:root];
    
    [dict setObject:array forKey:@"children"];
    
    [_treeController addObject:dict];
}

//內(nèi)部方法2:判斷是否為頭
- (bool) isHeader:(id)Item{
    Item = (NSTreeNode*)Item;
    if(Item){
        return ![[Item representedObject] isKindOfClass:[Playlist class]];
    }
    return ![Item isKindOfClass:[Playlist class]];
}

//實現(xiàn)協(xié)議方法
- (NSView *)outlineView:(NSOutlineView *)outlineView viewForTableColumn:(NSTableColumn *)tableColumn item:(id)item{
    if([self isHeader:item]){
        return [outlineView makeViewWithIdentifier:@"HeaderCell" owner:self];
    }
    return [outlineView makeViewWithIdentifier:@"DataCell" owner:self];
}

- (void)setRepresentedObject:(id)representedObject {
    [super setRepresentedObject:representedObject];

    // Update the view, if already loaded.
}
@end

10.階段一完成，效果如下哼转。

image.png

階段二實現(xiàn)拖拽調(diào)整數(shù)據(jù)功能

1.打開ViewController.m中明未，在viewDidLoad方法中新增代碼。

    //階段二
    [_outlineView expandItem:nil expandChildren:YES];   //自動展開
    //拖拽事件相關(guān)
    NSMutableArray *arr = [[NSMutableArray alloc] init];
    [arr addObject:NSPasteboardTypeString];
    [_outlineView registerForDraggedTypes:arr];

2.添加以下三個函數(shù)壹蔓。

//階段二之支持拖拽
- (id<NSPasteboardWriting>)outlineView:(NSOutlineView *)outlineView pasteboardWriterForItem:(id)item{
    Playlist *playlist = [item representedObject];
    if ([playlist isKindOfClass:[Playlist class]]){
        NSPasteboardItem* pbItem = [[NSPasteboardItem alloc] init];
        [pbItem setString:playlist.name forType:NSPasteboardTypeString];
        return pbItem;
    }
    return nil;
}

//階段二之判斷是否為有效拖拽
- (NSDragOperation)outlineView:(NSOutlineView *)outlineView validateDrop:(id<NSDraggingInfo>)info proposedItem:(id)item proposedChildIndex:(NSInteger)index{
    bool canDrag = index>=0 && item!=nil;
    if (!canDrag){
        return NSDragOperationNone;
    }
    return NSDragOperationMove;
}

//階段二之拖拽調(diào)整位置
- (BOOL)outlineView:(NSOutlineView *)outlineView acceptDrop:(id<NSDraggingInfo>)info item:(id)item childIndex:(NSInteger)index{
    
    NSPasteboard* pb = [info draggingPasteboard];
    NSString *name = [pb stringForType:NSPasteboardTypeString];
    NSTreeNode *sourceNode = nil;
    
    if([(NSTreeNode*)item childNodes] != nil){
        for(id node in [item childNodes]){
            Playlist * playlist = [node representedObject];
            if([playlist isKindOfClass:[Playlist class]]){
                if([playlist.name isEqualToString:name]){
                    sourceNode = node;
                }
            }
        }
    }
    if(sourceNode == nil){
        return NO;
    }
    
    NSUInteger indexs[] ={0,index};
    NSIndexPath* toIndexPath = [[NSIndexPath alloc] initWithIndexes:indexs length:2];
    [_treeController moveNode:sourceNode toIndexPath:toIndexPath];
    
    return YES;
}

3.階段二趟妥，完成！

image.png

階段三實現(xiàn)撤銷功能

1.實現(xiàn)兩個協(xié)議方法佣蓉。

//階段三之是否為GroupItem
- (BOOL)outlineView:(NSOutlineView *)outlineView isGroupItem:(id)item{
    return [self isHeader:item];
}

//階段三之執(zhí)行撤銷動作
- (void)reverse:(NSTreeNode*)sourceNode fromIndexPath:(NSIndexPath*)fromIndexPath{
    [_treeController moveNode:sourceNode toIndexPath:fromIndexPath];
}

2.添加部分代碼至outlineView(acceptDrop)函數(shù)中披摄。

//階段二之拖拽調(diào)整位置
- (BOOL)outlineView:(NSOutlineView *)outlineView acceptDrop:(id<NSDraggingInfo>)info item:(id)item childIndex:(NSInteger)index{
    
    NSPasteboard* pb = [info draggingPasteboard];
    NSString *name = [pb stringForType:NSPasteboardTypeString];
    NSTreeNode *sourceNode = nil;
    
    if([(NSTreeNode*)item childNodes] != nil){
        for(id node in [item childNodes]){
            Playlist * playlist = [node representedObject];
            if([playlist isKindOfClass:[Playlist class]]){
                if([playlist.name isEqualToString:name]){
                    sourceNode = node;
                }
            }
        }
    }
    if(sourceNode == nil){
        return NO;
    }
    
    //階段三之記錄原始路徑
    NSIndexPath* fromIndexPath = [_treeController selectionIndexPath];
    
    NSUInteger indexs[] ={0,index};
    NSIndexPath* toIndexPath = [[NSIndexPath alloc] initWithIndexes:indexs length:2];
    [_treeController moveNode:sourceNode toIndexPath:toIndexPath];
    
    //階段三之配置undoManager，執(zhí)行reverse動作勇凭。
    [[self.undoManager prepareWithInvocationTarget:self] reverse:sourceNode fromIndexPath:fromIndexPath];
    [self.undoManager setActionName:@"Move"];
    
    return YES;
}

3.階段三完成疚膊，效果如下。

image.png

思考

這里有個小問題虾标，在拖拽p2時寓盗，必須先點擊選中p2，再去將p2拖拽至p1，否則在撤銷時傀蚌，就會存在p2與Library位置互換的BUG基显。
這個可愛的BUG就交給你們?nèi)バ迯?fù)啦！

一步一步熟悉Mac app開發(fā)（六）之NSOutlineView

一步一步熟悉Mac app開發(fā)（六）之NSOutlineView

概要

階段一實現(xiàn)數(shù)據(jù)的顯示

階段二實現(xiàn)拖拽調(diào)整數(shù)據(jù)功能

階段三實現(xiàn)撤銷功能

思考

一步一步熟悉Mac app開發(fā)（六）之NSOutlineView

概要

階段一 實現(xiàn)數(shù)據(jù)的顯示

階段二 實現(xiàn)拖拽調(diào)整數(shù)據(jù)功能

階段三 實現(xiàn)撤銷功能

思考

階段一實現(xiàn)數(shù)據(jù)的顯示

階段二實現(xiàn)拖拽調(diào)整數(shù)據(jù)功能

階段三實現(xiàn)撤銷功能