UIViewのタッチイベントとAnimationを試してみる
iOSではタッチイベントやUser Interfaceを派手にするためのAnimationを簡単に実装できるとのこと。
それを試してみる。
UIViewを継承したクラスにタッチイベントを実装する。今回は画像を読み込んでそれを表示するViewにする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/**
* フレームサイズと画像リソース名で初期化する
* 画像リソース名でUIImageViewを作り、同サイズでサブビューとする
*/
- (id)initWithFrame:(CGRect)frame withImageNamed:(NSString*)imageNamed {
self = [super initWithFrame:frame];
if (self) {
UIImageView *imageView = [[[UIImageView alloc] initWithFrame:self.bounds] autorelease];
imageView.image = [UIImage imageNamed:imageNamed];
[self addSubview:imageView];
}
return self;
}
/**
* タッチイベント開始
*/
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
}
/**
* タッチイベント終了
*/
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
} |
touchesBeganとthouchesEndedを追加するだけ。
次はタッチイベント内でアニメーションを設定する。
画像がタッチされたらその画像が画面いっぱいに拡大されるアニメーションを設定する。画面中段に複数の画像が敷き詰められた状況を想定する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/**
* タッチイベント開始
* アニメーションの設定
* 1.画像を画面の真ん中に移動する
* 2.画像を画面サイズに拡大する
*/
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
// Viewを最前面に持ってくる
[self.superview bringSubviewToFront:self];
// アニメーション設定開始
[UIView beginAnimations:nil context:NULL];
// 0.1秒かけて
[UIView setAnimationDuration:0.1];
// 位置を真ん中に移動する
CGFloat x = (self.superview.frame.size.width / 2 - self.frame.size.width / 2) - self.frame.origin.x;
CGAffineTransform trans = CGAffineTransformMakeTranslation(x, 0);
// superviewと同じサイズに拡大する
CGFloat width = self.superview.frame.size.width / self.frame.size.width;
CGFloat height = self.superview.frame.size.height / self.frame.size.height;
CGAffineTransform scale = CGAffineTransformMakeScale(width, height);
// Affine変換
self.transform = CGAffineTransformConcat(scale, trans);
// アニメーションをコミット
[UIView commitAnimations];
}
/**
* タッチイベント終了
* アニメーションでオリジナルの座標に戻して、何もなかったかのようにする。
*/
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
// オリジナルの座標に戻す
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.1];
self.transform = CGAffineTransformIdentity;
[UIView commitAnimations];
} |
あとは、UIViewControllerでこのUIViewをサブビューとして追加していけばいい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
// 画像４枚分
int count = 4;
// 幅と高さを画像の分だけ小さく
CGRect rect = self.view.bounds;
rect.size.width /= count;
rect.size.height /= count;
// 高さは真ん中にくるように
rect.origin.y = self.view.bounds.size.height / 2 - rect.size.height / 2;
KurukuruView *kurukuruView;
rect.origin.x = 0;
kurukuruView = [[KurukuruView alloc] initWithFrame:rect withImageNamed:@"test1.jpg"];
[self.view addSubview:kurukuruView];
rect.origin.x += rect.size.width;
kurukuruView = [[KurukuruView alloc] initWithFrame:rect withImageNamed:@"test2.jpg"];
[self.view addSubview:kurukuruView];
rect.origin.x += rect.size.width;
kurukuruView = [[KurukuruView alloc] initWithFrame:rect withImageNamed:@"test3.jpg"];
[self.view addSubview:kurukuruView];
rect.origin.x += rect.size.width;
kurukuruView = [[KurukuruView alloc] initWithFrame:rect withImageNamed:@"test4.jpg"];
[self.view addSubview:kurukuruView];
} |
実装した結果がこんな感じ。
動作は軽快。ぬるぬる動いてる。
色んなことができそうな予感がする。