NSImageViewで画像を表示する

 画像を表示したいというときには、NSImageViewというクラスを使用します。ここではImage Viewに選択した画像を表示させるプログラムをつくります。言語はSwiftを使用します。

UIの設定

 Cocoaアプリケーションのプロジェクトを作成し、ユーザーインターフェースを設計します。はじめに、Image ViewをView Controllerへドラッグ&ドロップで貼り付けます。

imageviewset

 

次に、Image Viewの大きさを画面いっぱいにして、Constraintsを4方向へかけます。

constraints

最後に、プロパティの設定をします。ここでは、Borderを「Photo」にしてImage Viewをみやすくします。今回はこれで終わりますが、いくつかプロパティについて説明します。まず、Editableにすると、ドラッグ&ドロップで画像をImage Viewに表示させることができます。Scalingでは画面いっぱいに画像を拡大・縮小表示させるかを設定します。Alignmentでは、画像の表示位置を指定します。

Main_storyboard

 では、Image Viewのインスタンスを作成します。2画面にして、ドラッグ&ドロップでNSImageViewクラスのインスタンスを追加します。ここでは、インスタンスの名前をImageViewとしています。ViewControllerクラスにつくります。

imageview

画像を選択して表示させる

 では、画像を選択して表示させるプログラムを組みます。ViewControllerのviewDidLoadメソッドへ以下のようにプログラムを追加します。

    @IBOutlet var ImageView: NSImageView!
    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 {
            let img=NSImage(contentsOfURL:openPanel.URL!)
            self.ImageView.image=img
        }
    }

NSOpenPanelクラスを用いて、オープンダイアローグをウインドウができた際に表示させています。そして、画像のパスを取得しています。そして

let img=NSImage(contentsOfURL:openPanel.URL!)
self.ImageView.image=img

で画像を開きImage Viewへ表示させています。プログラムを実行すると以下のように選択した画像が表示されます。

result

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