NSPopOver & NSViewController - Drag to resize - macos

I am making a MenuBar app for which I am using NSPopOver. The problem is that NSPopover uses NSViewController as a contentViewController, whose size gets fixed. My requirement is to make the size of NSViewController flexible i.e just like NSWindowController(set the minimum size and maximum depends upon the total screen size). In simple words how to change the size of NSViewController(NSPopOver) when user drags it. I am new to OS X programming.

I finally got it working by using Mouse Events. Just need to monitor the
override func mouseDown(theEvent: NSEvent) {}
override func mouseDragged(theEvent: NSEvent) {}
events, and reset the content size of the popOver.
Hope this would be helpful to someone one day.
EDIT
override func mouseDragged(theEvent: NSEvent) {
var currentLocation = NSEvent.mouseLocation()
println("Dragged at : \(currentLocation)")
var newOrigin = currentLocation
let screenFrame = NSScreen.mainScreen()?.frame
var windowFrame = self.view.window?.frame
newOrigin.x = screenFrame!.size.width - currentLocation.x
newOrigin.y = screenFrame!.size.height - currentLocation.y
println("the New Origin Points : \(newOrigin)")
// Don't let window get dragged up under the menu bar
if newOrigin.x < 450 {
newOrigin.x = 450
}
if newOrigin.y < 650 {
newOrigin.y = 650
}
println("the New Origin Points : \(newOrigin)")
let appDelegate : AppDelegate = NSApplication.sharedApplication().delegate as! AppDelegate
appDelegate.popover.contentSize = NSSize(width: newOrigin.x, height: newOrigin.y)
}
This is how i tracked the mouse event. On Mouse drag just calculated the current position and the new position(To the point where user has dragged), then checked if the point is smaller then my default size for the Popover i.e. (450, 650) in this case. Once the point has been calculated, just set the size of the popover.
This is just a proposed way. There must be something better then this, but for time being this is what I did.

I had the same need, and thanks to the helpful comments above, I created PopoverResize. This allows a user to resize a menubar NSPopover. It includes cursors for the edges as well.
https://github.com/dboydor/PopoverResize

Here is an answer that handles only vertical, but not horizontal resizing of an NSPopover.
override func mouseDragged(with theEvent: NSEvent) {
let currentLocation = NSEvent.mouseLocation()
let screenFrame = NSScreen.main()?.frame
var newY = screenFrame!.size.height - currentLocation.y
if newY < MIN_HEIGHT {
newY = MIN_HEIGHT
}
if newY > MAX_HEIGHT {
newY = MAX_HEIGHT
}
let appDelegate : AppDelegate = NSApplication.shared().delegate as! AppDelegate
appDelegate.popover.contentSize = NSSize(width: FIXED_WIDTH, height: newY)
}

Related

Swift 2 collection view extension for horizontal scroll to vertical

I've got this extension for my collection view that makes horizontal scroll but I want to change it on vertical scroll??
extension viewRe : UIScrollViewDelegate
{
func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>)
{
let layout = self.recipesCollView?.collectionViewLayout as! UICollectionViewFlowLayout
let cellWidthIncludingSpacing = layout.itemSize.width + layout.minimumLineSpacing
var offset = targetContentOffset.memory
let index = (offset.x + scrollView.contentInset.left) / cellWidthIncludingSpacing
let roundedIndex = round(index)
offset = CGPoint(x: roundedIndex * cellWidthIncludingSpacing - scrollView.contentInset.left, y: -scrollView.contentInset.top)
targetContentOffset.memory = offset
}
}
With this extension I'm trying to make the cells to stick to the TOP of the view even when he scrolls because the paging is enabled. So whenever the user scrolls i would like the cell to stick to the top and so on when the user scrolls.
#donnyWals is right. If you are using a UICollectionView just change its UICollectionViewFlowLayout
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = . Horizontal
let collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)
or if you have an existent UICollectionView
if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
layout.scrollDirection = .Horizontal
}
Follow the official API:
UICollectionView
UICollectionViewFlowLayout

Replace NSWindow contentViewController with new ViewController with same Window Size

I need, on button click, to replace a NSWindow.contentViewController with new ViewController. To do this I wrote following code:
let g = GameViewController()
if self.window!.styleMask & NSFullScreenWindowMask != NSFullScreenWindowMask {
let ws = NSScreen.mainScreen()?.frame.size
let width : CGFloat = g.view.frame.width
let height : CGFloat = g.view.frame.height
let frame = NSRect(origin: NSMakePoint(((ws?.width)!-width)/2, ((ws?.height)!-height)/2), size: CGSize(width:width, height:height))
self.window?.setFrame(frame, display: true, animate: true)
}
self.window?.contentViewController = g
When NSWindow is not in FullScreen mode, this code works good. While, when NSWindow is in FullScreen mode, the GameViewController is set with his default size and not change is size until occurs a resize event.
How can I instantiate NSViewController in order to occupy all window space?
If you are using storyboard:
let storyboard = NSStoryboard(name: "Main", bundle: nil)
if let homeViewController = (storyboard.instantiateControllerWithIdentifier("HomeViewController") as? NSViewController){
let windowController = NSWindowController(window: Constants.appDelegate!.window)
windowController.contentViewController = homeViewController
windowController.showWindow(Constants.appDelegate!.window)
}
Hope this will help you. Happy Codding

NSStatusItem fullscreen issues

I'm making a statusbar app that displays an NSPopover when the NSStatusItem is clicked, like this:
I have added the ability to resize the popover by dragging on the edges, by subclassing the popover's view like this:
class CMView: NSView {
let tolerance : CGFloat = 10
var state = false
override func mouseDown(theEvent: NSEvent) {
let point = self.convertPoint(theEvent.locationInWindow, fromView: nil)
if (point.y <= tolerance) {
state = true
}
}
override func mouseDragged(theEvent: NSEvent) {
if (state) {
let point = self.convertPoint(theEvent.locationInWindow, fromView: nil)
self.frame = NSRect(
x: self.frame.origin.x,
y: self.frame.origin.y,
width: self.frame.size.width,
height: self.frame.size.height-point.y)
popover.contentSize = self.frame.size
}
}
override func mouseUp(theEvent: NSEvent) {
state = false
}
}
This only works if the desktop isn't in full screen. If I try to resize it in fullscreen, it simply doesn't work, and the popover arrow disappears mysteriously.
It seems like the popover isn't redrawing when invoked in a fullscreen environment. Is there any way around this problem?
Here at WWDC. Asking the same question. You have to have an app that's an UIElement app - meaning no dock icon, no main menu.

Resizing NSWindow to match view controller size in storyboard

I am working on Xcode 6.1.1 on OSX 10.10. I am trying out storyboards for Mac apps. I have a NSTabViewController using the new NSTabViewControllerTabStyleToolbar tabStyle and it is set as the default view controller for the window controller. How do I make my window resize according to the current selected view controller?
Is it possible to do entirely in Interface Builder?
Here is what my storyboard looks like:
The auto layout answer is half of it. You need to set the preferredContentSize in your ViewController for each tab to the fitting size (if you wanted the tab to size to the smallest size satisfying all constraints).
override func viewWillAppear() {
super.viewWillAppear()
preferredContentSize = view.fittingSize
}
If your constraints are causing an issue below try first with a fixed size, the example below sets this in the tab item's view controller's viewWillAppear function (Swift used here, but the Objective-C version works just as well).
override func viewWillAppear() {
super.viewWillAppear()
preferredContentSize = NSSize(width: 400, height: 280)
}
If that works, fiddle with your constraints to figure out what's going on
This solution for 'toolbar style' tab view controllers does animate and supports the nice crossfade effect. In the storyboard designer, add 'TabViewController' in the custom class name field of the NSTabViewController. Don't forget to assign a title to each viewController, this is used as a key value.
import Cocoa
class TabViewController: NSTabViewController {
private lazy var tabViewSizes: [String : NSSize] = [:]
override func viewDidLoad() {
// Add size of first tab to tabViewSizes
if let viewController = self.tabViewItems.first?.viewController, let title = viewController.title {
tabViewSizes[title] = viewController.view.frame.size
}
super.viewDidLoad()
}
override func transition(from fromViewController: NSViewController, to toViewController: NSViewController, options: NSViewController.TransitionOptions, completionHandler completion: (() -> Void)?) {
NSAnimationContext.runAnimationGroup({ context in
context.duration = 0.5
self.updateWindowFrameAnimated(viewController: toViewController)
super.transition(from: fromViewController, to: toViewController, options: [.crossfade, .allowUserInteraction], completionHandler: completion)
}, completionHandler: nil)
}
func updateWindowFrameAnimated(viewController: NSViewController) {
guard let title = viewController.title, let window = view.window else {
return
}
let contentSize: NSSize
if tabViewSizes.keys.contains(title) {
contentSize = tabViewSizes[title]!
}
else {
contentSize = viewController.view.frame.size
tabViewSizes[title] = contentSize
}
let newWindowSize = window.frameRect(forContentRect: NSRect(origin: NSPoint.zero, size: contentSize)).size
var frame = window.frame
frame.origin.y += frame.height
frame.origin.y -= newWindowSize.height
frame.size = newWindowSize
window.animator().setFrame(frame, display: false)
}
}
The window containing a toolbar style tab view controller does resize without any code if you have auto layout constraints in your storyboard tab views (macOS 11.1, Xcode 12.3). I haven't tried other style tab view controllers.
If you want to resize with animation as in Finder, it is sufficient to add one override in your tab view controller. It will resize the window with system-calculated resize animation time and will hide the tab view during resize animation:
class PreferencesTabViewController: NSTabViewController {
override func transition(from fromViewController: NSViewController, to toViewController: NSViewController, options: NSViewController.TransitionOptions = [], completionHandler completion: (() -> Void)? = nil) {
guard let window = view.window else {
super.transition(from: fromViewController, to: toViewController, options: options, completionHandler: completion)
return
}
let fromSize = window.frame.size
let toSize = window.frameRect(forContentRect: toViewController.view.frame).size
let widthDelta = toSize.width - fromSize.width
let heightDelta = toSize.height - fromSize.height
var toOrigin = window.frame.origin
toOrigin.x += widthDelta / 2
toOrigin.y -= heightDelta
let toFrame = NSRect(origin: toOrigin, size: toSize)
NSAnimationContext.runAnimationGroup { context in
context.duration = window.animationResizeTime(toFrame)
view.isHidden = true
window.animator().setFrame(toFrame, display: false)
super.transition(from: fromViewController, to: toViewController, options: options, completionHandler: completion)
} completionHandler: { [weak self] in
self?.view.isHidden = false
}
}
}
Please adjust closure syntax if you are using Swift versions older than 5.3.
Use autolayout. Set explicit size constraints on you views. Or once you have entered the UI into each tab view item's view set up the internal constraints such that they force view to be the size you want.

NSPopUpButton arrow color

Is there a way to customize the color of a NSPopUpButton arrow? I've looked around but I've not found an answer yet
I really dont think there is an "easy" way to do this. If you look at the API description, it even states that it doesnt respond to the setImage routine. I have done quite a bit of work sub-classing button objects, etc... and I think this is where you would have to go in order to do what you are asking.
Like too many of these controls, I did it by subclassing NSPopupButton(Cell) and then doing all my own drawing in drawRect...I cheated a little though, and used an image do the actual triangle rather than trying to do it via primitives.
- (void)drawRect:(NSRect)dirtyRect
{
//...Insert button draw code here...
//Admittedly the above statement includes more work than we probably want to do.
//Assumes triangleIcon is a cached NSImage...I also make assumptions about location
CGFloat iconSize = 6.0;
CGFloat iconYLoc = (dirtyRect.size.height - iconSize) / 2.0;
CGFloat iconXLoc = (dirtyRect.size.width - (iconSize + 8));
CGRect triRect = {iconXLoc, iconYLoc, iconSize, iconSize};
[triangleIcon drawInRect:triRect];
}
i did this and its worked for me.
(void)drawImageWithFrame:(NSRect)cellFrame inView:(NSView *)controlView
{
NSPopUpButton *temp = (NSPopUpButton*)controlView;
NSString *strtile = temp.title;
AppDelegate *appdel = (AppDelegate*)[NSApplication sharedApplication].delegate;
NSFont *font = [NSFont systemFontOfSize:13.5];
NSSize size = NSMakeSize(40, 10);// string size
CGRect rect = controlView.frame;
rect = CGRectMake((size.width + temp.frame.size.width)/2, rect.origin.y, 8, 17);
[self drawImage:[NSImage imageNamed:#"icon_downArrow_white.png"] withFrame:rect inView:self.
}
I have changed arrow color by using "False Color" filter without using any image. So far it is the easiest way to change cocoa control to me.
class RLPopUpButton: NSPopUpButton {
init() {
super.init(frame: NSZeroRect, pullsDown: false)
addFilter()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
addFilter()
}
func addFilter() {
let colorFilter = CIFilter(name: "CIFalseColor")!
colorFilter.setDefaults()
colorFilter.setValue(CIColor(cgColor: NSColor.black.cgColor), forKey: "inputColor0")
colorFilter.setValue(CIColor(cgColor: NSColor.white.cgColor), forKey: "inputColor1")
// colorFilter.setValue(CIColor(cgColor: NSColor.yellow.cgColor), forKey: "inputColor0")
// colorFilter.setValue(CIColor(cgColor: NSColor.property.cgColor), forKey: "inputColor1")
self.contentFilters = [colorFilter]
}
}
Swift 5
In interface builder, remove default arrow setting.
Then, apply this subclass for cell, which will add an NSImageView to the right side of the NSPopUpButton.
This way you have complete control over what you set as your custom button and how you position it.
import Cocoa
#IBDesignable class NSPopUpButtonCellBase: NSPopUpButtonCell {
let textColor = NSColor(named: "white")!
let leftPadding: CGFloat = 16
let rightPadding: CGFloat = 30
override func awakeFromNib() {
super.awakeFromNib()
let imageView = NSImageView()
imageView.image = NSImage(named: "ic_chevron_down")!
controlView!.addSubview(imageView)
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.widthAnchor.constraint(equalToConstant: CGFloat(20)).isActive = true
imageView.heightAnchor.constraint(equalToConstant: CGFloat(20)).isActive = true
imageView.trailingAnchor.constraint(equalTo: controlView!.trailingAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: controlView!.centerYAnchor).isActive = true
}
// overriding this removes the white container
override func drawBezel(withFrame frame: NSRect, in controlView: NSView) {
}
// overriding this allows us to modify paddings to text
override func titleRect(forBounds cellFrame: NSRect) -> NSRect {
// this gets rect, which has title's height, not the whole control's height
// also, it's origin.y is such that it centers title
let processedTitleFrame = super.titleRect(forBounds: cellFrame)
let paddedFrame = NSRect(
x: cellFrame.origin.x + leftPadding,
y: processedTitleFrame.origin.y,
width: cellFrame.size.width - leftPadding - rightPadding,
height: processedTitleFrame.size.height
)
return paddedFrame
}
// overriding this allows us to style text
override func drawTitle(_ title: NSAttributedString, withFrame frame: NSRect, in controlView: NSView) -> NSRect {
let attributedTitle = NSMutableAttributedString.init(attributedString: title)
let range = NSMakeRange(0, attributedTitle.length)
attributedTitle.addAttributes([NSAttributedString.Key.foregroundColor : textColor], range: range)
return super.drawTitle(attributedTitle, withFrame: frame, in: controlView)
}
}

Resources