第4回目 Cocoaで画像読み込みと表示

CocoaでPNGファイルを読み込んで画面に表示します。
他にはJPGファイルも読み込んで表示ができます。
picture_draw01.png
まずXcodeを起動してメニューの「ファイル」-「新規プロジェクト」を選択する。
そしてCocoa Applicationを選んで「次へ」ボタンを押す。
picture_draw02.png
プロジェクト名を決めて「完了」ボタンを押す。
今回はpicture_drawというプロジェクト名にした。
picture_draw03.png
pictute_drawのプロジェクトのフォルダに表示したいpngファイルをコピーする。
今回はsample.pngを使用。
picture_draw04.png
ファイルとグループのResourcesを右クリックしてメニューを出し「追加」-「既存のファイル」を選ぶ。
picture_draw05.png
sample.pngを選んで「追加」ボタンを押す。

プログラム作成

以下のプログラムを入力する。

PictureView.h

#import <Cocoa/Cocoa.h>
@interface PictureView : NSImageView {
}
@end

PictureView.m

#import "PictureView.h"
@implementation PictureView
-(id)initWithFrame: (NSRect) frameRect
{
	NSBundle *thisBundle;
	NSString *filepath;
	NSImage *img;
	[ super initWithFrame: frameRect ];
	[ self setImageFrameStyle: NSImageFrameGrayBezel ];
	thisBundle = [ NSBundle mainBundle ];
	filepath = [ thisBundle pathForResource:@"sample" ofType:@"png" ];
	img = [ [ NSImage alloc ] initWithContentsOfFile: filepath ];
	[ self setImage: img ];
	return self;
}
@end
NSBundleはリソースに登録したファイルを管理するクラスのようです。
NSImageは画像の管理をするクラスのようです。
はっきり言って何をしているか良くわかりませんが
NSBundleでPNGファイルの場所を調べてNSImageに読み込んでいると言うことのようです。
picture_draw06.png
グループとファイルのOther sourcesを右クリックして「追加」-「既存のファイル」を選びます。
picture_draw07.png
PictureView.h、PictureView.mを選んで「追加」ボタンを押します。
picture_draw08.png
何も変更せずに「追加」ボタンを押します。

Interface Builderでの作業

picture_draw09.png
XcodeのファイルとグループにあるMainMenu.nibをダブルクリックする。
するとInterface Builderが起動する。
picture_draw10.png
ライブラリウインドウのViews & CellsにあるCustom Viewを選ぶ。
picture_draw11.png
作成中のWindowに上記で選んだCustom Viewをドラッグアンドドロップする。
またCustom Viewの大きさを調整する。
picture_draw12.png
Class identityを先ほど作成したPictureViewに変更する。

実行結果

picture_draw13.png

前に戻る


添付ファイル: filepicture_draw13.png 190件 [詳細] filepicture_draw12.png 191件 [詳細] filepicture_draw10.png 185件 [詳細] filepicture_draw11.png 187件 [詳細] filepicture_draw09.png 199件 [詳細] filepicture_draw08.png 190件 [詳細] filepicture_draw07.png 203件 [詳細] filepicture_draw06.png 195件 [詳細] filepicture_draw05.png 204件 [詳細] filepicture_draw04.png 190件 [詳細] filepicture_draw03.png 191件 [詳細] filepicture_draw02.png 196件 [詳細] filepicture_draw01.png 191件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-12-16 (日) 15:25:52 (2042d)