adding NSImageView to NSScrollView

Question

I have an image with a dimension of about 200x2000 pixels. I want to display the image centered in a 200x200 rectangle but I want to be able to move it up and down. Best I can figure I need to add an NSImageView to an NSScrollView but I can't figure out how or even if this is the best way. This is my first day of OS X development...

After some googling I found this from which I was able to come up with this

class MasterViewController: NSViewController {

var Photo: NSImageView!
@IBOutlet var scroll: NSScrollView!

override func viewDidLoad() {
    super.viewDidLoad()

    var imageRect: NSRect
    self.Photo = NSImageView.init()
    self.Photo.image = NSImage.init(named:"horizon")

    imageRect = NSMakeRect(0.0, 0.0, self.Photo.image!.size.width, self.Photo.image!.size.height)
    print("image size", imageRect)
    self.Photo = NSImageView(frame: imageRect)
    self.Photo.setBoundsSize(NSSize(width: imageRect.width, height: imageRect.height))
    self.Photo.imageScaling = NSImageScaling.ScaleNone


    self.scroll.setFrameSize(NSSize(width: imageRect.width,height: imageRect.width))
    self.scroll.hasVerticalScroller = true
    self.scroll.hasHorizontalScroller = true
    self.Photo.setFrameSize(CGSize(width: imageRect.width,height: imageRect.width))
    self.scroll.documentView = self.Photo
    //print(self.scroll.documentView?.frame)

    //self.scroll.setC contentSize = NSSize(width: 200, height: 2000)
    //self.Photo.image = NSImage.init(named:"bezel")
    //self.scroll.addSubview(self.Photo)

}

but I can't get the image to show up inside the scrollview

score 2 · Answer 1 · answered Aug 28 '17 at 10:24

@lusher00: in your example, you initialize twice self.Photo, first with an init() and then with (frame: imageRect), this probably explains why image don't show up.

You could set the imageView as the documentView of the NSScrollView, as below:

        @IBOutlet var scrollView: NSScrollView!


        var imageRect: NSRect
        // Initialize below the imageView image with appropriate content (to adapt)
        imageView.image = NSImage.init(named:"horizon")
        imageRect = NSMakeRect(0.0, 0.0, imageView.image!.size.width, imageView.image!.size.height)
        imageView.setFrameSize(CGSize(width: imageRect.width, height: imageRect.height))
        imageView.imageScaling = NSImageScaling.ScaleNone
        scrollView.documentView = imageView
        scrollView.hasVerticalScroller = true
        scrollView.hasHorizontalScroller = true

score -1 · Answer 2 · answered Nov 13 '15 at 23:30

Just add the image view as a subview of the scrollview.

scrollView.addSubview(imageView)

You can set the position of the imageview, which will position it inside the scrollview.

The scrollview needs to know how large its content size is to enable scrolling of that area. So dont forget to update the contentSize property of the scrollview.

E.g. adding the imageView of 200x200 to the scrollView with a frame of 200x200. Setting the contentSize to 400x400 and calling imageView.center = scrollView.center, will center the image and allow some scrolling around the image, within the 200x200 visible frame of the scrollview.

You can also get the current offset of the scrollView by checking contentOffset.

If you need to track as the user scrolls, you can use scrollViewDidScroll. Check the docs for the scrollview for some other options.

I have essentially done all that so far except setting contentSize. However, contentSize is a get-only property. I still have a centered image I can not scroll — lusher00, Nov 14 '15 at 01:20
There is a documentView, sorry, I was explaining from iOS terms. Check this http://stackoverflow.com/questions/3457926/contentsize-and-contentoffset-equivalent-in-nsscroll-view — some_id, Nov 14 '15 at 01:27

adding NSImageView to NSScrollView

2 Answers2