さて、だいぶ波にのってきたかな。
そうでもない。
だって画像二つつくって行き来できるようにしただけ。
でも今日はもうちょっとだけこの辺りにお付き合いください。
では今日は、ちょっと見た目をカッコよくしたいと思います。
一応ゲームですしねヽ(゚◇゚ )ノ
以下がやっていくことです。
・タイトル画面のボタンの見た目をかっこよく
・ヘルプ画面のボタンの見た目をかっこよく
・タイトル画面のボタンを押した時の見た目をかっこよく
・やる気が持続すれば、サウンドをつけてみる
では始めていきたいとおもいます。
今のタイトル画面がこれでしたね。
![$無知の状態からiPhoneアプリ開発に挑んでみる-2011-2-24-6](https://stat.ameba.jp/user_images/20110224/00/iphoone/23/dc/p/t02200117_0744039611070749074.png?caw=800)
「How To Play」ボタンを自分で作った画像のボタンと入れ替えたいと思います。
はい、これが用意したボタンの画像、適当に作りました。
![$無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-3](https://stat.ameba.jp/user_images/20110305/00/iphoone/b8/8c/p/t02200045_0283005811090341697.png?caw=800)
名前は「btn_help.png」で、大きさは 適当 です。
別に大きさはなんでもいいんですよー。
前みたいに画像をプロジェクトに取り込んでください。
これは何回もやってますね。
![$無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-4](https://stat.ameba.jp/user_images/20110305/00/iphoone/f6/20/p/t02170148_0217014811090356212.png?caw=800)
はい、追加ができたら保存を忘れずにやって、GamePPoiViewController.xibをInterfaceBuilderで開きます。
そうしたら、真ん中の「How To Play」ボタンを選択し、
↓のボタンの設定画面をいじくります。(こんな画面がなければ、メニューのToolsからからInspectorです。)
TypeをCustomにして、Imageを今追加した「btn_help.png」を選択します。
Titleの中身も消しておきましょう。
![$無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-5](https://stat.ameba.jp/user_images/20110305/00/iphoone/d5/2c/p/t02200249_0301034111090356235.png?caw=800)
はいそうすると、
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-6](https://stat.ameba.jp/user_images/20110305/00/iphoone/80/ca/p/t02200166_0560042211090367998.png?caw=800)
o(^-^)o大きさは適当に調節しましょう。小さすぎると押せなくなります(-。-;)
次は、ヘルプ画面の方のボタンをいじくりましょう。
こっちは少し別のアクションもつけてみましょう。
それは、ボタンを押している時の画像を切り替えてみるというものです。
結構簡単なので。
まず、画像を二つ用意します。
もちろん、普通の時用と押された時用の二つです。
↓普通の時用「btn_back.png」
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-2](https://stat.ameba.jp/user_images/20110305/00/iphoone/30/ec/p/t02200047_0283006111090341710.png?caw=800)
↓押された時用「btn_back_pressed.png」
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-1](https://stat.ameba.jp/user_images/20110305/00/iphoone/42/12/p/t02200047_0283006111090341696.png?caw=800)
これも同じ様にプロジェクトに追加した保存します。
ではではこれも同じようにInterfaceBuilderで設定をしてみます。
ヘルプ画面は「HelpViewController.xib」でした。
では設定します。
方法は先ほどの「HowToPlay」で設定したのと、画像の選択以外は同じです。
![$無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-8](https://stat.ameba.jp/user_images/20110305/01/iphoone/93/06/p/t02200313_0301042811090407679.png?caw=800)
次にボタンが押されている時は別の画像を表示する方法がこれです。
↓みたいに、Highlighted State Configuration を選択して、そのImageから、
押された時用の画像を設定すれば終わりです。
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-7](https://stat.ameba.jp/user_images/20110305/01/iphoone/ea/1b/p/t02200313_0301042811090401533.png?caw=800)
ではでは、保存して実行してみましょう!
↓起動したところ
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-9](https://stat.ameba.jp/user_images/20110305/01/iphoone/e2/a6/p/t02200117_0744039611090418936.png?caw=800)
↓How To Play を押して画面が切り替わったところ
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-10](https://stat.ameba.jp/user_images/20110305/01/iphoone/2e/80/p/t02200117_0744039611090418935.png?caw=800)
↓Backを押してもとのタイトル画面へ戻ろうとしているところ
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-11](https://stat.ameba.jp/user_images/20110305/01/iphoone/cf/57/p/t02200117_0744039611090418937.png?caw=800)
どうですかねーー?
今回もプログラムなしで、いろいろな設定で見た目が変更できることがわかりましたー(^-^)/
今日は力尽きたので、また今度です!
ランキングに参加しています。下のクリックお願いしますー(*゚ー゚*)
![にほんブログ村 IT技術ブログ iPhoneアプリ開発へ](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fit.blogmura.com%2Fiphoneappli%2Fimg%2Fiphoneappli88_31_gold.gif)
![にほんブログ村 携帯ブログ iPhoneへ](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fmobile.blogmura.com%2Fiphone%2Fimg%2Fiphone88_31.gif)
そうでもない。
だって画像二つつくって行き来できるようにしただけ。
でも今日はもうちょっとだけこの辺りにお付き合いください。
では今日は、ちょっと見た目をカッコよくしたいと思います。
一応ゲームですしねヽ(゚◇゚ )ノ
以下がやっていくことです。
・タイトル画面のボタンの見た目をかっこよく
・ヘルプ画面のボタンの見た目をかっこよく
・タイトル画面のボタンを押した時の見た目をかっこよく
・やる気が持続すれば、サウンドをつけてみる
では始めていきたいとおもいます。
今のタイトル画面がこれでしたね。
![$無知の状態からiPhoneアプリ開発に挑んでみる-2011-2-24-6](https://stat.ameba.jp/user_images/20110224/00/iphoone/23/dc/p/t02200117_0744039611070749074.png?caw=800)
「How To Play」ボタンを自分で作った画像のボタンと入れ替えたいと思います。
はい、これが用意したボタンの画像、適当に作りました。
![$無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-3](https://stat.ameba.jp/user_images/20110305/00/iphoone/b8/8c/p/t02200045_0283005811090341697.png?caw=800)
名前は「btn_help.png」で、大きさは 適当 です。
別に大きさはなんでもいいんですよー。
前みたいに画像をプロジェクトに取り込んでください。
これは何回もやってますね。
![$無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-4](https://stat.ameba.jp/user_images/20110305/00/iphoone/f6/20/p/t02170148_0217014811090356212.png?caw=800)
はい、追加ができたら保存を忘れずにやって、GamePPoiViewController.xibをInterfaceBuilderで開きます。
そうしたら、真ん中の「How To Play」ボタンを選択し、
↓のボタンの設定画面をいじくります。(こんな画面がなければ、メニューのToolsからからInspectorです。)
TypeをCustomにして、Imageを今追加した「btn_help.png」を選択します。
Titleの中身も消しておきましょう。
![$無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-5](https://stat.ameba.jp/user_images/20110305/00/iphoone/d5/2c/p/t02200249_0301034111090356235.png?caw=800)
はいそうすると、
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-6](https://stat.ameba.jp/user_images/20110305/00/iphoone/80/ca/p/t02200166_0560042211090367998.png?caw=800)
o(^-^)o大きさは適当に調節しましょう。小さすぎると押せなくなります(-。-;)
次は、ヘルプ画面の方のボタンをいじくりましょう。
こっちは少し別のアクションもつけてみましょう。
それは、ボタンを押している時の画像を切り替えてみるというものです。
結構簡単なので。
まず、画像を二つ用意します。
もちろん、普通の時用と押された時用の二つです。
↓普通の時用「btn_back.png」
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-2](https://stat.ameba.jp/user_images/20110305/00/iphoone/30/ec/p/t02200047_0283006111090341710.png?caw=800)
↓押された時用「btn_back_pressed.png」
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-1](https://stat.ameba.jp/user_images/20110305/00/iphoone/42/12/p/t02200047_0283006111090341696.png?caw=800)
これも同じ様にプロジェクトに追加した保存します。
ではではこれも同じようにInterfaceBuilderで設定をしてみます。
ヘルプ画面は「HelpViewController.xib」でした。
では設定します。
方法は先ほどの「HowToPlay」で設定したのと、画像の選択以外は同じです。
![$無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-8](https://stat.ameba.jp/user_images/20110305/01/iphoone/93/06/p/t02200313_0301042811090407679.png?caw=800)
次にボタンが押されている時は別の画像を表示する方法がこれです。
↓みたいに、Highlighted State Configuration を選択して、そのImageから、
押された時用の画像を設定すれば終わりです。
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-7](https://stat.ameba.jp/user_images/20110305/01/iphoone/ea/1b/p/t02200313_0301042811090401533.png?caw=800)
ではでは、保存して実行してみましょう!
↓起動したところ
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-9](https://stat.ameba.jp/user_images/20110305/01/iphoone/e2/a6/p/t02200117_0744039611090418936.png?caw=800)
↓How To Play を押して画面が切り替わったところ
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-10](https://stat.ameba.jp/user_images/20110305/01/iphoone/2e/80/p/t02200117_0744039611090418935.png?caw=800)
↓Backを押してもとのタイトル画面へ戻ろうとしているところ
![無知の状態からiPhoneアプリ開発に挑んでみる-2011-3-5-11](https://stat.ameba.jp/user_images/20110305/01/iphoone/cf/57/p/t02200117_0744039611090418937.png?caw=800)
どうですかねーー?
今回もプログラムなしで、いろいろな設定で見た目が変更できることがわかりましたー(^-^)/
今日は力尽きたので、また今度です!
ランキングに参加しています。下のクリックお願いしますー(*゚ー゚*)
![にほんブログ村 IT技術ブログ iPhoneアプリ開発へ](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fit.blogmura.com%2Fiphoneappli%2Fimg%2Fiphoneappli88_31_gold.gif)
![にほんブログ村 携帯ブログ iPhoneへ](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fmobile.blogmura.com%2Fiphone%2Fimg%2Fiphone88_31.gif)