0

I am trying to figure out how to do a custom NSTextField like the ones on the screenshot. Can anyone point me to a guide or in the right direction at least? I mean i understand that you can drawn the background and the box, but how do you tell the box that it accepts text and what size it should be etc?

Any help is highly appreciated.

What I want to achieve

Dmitri K.
  • 197
  • 1
  • 13

2 Answers2

0

Honestly, I only see two ways of doing it : subclass a NSTextField and skin it to your needs but you will face a lot of limitations, or create your own class that looks like a NSTextfield.

In the second option, you draw the background, the border, the label, the icon, the cursor. Moreover, you animate the cursor, you change the colors and font according the state of your text field. That is a lot of work to do and may be there is already a cool library doing what you are looking for.

In both cases, you will need to manage the keyboard to use the keyboard you want (I mean the keyboard for email to fill an email adress for example).

MessuKilkain
  • 76
  • 1
  • 1
  • 11
0

Since the actual text do not appear to overlap the border one way of doing it is to use a custom view class to draw the border and place a NSTextView inside it to do the text entry. Just set the NSTextView to be borderless and match the background color to the view.

If it is only occasional input that is needed and you want a lightweight control you may even consider using a label for the text or simply let an NSString object draw itself with -drawInRext:withAttribures: and grabbing the shared NSTextField and placing it on top for editing. This is how NSTableView for example implement editing.

I have implemented something similar for a tabbed control I have that supports editing the title by double-click (like excel tabs). Here is some code how to get the shared text editor as inspiration. Then you need to manage the edits process through the delegate methods. 

-(BOOL)beginEditLabelInteractiveForTab:(NSInteger)index {

    if (![self.window makeFirstResponder:self.window]) {  // Try to make window first responder to ensure the shared field editor is available.
        return NO;
    };

    NSTextView *tv = (NSTextView *)[self.window fieldEditor:YES forObject:nil]; // take the shared field editor and configure it
    if (!tv) {  // Did not get the field editor
        return NO;
    }

    // Set font and location
    [tv setVerticallyResizable:NO];
    [tv setFont:self.textFont];
    [tv setBackgroundColor:self.selectedFieldColor];
    [tv setTextColor:self.editingColor];
    [tv setEditable:YES];

    editedTab = [self.tabs objectAtIndex:index];
    tv.string = editedTab.label;         // Set text

    CGFloat w = editedTab.coreWidth + BSTeditorExtraPadding; // Slightly larger to fit the cursor
    CGFloat h = (self.tabHeight < (self.preferredTextHeight-(2 * BSTstdYTextOffset))) ? (self.tabHeight-(2 * BSTstdYTextOffset)) : self.preferredTextHeight; // Text height or tab ht - 4 whichever is less
    [tv setFrameSize:NSMakeSize(w,h)];
    // x poistion is set in owner draw method to match location of tab

    tv.textContainer.lineFragmentPadding = 0; // remove padding for alignment with text below

    tv.delegate = self;
    [self addSubview:tv];
    [self.window makeFirstResponder:tv];

    self.labelEditor = tv;  // Store a reference also used as a flag
    return YES;

}

pco494
  • 371
  • 1
  • 9