txmy

前ページ
次ページ

iPhoneアプリ開発日記⑥保存されている画像を表示する２

こんにちはー
今日は昨日の続きです．

昨日はOpenボタンを作りましたね．

昨日試したときにはどうやらOpenボタンの先が作られてなかったみたいなので
今日は続きをやっていこうとおもいます．

今日はInterface Builderを使いません．

ImageViewerViewController.hを次のようにします．

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

#import

@class ImageViewerView;

@interface ImageViewerViewController :

UIViewController
<
UIActionSheetDelegate,
UIImagePickerControllerDelegate,
UINavigationControllerDelegate
>

{
UIToolbar *_toolbar;

UIScrollView *_scrollView;

ImageViewerView *_imageView;

BOOL _fit;

}

@property (retain, nonatomic) IBOutlet UIToolbar *toolbar;
@property (retain, nonatomic) IBOutlet UIScrollView *scrollView;
@property (retain, nonatomic) IBOutlet ImageViewerView *imageView;
@property (getter=isFit) BOOL fit;

- (IBAction)openImage:(id)sender;

- (CGSize)calcMinimumViewSize;
- (float)calcMinimumZoomScale;
- (void)makeFit:(BOOL)isFit;
- (void)updateZoomScale;
- (void)updateFrameWithScale:(float)scale;

@end

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

次にImageViewerViewController.mを次のようにします．

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

#import "ImageViewerViewController.h"
#import "ImageViewerView.h"

static NSString *kSampleImageFileName = @"SampleImage.jpg";

static NSString *kPhotoLibrary = @"PhotoLibrary";

static NSString *kCancel = @"Cancel";

static const float kMaximumZoomScale = 2.0f;

@implementation ImageViewerViewController

@synthesize scrollView = _scrollView;

@synthesize imageView = _imageView;

@synthesize fit = _fit;

@synthesize toolbar = _toolbar;

- (void)dealloc
{
[_toolbar release];
[_scrollView release];
[_imageView release];
[super dealloc];
}

// Nibファイルからロード完了時に呼ばれるメソッド
- (void)viewDidLoad
{
[super viewDidLoad];

UIImage *image = [UIImage imageNamed:kSampleImageFileName];

[self.imageView setImage:image];

[self updateZoomScale];

[self makeFit:YES];

}

- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}

- (IBAction)openImage:(id)sender
{
UIActionSheet *sheet;

NSString *cancelStr = NSLocalizedString(kCancel, @"");
NSString *photoLibraryStr = NSLocalizedString(kPhotoLibrary, "");

sheet = [[UIActionSheet alloc] initWithTitle:nil
delegate:self
cancelButtonTitle:cancelStr
destructiveButtonTitle:nil
otherButtonTitles:nil];

if ([UIImagePickerController isSourceTypeAvailable:
UIImagePickerControllerSourceTypePhotoLibrary])
{
[sheet addButtonWithTitle:photoLibraryStr];
}

[sheet showFromToolbar:[self toolbar]];
[sheet release];
}

- (void)actionSheet:(UIActionSheet *)actionSheet
clickedButtonAtIndex:(NSInteger)buttonIndex
{

if (buttonIndex != 0)
{
UIImagePickerController *picker;
picker = [[UIImagePickerController alloc] init];

picker.sourceType =
UIImagePickerControllerSourceTypePhotoLibrary;

picker.delegate = self;

[self presentModalViewController:picker
animated:YES];

}
}

- (void)imagePickerController:(UIImagePickerController *)picker
didFinishPickingMediaWithInfo:(NSDictionary *)info
{
UIImage *img;
img = [info objectForKey:UIImagePickerControllerOriginalImage];

[self.imageView setImage:img];

[self updateZoomScale];

[self makeFit:YES];

[self.imageView setNeedsDisplay];

[picker dismissModalViewControllerAnimated:YES];
}

- (CGSize)calcMinimumViewSize
{
// return self.scrollView.frame.size;
CGSize scrollViewSize = self.scrollView.frame.size;
CGSize toolbarSize = self.toolbar.frame.size;
return CGSizeMake(scrollViewSize.width,
scrollViewSize.height - toolbarSize.height);
}

- (float)calcMinimumZoomScale
{
UIImage *image = self.imageView.image;
if (!image)
{
return 1.0f;
}

CGSize imageSize = image.size;

CGSize minViewSize = [self calcMinimumViewSize];

float scaleX = minViewSize.width / imageSize.width;
float scaleY = minViewSize.height / imageSize.height;

return (scaleX < scaleY ? scaleX : scaleY);
}

- (void)makeFit:(BOOL)isFit
{
if (isFit)
{
self.scrollView.zoomScale = [self calcMinimumZoomScale];

CGRect newFrame;
newFrame.origin = CGPointMake(0, 0);
newFrame.size = [self calcMinimumViewSize];

[self.imageView setFrame:newFrame];

[self.scrollView setContentSize:newFrame.size];

UIViewAutoresizing newMask;
newMask = (UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleHeight);
[self.imageView setAutoresizingMask:newMask];
}
else
{
UIViewAutoresizing newMask;
newMask = (UIViewAutoresizingFlexibleRightMargin |
UIViewAutoresizingFlexibleBottomMargin);
[self.imageView setAutoresizingMask:newMask];
}

[self setFit:isFit];
}

- (void)updateZoomScale
{
float f = [self calcMinimumZoomScale];

if (f > 1.0f) f = 1.0f;

[self.scrollView setMaximumZoomScale:kMaximumZoomScale];
[self.scrollView setMinimumZoomScale:f];

}

- (void)updateFrameWithScale:(float)scale
{
if (scale == self.scrollView.minimumZoomScale)
{
[self makeFit:YES];
}
else
{
if (self.isFit)
{
[self makeFit:NO];
}

UIImage *image = self.imageView.image;
if (!image)
return;

CGSize imageSize = image.size;

imageSize = CGSizeMake(round(imageSize.width * scale),
round(imageSize.height * scale));

CGSize minSize = [self calcMinimumViewSize];
if (imageSize.width < minSize.width)
imageSize.width = minSize.width;
if (imageSize.height < minSize.height)
imageSize.height = minSize.height;

CGRect newFrame;
newFrame.origin = CGPointMake(0, 0);
newFrame.size = imageSize;

[self.imageView setFrame:newFrame];

[self.scrollView setContentSize:newFrame.size];
}
}

- (void)didRotateFromInterfaceOrientation:
(UIInterfaceOrientation)orientation
{
[super didRotateFromInterfaceOrientation:orientation];

[self updateZoomScale];

if (self.isFit)
{
[self makeFit:YES];
}
else
{
[self updateFrameWithScale:self.scrollView.zoomScale];
}

}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView
withView:(UIView *)view
atScale:(float)scale
{
[self updateFrameWithScale:scale];
}

@end

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

ここまでできたら保存してビルトと実行してみます．

できました！

本に書いてあるとおりに一度組み立ててからここを換えたらどうなるかな？とかいろいろ試行錯誤してみるのもおもしろいですね．

ではでは今日はこのへんでー

あでゆー

iPhoneアプリ開発日記⑤保存されている画像を表示する

今日もやっていきますよー

いつもどおりコレ参考にしてます

基礎から学ぶ iPhoneアプリ開発/林晃

￥3,150
Amazon.co.jp

昨日は画像を表示させるだけのアプリを作りましたが，
今度はiPhoneとかに保存されてる好きな画像ファイルを表示させてみます．

まずは画像を選択する操作をできるようにしないといけませんね．

やってみます．

Xcodeひらいて昨日作ったプロジェクトを選択します．
Classesの中のImageViewerViewController.hの中身を次のようにします．

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

#import

@interface ImageViewerViewController : UIViewController {

UIToolbar *_toolbar;

}

@property (retain, nonatomic) IBOutlet UIToolbar *toolbar;

- (IBAction)openImage:(id)sender;

@end

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

一回ここで
保存します．

次はImageViewerViewController.mの中身を次のようにします．

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

#import "ImageViewerViewController.h"
#import "ImageViewerView.h"

static NSString *kSampleImageFileName = @"SampleImage.jpg";

@implementation ImageViewerViewController

@synthesize toolbar = _toolbar;

- (void)dealloc
{
[super dealloc];
}

- (void)viewDidLoad
{
[super viewDidLoad];
UIImage *image = [UIImage imageNamed:kSampleImageFileName];
[(ImageViewerView *)[self view] setImage:image];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}

@end

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

またここで保存します．

次に
ResourcesのImageViewerViewController.xibをダブルクリック．

ImageViewerViewってグレーのヤツが表示されてなかったら
ImageViewerViewController.xibの中のそれをダブルクリック．

Libraryウインドウの中にある「Toolbar」をグレーのウインドウの下の方にドラッグアンドドロップ．

上の画像のようになったら
今ドラッグアンドドロップしてできたToolbarのItemって書かれたボタンをクリック．

次に
Inspectorウインドウの上のとこの一番左のアイコン（Attributes）を選択します．

Titleの右側のItemって文字を消してOpenって入力します．

ツールバーのItemボタンがOpenになりました．

次に
Controllキーを押しながらOpenボタンをドラッグしようとすると線が伸びますから
ImageViewerViewController.xibウインドウのなかのFile'sOwnerまで伸ばしてドロップ．

すると
なんか出てくるからopenImage:を選択．

今度は逆に
File'sOwnerからToolbarへ線を伸ばしてドロップ

こんどはtoolbarを選択．

FileからSaveで保存して
Interface BuilderからQuit　Interface Builderを選択して終了する．

これで開くためのToolbarが完成しました．

今日はここらへんで終りにします．

この状態でビルトと実行をやってみると
まえと同じ画像が表示され，それに加えて下の方にToolbarが表示されていますが，
Openボタンを押してもアプリが終了させられてしまいます．

明日はこのOpenボタンを押した先を作っていきます．

それではまた！

あでゅー

iPhoneアプリ開発日記④画像を表示させてみる（続き）

大学今日試験でした～
微分積分学
難しかった…

それはそうと２月ですね．

もう今年も一ヶ月たったのかと思うと焦りが出てきます．

できるだけ日々を充実させるべく頑張ります．

さて，
今日は
昨日に引き続き
画像ビューアを作ります．

昨日はImageViewerView.mを完成させました．
つぎはClassesの中にあるImageViewerViewController.mを編集します．

ImageViewerViewController.mの中身を昨日同様に下のようにします．

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

#import "ImageViewerViewController.h"
#import "ImageViewerView.h"

static NSString *kSampleImageFileName = @"SampleImage.jpg";

@implementation ImageViewerViewController

- (void)dealloc
{
[super dealloc];
}

- (void)viewDidLoad
{
[super viewDidLoad];
UIImage *image = [UIImage imageNamed:kSampleImageFileName];
[(ImageViewerView *)[self view] setImage:image];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}

@end
ーーーーーーーーーーーーーーーーーーーーーーーーーーー

で，ファイルから保存します．

左側のグループとファイルの中にあるResourcesの中にあるImageViewerViewController.xibをダブルクリック

いっぱいウインドウが出てきますがViewって書かれたウインドウを選択してください．グレーのやつです．グレーのとこをクリックしてください．
何も起きないかもしれないですけどとりあえずそうしてください．

Inspectorウインドウの右上のIdentityを選択します．

Inspectorウインドウは普通は最初から表示されてるはずですが
なかった場合は上にあるToolsのInspectorから起動できます．

上の方の
Classの文字の右側をImageViewerViewにしてFileからSaveを押して保存します．

保存したらInterface BuilderからQuit　Interface Builderをクリックして終了します．

これで読み込ませる機能も完成した様です．

でも
このままだと読み込ませる画像ファイルがありません．

とゆうことで画像ファイルを登録します．

読み込ませる画像の名前は今回はSampleImage.jpgです．

まずは

左側のグループとファイルのResourcesをクリック．
上のプロジェクトからプロジェクトに追加をクリック．

追加するファイルとして
SampleImage.jpg
を選択し，追加をクリックすると以下のような画面が出てくるので
一番上のとこにチェックをいれて追加をクリック．

これで登録完了です．

ResourcesのなかにSampleImage.jpgができてたらうまくいってます．

さて実験してみましょう．

あ，僕今回，ネットで拾った画像を利用させていただきました．
まずかったらいってください．

ビルトと実行をクリックしてみます．

できました！

よかったよかった

それでは今日もこのへんで

また明日！

あでゆ～

iPhoneアプリ開発日記③画像を表示させてみる

今日も参考はこちら
基礎から学ぶ iPhoneアプリ開発/林晃

￥3,150
Amazon.co.jp

遊んでいるうちにプログラミングというものがなんとなく分かってきた気がします．

たぶんこのiOS SDKっていうのはすごく便利なツールなんだろうなーって感じてきています．

さあ
今日は画像を表示させる画像ビューアを作ってみます．

まず，いつもどおりXcodeを起動して新規のプロジェクトを作成するんですけど，
今日は新規プロジェクトのテンプレートのとこで
View-basedApplicationを選択します．

で，名前はImageViewerにして保存．

はい，これで新しいプロジェクトできました．

次に
左側グループとファイルのClassesをクリック

$初心者@txmyのiOS,Androidアプリ開発日記-Classsesを選択

上のファイルのとこから新規ファイルをクリック．

カテゴリのiOSのCocoa touch Classを選択します．
Objective-C classを選択します．

Subclass ofって文字の右側のとこをUIViewにして次へをクリック．

ファイル名にImageViewerView.mと記入します．

Classsesの中にImageViewerView．ｍ　ImageViewerView．ｈ
ができてればOKです．

次にできた
ImageViewerView.hの中身を下に書かれてる通りにします．

中身をDeleteしてこれをそのままコピーして使えばいいです．

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

#import

@interface ImageViewerView : UIView {
UIImage *_image;

}

@property (retain, nonatomic) UIImage *image;

@end

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

ファイルから保存．

次に同様に
ImageViewerView.m
の中身を下のにします．

ーーーーーーーーーーーーーーーーーーーーーーーーーーー
#import "ImageViewerView.h"

@implementation ImageViewerView

@synthesize image = _image;

- (id)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame])
{

_image = nil;
}
return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder
{
if (self = [super initWithCoder:aDecoder])
{
_image = nil;
}
return self;
}

- (void)dealloc
{

[_image release];

[super dealloc];
}

- (void)drawRect:(CGRect)rect
{

UIImage *theImage = [self image];

if (!theImage)
return;

CGSize imageSize = theImage.size;

CGSize boundsSize = self.bounds.size;

CGRect dstRect;

if (imageSize.width < boundsSize.width &&
imageSize.height < boundsSize.height)
{
dstRect.size = imageSize;
}
else
{
dstRect.size = imageSize;

if (imageSize.width > boundsSize.width)
{
CGFloat h;
h = round(boundsSize.width / imageSize.width
* imageSize.height);

dstRect.size = CGSizeMake(boundsSize.width, h);
}

if (dstRect.size.height > boundsSize.height)
{
CGFloat w;
w = round(boundsSize.height / imageSize.height
* imageSize.width);

dstRect.size = CGSizeMake(w, boundsSize.height);
}
}

CGFloat x = round((boundsSize.width - dstRect.size.width) / 2);
CGFloat y = round((boundsSize.height - dstRect.size.height) / 2);
dstRect.origin = CGPointMake(x, y);

[theImage drawInRect:dstRect];
}

- (void)setImage:(UIImage *)newImage
{
if (newImage != _image)
{
[_image release];
_image = nil;

if (newImage != nil)
{
CGSize imageSize = newImage.size;

if (imageSize.width > 1024 ||
imageSize.height > 1024)
{

CGSize newSize;

if (imageSize.width > imageSize.height)
{
newSize = CGSizeMake(1024,
(int)(imageSize.height * 1024 / imageSize.width));
}
else
{
newSize = CGSizeMake(
(int)(imageSize.width * 1024 / imageSize.height),
1024);
}

UIGraphicsBeginImageContext(newSize);
[newImage drawInRect:
CGRectMake(0, 0, newSize.width, newSize.height)];
_image = UIGraphicsGetImageFromCurrentImageContext();
[_image retain];
UIGraphicsEndImageContext();

}
else
{
_image = [newImage retain];
}
}
}
}

@end

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

ファイルから保存．

これで
画像を表示するための
下地ができあがったらしいです．

今日は眠いのでここまで

また明日続きを書きます．

それでは

あでゆー

iPhoneアプリ開発日記②画面を回転させてみた

今日は昨日作ったヤツをいろいろいじって遊んでみようと思います．

例のごとく，参考にしたのはこちらの本．
基礎から学ぶ iPhoneアプリ開発/林晃

￥3,150
Amazon.co.jp

今日はiOSシュミレータを回転させてみました．

すると…

　　↓

はい
横画面になりましたー

やり方は上のハードウェアから反時計回りに回転です．

でも…
iPhoneを横に持ち替えたときアプリによっては横の画面に切り替わりますよね．

とゆーことで今日は横画面に対応させてみます．

プログラミング言語については全くといっていいほど知らないので詳しい解説はできませんが，
本読めばかいてあるので詳しく知りたい人は本読んでください笑

まずはXcodeから昨日作ったHelloWorldを起動．

左側のとこのグループとファイルのとこから
一番上にあるHelloWorldを選択．

右上のとこにファイルがいっぱい並んでるので
そのなかのHelloWorldViewController.mをダブルクリック．

よくわかんないプログラムのソースコードみたいの出てくるけど
よくわかんないのでとりあえず一番最後の「@end」の直前に

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {

return YES;
}

を書き込んで保存してそれを閉じます．

$初心者@txmyのiOS,Androidアプリ開発日記-HelloWorldViewController.m

これで横画面に対応したっぽいです．

改めて，ビルドと実行をクリックしてiOSシュミレータを開いて横画面にしてみると．．．

おおっ

でもなんか文字が左下に偏ってしまいました．

これをなおそうと思います．

iOSシュミレータを終了して，
Xcodeに戻り，
左のグループとファイルからResourcesを開いてその中の
HelloWorldViewController.xibをダブルクリック

昨日と同様にViewを開いたら
同様にToolsからInspectorを起動して
Inspectorの上の方のアイコンの右から二番目の物差しみたいなアイコン(Size)をクリック．

ここでViewウインドウの方でHelloWorldって書かれた部分を一回クリックして選択してる状態にしとかなきゃうまくいかないみたいです．わかんないけど．

そしたら
そのInspectorウインドウ（今はLabelSizeって表示されてる）の中の
Autosizingって欄の四角のなかの矢印とか線とかをクリックすると
破線の状態になったり，赤い実線の状態になったりするんだけど
縦横の矢印だけを実線に，あとの線は破線にしておきます．

これでFileからSaveを押して保存すればOKっぽいです．

確認してみます．
Xcodeに戻ってビルドと実行をクリック．

ハードウェアから反時計回りに回転をクリック

すると…

ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

きれいに真ん中にきてますね！

よかったー

今日はこんな感じで

またいろいろ遊んでみます

それでは明日また

あでゅ～

前ページ
次ページ