試行錯誤 6 （サイズ対応、ボタンを光らせる）
大まかな部品を置いたら、それを動かすプログラムを少しずつ書いていくのですが、その過程をブログにどのように書いていこうか迷っていました。
特に決まったやり方があるわけではありませんので、実際にアプリを作った時のことを思い出しながら書いてみることにしました。
具体的に困った内容やその解決方法を書いていけますし、自分の覚え書き&良い復習にもなりそうです。
冗長でお見苦しい点があるかと思いますが、お許しくださいm(_ _;)m
アプリは、まだ一番記憶に残っていると思われる？;^_^A、5月にリリースした「春の縁側」を使ってみたいと思います。（Objective-Cで書いています）
最初の画面は、背景を置くimageViewと左上の３つのボタン（SNS投稿とサウンドのon/off）、「春の縁側」のタイトル文字の画像を貼ったボタン、ひらひら落ちてくる花びらのimageViewといった部品から成り立っています。
＜サイズ対応＞
-(void)change:(int)a y:(int)b width:(int)c height:(int)d view:(UIView*)e{
CGRect r = [[UIScreen mainScreen] bounds];
if(r.size.height == 480 && r.size.width == 320){
e.frame = CGRectMake(a, b*480/568, c, d);//4s
}else if(r.size.height == 667 && r.size.width == 375){
e.frame = CGRectMake(a*375/320, b*667/568, c*375/320, d*667/568);//6
}else if(r.size.height == 736 && r.size.width == 414){
e.frame = CGRectMake(a*414/320, b*736/568, c*414/320, d*736/568);//6Plus
}else{
e.frame = CGRectMake(a, b, c, d);//5
}
}
＜ボタンの点滅＞
このアプリでは、画面上の点滅する画像（ボタン）をタッチするとイベントが始まるようにしていました。
点滅については、次の２つの方法を使い分けました。
1.点滅させたい画像の上にボタンを置き、ボタンそのものを点滅させる→丸くスポットライト風に光る
2.画像を貼ったボタンの上に半透明のimageViewを置き、完全に透明になる状態をアニメーションで一定間隔で繰り返すことによって点滅しているように見せかける→広い範囲を均一に点滅するように見せることができる
表紙では、四角い大きなボタンをまんべんなく点滅させたかったので、2.の方法を使いました。
//ボタンの作成
UIButton *goToSecondButton = [UIButton buttonWithType:UIButtonTypeCustom];
//サイズ変換
[self change:10 y:120 width:255 height:110 view:goToSecondButton];
[goToSecondButton addTarget:self action:@selector(goToSecond:) forControlEvents:UIControlEventTouchUpInside];
[goToSecondButton setImage:[UIImage imageNamed:@"titleImage.png"] forState:UIControlStateNormal];
[self.view addSubview:goToSecondButton];
//ボタンの上に置く点滅用imageView
UIImageView *frame = [[UIImageView alloc]init];
//サイズ変換
[self change:10 y:120 width:255 height:110 view:frame];
frame.backgroundColor = [UIColor whiteColor];
frame.alpha = 0.4;
[self.view addSubview:frame];
//アニメーションで点滅させる
[UIView animateWithDuration:1.8
delay:0
options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat
animations:^{
frame.alpha = 0;
}
completion:^(BOOL finished){
}];
1.の点滅方法については、また後日書きたいと思います。
