목표

xcode의 팔레트 같은 것을 만들고 싶다.


화면 상단에 있는 4개의 아이콘은 버튼으로 하단의 표시를 전환하는 탭의 역할. 아이콘이 늘어서 있는 가로로 흰 사각형의 영역은 NSSplitView의 divider로, 드래그해 상하시킬 수 있다.

이것을 어떤 식으로 만들면 좋겠다는 기록.

작업

NSSplitView 자체에 버튼을 올려 놓는 접근법이 작동하지 않았기 때문에 버튼이있는 맞춤 뷰를 별도로 준비하고 그것을 NSSplittView의 슈퍼 뷰에 배치하고 그냥 divider 위에 오도록 배치하는 전략을 취하고 보았다. 이것으로 맞는지 여부는 정말 말할 수 없다.

우선 h tp : / / s t c ゔ rf ぉ w. 코 m / 쿠에 s 치온 s / 11593541 / 호 w와 - 아 d 부 부톤 s - 아 - sp ぃ 을 참고로

NSSplitter의 서브 클래스 MySplitView를 만든다

인터페이스 빌더에서 NSSplitView를 배치하고 Custom Class를 MySplitView로 만듭니다

NSWindow 밖에 Custom View를 배치. 그 위에 버튼 셀의 NSMatrix를 놓습니다. NSMatrix는 MySplitView에 아울렛을 준비해 연결한다.

이런 느낌.




다음에 MySplitView의 메소드를 덧쓰기한다.

awakeFromNib에서 버튼이 탄 사용자 정의 뷰를 슈퍼 뷰에 추가합니다. ※ 이 근처 별로 깨끗하지 않다고 생각하고 있다.

drawDividerInRect:, dividerThickness로 divider의 크기를 결정하고 그립니다. 그릴 때 updateToolbarPosition을 호출하여 버튼이 있는 Custom View의 위치를 ​​업데이트합니다.

※ adjustSubviews는 이 예에서는 사용되지 않는다.

MySplitView 구현

-(void)awakeFromNib {
    [self.superview addSubview:self.buttonMatrixView];
}

-(void)drawDividerInRect:(NSRect)rect
{
    [[NSColor grayColor] set];
    NSRectFill(rect);
    [self updateToolbarPosition];
}

-(CGFloat)dividerThickness
{
    return 20.0; // ツールバーの高さ + 上下マージン
}

-(void)adjustSubviews
{
    [super adjustSubviews];
    [self updateToolbarPosition];
}

-(void)updateToolbarPosition
{
    NSRect frame;

    frame.origin.x = (self.frame.size.width - self.buttonMatrixView.bounds.size.width)/2;
    frame.origin.y = self.bounds.size.height - [self positionOfDividerAtIndex:0];
    frame.size     = self.buttonMatrixView.bounds.size;

    [self.buttonMatrixView setFrame:frame];
}


// ref. https://github.com/malcommac/NSSplitView-Animatable

- (CGFloat)positionOfDividerAtIndex:(NSInteger)dividerIndex
{
    while (dividerIndex >= 0 && [self isSubviewCollapsed:[[self subviews] objectAtIndex:dividerIndex]])
        dividerIndex--;
    if (dividerIndex < 0)
        return 0.0f;

    NSRect priorViewFrame = [[[self subviews] objectAtIndex:dividerIndex] frame];
    return [self isVertical] ? NSMaxX(priorViewFrame) : NSMaxY(priorViewFrame);
}

커서의 형상이나 collapse 대응등은 하고 있지 않기 때문에 여기대로는 불충분하지만, 그것 같은 것은 대략 만들 수 있었다고 생각한다.

참고

stackoverflow: How to add buttons to a NSSplitter handle?

GitHub: NSSplitView-Animatable