This question already has answers here:
NSWindow Mac App Store like Title Bar
(3 answers)
Closed 8 years ago.
How does one make a window like in the screen below? As you can see, the titlebar is merged with the window.
As an aside, does anyone know of a good open source application that has this kind of login window, so that I can inspect it and also see find some good alternative UI elements for username/password field and buttons.
If you use INAppStoreWindow you could replicate the effect of the window in your screenshot. As the window in your screenshot has a clearly delineated separation between the login fields and the new account section you could use the ability of INAppStoreWindow to draw a significantly larger title area than normal.
This would allow you to place the login fields in the "title" area of the window and the new account items in the normal area of the window.
With INAppStoreWindow you would want to create a separate view in interface builder that will be added as a titlebar subview that contains the login fields. Then you would use a custom title drawing block to draw the gradient from the top of the window down to the bottom of login custom view.
You would also want to disable the vertical centering of the "traffic control" button (close, minimize, zoom). To achieve the look of the custom controls, you could simply draw the style right into the window and then use borderless controls, which would give you the style you want for the text fields. For the buttons you would want to create custom subclasses to draw them in the styles you want.
For the bottom part of the window you would draw your gradient in the drawRect: method of your window view subclass.
https://github.com/indragiek/INAppStoreWindow is where you will find INAppStoreWindow, I recommend reading the documentation. This window subclass will fully allow you to create the style of window in your screenshot!
Good luck! :)
Related
I want to create an application and chatting is involved. I am currently struggling to format existing controls or to create a control with the following conditions:
a container is docked to the main form's bottom
inside of that container, a button can be used to toggle a chat
component (e.g. text edit) to become either visible or invisible
if visible, the chat component is aligned with the button that was
pressed but does not force a resize on the container of the button
So basically I want to achieve a facebook or google hangouts like chat layout in vb.net that can also scale dynamically according to the current window size. Nevertheless it should always stick to the bottom.
Please keep in mind that this question is not about making the chat work but only the layout/design problem I am facing.
My current approach is the following:
FlowLayoutPanel docked to bottom with buttons
RichEdit as placeholders to simulate the chat component
My current layout
Is there an easier way to do what I want to do?
Set the anchors to the bottom of the page/panel.
On the designer, click the control you want to edit, find the Anchor property and change it to bottom (and left/right/top, whatever you'd like).
I am working on OSX 10.10
I am facing a strange problem of sub view colors getting inverted for HUD Panel.
For example the button when set to default button looks right in Xib file but when executed the look and feel of button is modified by the HUD panel.
I am having a HUD Panel in my Xib file as follows
But when executed the button looses its default button status. It looks as follows
How do I maintain the look and feel of the button after execution. User is not able to judge which action will be the default action due to this look and feel
Try
_defaultButton.appearance = [NSAppearance appearanceNamed:NSAppearanceNameAqua];
Interface Builder follows a set of rules but these rules are not context-dependent. The context I'm talking about is "being displayed in a HUD Panel".
The rule applied in this case is "draw a blueish button in Interface Builder if the button is a default button" even if it's not always what happens (cf. what you're seeing in your second screenshot).
I don't know since which OS X version it's working like that, but now controls in HUD Panels are displayed with a different style (which does not have a special color for default button).
You can confirm this Interface Builder comportment by adding a simple NSTextField in your HUD Panel, it'll draw with a white background in Interface Builder but it will have a black background when running with a gray focus ring.
Interface Builder:
OS X 10.10:
I've never found a way to disable this special styling for controls in HUD Panel but several workarounds (the default button is still working correctly even if not having a special color).
The special styling only occurs when your HUD Panel have a title bar.
self.panel.styleMask = (NSHUDWindowMask | NSTitledWindowMask | NSUtilityWindowMask | NSNonactivatingPanelMask);
If you remove the title bar, it'll display without any special styling:
self.panel.styleMask = (NSHUDWindowMask | NSUtilityWindowMask | NSNonactivatingPanelMask);
At this point, you can implement and draw your own title bar in the panel and mimic the default one. I don't really like this approach because first it's a lot of work for a simple button and the custom styling of controls make them prettier and more easy to read in a HUD Panel.
Another solution was the 'VLC' way. They use HUD Panels but their controls don't have any special styling. They're using BGHUDAppKit which was released when Apple provided HUD Panel without any special controls to go with it. They use it to force the bluish style instead of the greyish one which are now used by default in HUD Panels.
I didn't really like this approach too, I didn't want to add a library for a simple button, library not updated since 2011.
What I end up doing was drawing a custom button (with a simple subclass) for default buttons in a HUD Panel. This solution is quick and allow you to choose the color you want for default button in a HUD Panel (blueish may not be the best for a HUD Panel, your call).
What would be the best approach for creating a Window that is semi-transparent, has round corners and an outline around its border and the arrow, but without the the title bar and buttons.
The window will pop up from the Menu Bar when a use clicks on the menu bar icon.
I'm looking to have an effect similar to the "Applications" and "Downloads" windows:
I guess I will need to do the drawing myself. But I'm wondering what's the best way to do this and whether there is anything already built into Cocoa that can minimize the effort? Or maybe a 3rd party project that has already done that (couldn't find anything exactly like that)?
Thanks.
You can create your window with
- (id)initWithContentRect:(NSRect)contentRect styleMask:(NSUInteger)windowStyle backing:(NSBackingStoreType)bufferingType defer:(BOOL)deferCreation
with a style-mask of NSBorderlessWindowMask which will give an unadorned window. Its how the Dock does its mechanics too.
Note that you must init with this style , you can't change an already init'ed windows style.
Place a custom NSView via the contentView accessor with your desired background custom drawing at the top of the windows view stack.
You might need also to setOpaque to NO
What you are looking for has been done a lot. Too much really.
The classes you want to look into are as follows.
NSStatusItem
This is something that appears in the status bar section of the menu bar to the right side.
NSMenu
If you want this from a menu in the application menus, you'll need to do some clever things with views in menus.
NSWindow
As the other poster notes a borderless window is one way to achieve this.
NSPopover
This is another way. Combined with the above, a fancy technique is to use a clear window called a cover window then, when clicking on the menu or status menu, invoke a popover from a point below that in the clear cover window.
That should be enough to get you started with what you should look into.
Beyond that, peruse the Mac App Store and also look at cocoacontrols.com and GitHub.
I'm working on a iPhone app which shows an mobile webform in a UIWebView. I'm using a default iOS layout with a navigation and tab bar.
The mobile webform is displayed in a UIWebView in the white area. Since the webform has a lot of input fields, we really need as must space for it as possible. Because of this, we are planing to remove the tabs in the bottom. Over time, there will be more tabs/sections, so it is not a solution to just add a button for each section in the left side of the navigation bar. On a iPad a popover could easily be used to handle this.
Is there a standard iOS layout mechanism to handle this change of sections/views without using tabs?
You could do something long the lines of Path or the new Facebook app and have the "table of contents" behind the Navbar and the navbar slides away (along with the child view) to reveal it. When done right (ie smoothly) I think the effect is really cool.
This would also work great as you add more and more options, since the table could just scroll.
Here is a framework that might be you started: http://www.cocoacontrols.com/platforms/ios/controls/iiviewdeckcontroller
I would consider replacing the navigation bar's title with a control that lets you switch between tabs. You can assign the bar's titleView property to a control or a button and it will generally do the right thing.
If you're limited to 2-3 tabs, you could simply use a UISegmentedControl.
If you want more, you could use a button which, when tapped, pops up a view that allows you to select the view you want. This could be a modal table view, or you could slide up a UIPickerView from the bottom of the screen, similar to the keyboard.
I use this technique in an app of my own, screenshots here. Tapping the button cycles between views (in this case, I'm changing the contents of the table cells); tap-and-hold slides up a picker.
Another possibility would be to arrange your different forms on pages in a scroll view with a page control at the bottom, à la Weather. The best option, though, if you’re going to have a particularly long list and want to keep your screen real estate, is probably the FB/Path-style sidebar table.
I ended up using a UIActionSheet but I think it in other situations would be more stylish to use a controller like the IIViewDeckController.
I am trying to make a custom transparent bordered window(without tittle bar) to capture a part of the screen.This window should be resizeable from the bottom right corner area,and could be moved by dragging any of the border lines.This window should be such that, it could also be moved over the apple menu.
I am very new to Cocoa, Can you please suggest me some guide or tutorial to understand creating custom windows and the event handling in custom window.
I have seen the example given in the link below and it was pretty helpful,but I am not able to understand the whole code.
http://cocoawithlove.com/2008/12/drawing-custom-window-on-mac-os-x.html
Please give me pointers to how to make such a window or what all to refer to have sufficient knowledge to be able to do it.
Thanks :)
The reason that you can't go over the Menu Bar is that NSWindow automatically constrains itself to prevent it from covering that area (along with the dock). In your NSWindow subclass, add this:
- (NSRect)constrainFrameRect:(NSRect)frameRect toScreen:(NSScreen *)screen
{
return frameRect;
}
This will override the constrainFrameRect that prevents you from covering the Menu Bar and Dock.