ScrollViewに画像を表示させる

2015年2月21日：OS X

　前回、Image Viewに画像を表示させるプログラムを作成しました。しかし、ウインドウのサイズが小さいと画像が表示されなかったり、縮小表示されてしまいます。ここでは、スクロールをつけて小さい画面でも好きな場所を見える用にします。そのためにScroll Viewを使用します。言語はSwiftです。

UIの設定

　Cocoaアプリケーションを作成し、ユーザーインターフェースを設計します。はじめに、Scroll ViewをView Cotnrollerへはります。

dragdrop

画面いっぱいにして、Constraintsを４方向設定します。

constraints

最後に２画面にしてNSScrollViewのインスタンスを作成します。ここでは、ScrollViewという名前のインスタンスを作成しています。場所はViewControllerクラスの中です。

scrollview

画像を表示させる

　以下のようにコーディングして画像を表示させるプログラムを作ります。

    @IBOutlet var ScrollView: NSScrollView!
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        var openPanel=NSOpenPanel()
        openPanel.allowsMultipleSelection = false
        openPanel.canChooseDirectories = false
        openPanel.canCreateDirectories = false
        openPanel.canChooseFiles = true
        var result=openPanel.runModal()
        if result == NSFileHandlingPanelOKButton {
            //NSImageの作成
            let img=NSImage(contentsOfURL:openPanel.URL!)

            //NSImageViewの作成
            let width=img?.size.width
            let height=img?.size.height
            var imageSize:NSRect=NSMakeRect(0.0,0.0,CGFloat(width!),CGFloat(height!))
            var theImageView:NSImageView=NSImageView(frame:imageSize)
            theImageView.image=img

            //NSImageViewをNSScrollViewへ表示
            self.ScrollView.hasHorizontalScroller=true  //水平スクロールの表示
            self.ScrollView.hasVerticalScroller=true    //垂直スクロールの表示
            self.ScrollView.documentView=theImageView
        }
    }

　ウインドウが完成するとオープンダイアローグが開き、画像を選択できます。そして、ScrollViewへ選択した画像を表示させています。内容ですが、NSScrollViewへNSImageViewを表示することでスクロールを実現しています。

　実行すると以下のようになります。

Result

画面を小さくすると

Result2

となります。ここではわかりませんが、スクロールできます。

画像を左上へ表示させる

　画面が大きいと左下に表示されています。これを左上へ表示させるようにプログラムを変更します。プロパティを変更したら簡単にできそうなものですが、そうなってないです。左上にするにはNSImageViewのメソッドを書き換える必要があります。そのためにNSImageViewを継承して、メソッドを書き換えたサブクラスをつくります。そのサブクラスの名前をここではNSImageViewRとしておきます。以下のコードをViewControllerの上に追加します(File->New->File->Cocoa ClassでNSImageViewを選んでも以下のハイライトを加えてもOKです)。

class NSImageViewR: NSImageView {

    override func drawRect(dirtyRect: NSRect) {
        super.drawRect(dirtyRect)

        // Drawing code here.
    }
    override var flipped:Bool{
        return true
    }
}

そして以下のように先ほど書いたコードを書き換えます。

            //NSImageViewの作成
            let width=img?.size.width
            let height=img?.size.height
            var imageSize:NSRect=NSMakeRect(0.0,0.0,CGFloat(width!),CGFloat(height!))
            var theImageView:NSImageViewR=NSImageViewR(frame:imageSize)
            theImageView.image=img

実行すると以下のようになります。

Result

著者：安井 真人(やすい　まさと)

TOP