ピアノアプリ(SwiftPiano)を作ろう!3. ピアノの画面を作る


ピアノアプリ(SwiftPiano)を作ろう!2. 下準備(画面サイズ設定、画像・音データのインポート)」の続き。今回は、鍵盤を配置しましょう。

↓完成図はこんな感じです。
スクリーンショット 2014-10-03 12.36.59

※2014年10月6日追記
動画撮影しました。ブログだと説明しきれない所などあったので、ぜひご確認ください。
swiftpiano_movie

※2014年10月7日追記
短いコードで書くバージョンも載せました!
http://bick.xyz/swiftpiano_shortversion/

3. ピアノの画面を作る

スクリーンショット 2014-10-03 11.36.43
「Button」というのを追加します。
画面右下、写真のように選択、検索して、「Button」というのを見つけてください。
それを、矢印のところにドラッグ&ドロップ。
画面右上で、色とかフォントとか編集できます。TitleのところにC3と記入。

スクリーンショット 2014-10-03 11.37.01
「Background」の項目で、「white.jpg」を選択。

スクリーンショット 2014-10-03 11.37.30
画面上部のメニューバーで、Editorを選択し、Size to fit contentを選択。
白鍵が大きくなります。

スクリーンショット 2014-10-03 11.40.26
ButtonのtitleであるC3が、画像の真ん中にあって邪魔なので、下に移動させましょう。
AlignmentのVerticalを、写真のように選択。
これで白鍵が1つ完成!

完成した白鍵をコピー(⌘キー+C)、ペースト(⌘キー+V)して、全部で8個の白鍵を作りましょう。ボタンのタイトルも写真のように変えてください。

スクリーンショット 2014-10-03 11.44.16
同様の手順で、黒鍵も作りましょう。
これで鍵盤の画面が完成です!

画面右上の再生ボタンでビルドしてみてください。
↓こんな感じになるはず!
スクリーンショット 2014-10-03 17.30.18
鍵盤をクリックすると、なんか押せてる感じがしますね。
まだコード書いてないので、音が出ないのが寂しい。

次は、4. 音が出るコードを書く(まずは、ドの音だけ)、です!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です