初心者haya【初心者向けiPhoneアプリ】超簡単!カウンターアプリを作ろう!その2この記事は2016年10月27日に書かれたものです。内容が古い可能性がありますのでご注意ください。Tweet超簡単!カウンターアプリを作ろう!iPhoneアプリ開発を始めたばかりの人でも勉強しながら簡単に作成できるアプリを作ってみました!今回はUILabelとUIButtonだけで作成可能なカウンターアプリです。Xcodeの基本的な使い方を覚えつつ、アプリ開発の流れを学んできましょう!※なお、Xcodeはバージョン8.0を使っています。作成するアプリはコチラ↓↓このように数字を表示する白いラベルと、丸いボタン4つ、さらに下には数字をリセットして0に戻すボタンを配置しています。部品の配置方法や設定の変え方などの基礎的なことを学びました。今回はそれを応用して画面の作成をしていきたいと思います。画面をストーリーボードで作成していこう!それでは実際に作成していきます。※今回はiPhone6sの画面サイズで作成していきます。6s」となっていることを確認してください。1全体画面の背景色を変更する画面全体の背景色を変更します。変更方法は前回やったボタンの背景色の変更と全く同じ方法です。(前回の続きから進めている方は、配置しているラベルとボタンを削除しておいてください。削除方法はクリックしてラベルやボタンを選択して、deleteキーを押下します。)画面上のどこでもいいのでクリックして選択します。ラベルなどと違って選択しているのがわかりづらいですので注意してください。右上の部分に、「View」と書かれている設定変更の画面が表示されていれば選択されています。Selection」と表示されます。これは画面を選択できていないパターンですね。選択している状態で「Background」の部分を変更します。色を見たら分かる通り、現在白色になっています。真っ白なキャンバスです。前回は右側の矢印を選択しましたが、今回はこの白色の部分をクリックしてみましょう。すると色を選択することができる小さなウィンドウが立ち上がりました。このウィンドウでは右側の矢印を選択した場合よりも細かい色の設定をすることができます。いじって試してみてください。今回のサンプルアプリではCyanという色を選択しています。同じ色でもいいですし、好みの色でもいいので何かしら選択しましょう。選択したら小さなウィンドウは閉じてしまって構いません。画面全体が白色からシアン色に変更されました!2カウンターの数字を表示するラベルを設定するまずラベルをドラッグ&ドロップで画面内のどこでもいいので配置してしまいましょう。このラベルの配置位置とサイズを変更するのですが、前回は周囲の□を上下左右にドラッグすることでサイズの変更と位置の調整を行いました。今回は「サイズインスペクタ」という部分で設定していきたいと思います。右上の部品の設定を変更する画面の上部分に、6コのアイコンがあります。現在は右から3番目が選択されていますね。前回にも言いましたが、この部分がアトリビュートインスペクタを表示する画面で、その画面で部品の設定を変更することができます。今回はさらに1つ右隣の部分を選択します。部品のサイズおよび配置位置を1ポイント(ピクセルみたいなやつ)単位で設定することができます。XとYでその部品の座標を、WidthとHeightでその部品のサイズを変更することができます。ここで気をつけなければいけないことは座標の起点となる位置です。Xcodeでは左上が座標の起点となっていて、X座標は右に行くほど数値が増え、Y座標は下に行くほど数値が増えていきます。今回はここの値を次のように変更してみましょう。X=20、Y=60、Width=335、Height=150すると自動でラベルのサイズと位置が変更されましたね!あとはラベルの背景色、文字のサイズ、文字の中央寄せといったようなラベルの設定を変更しましょう。アイコン6コあるうちの右から3番目、アトリビュートインスペクタに戻って設定を変えます。・Background...「白色」にFontの設定は「T」の部分をクリックすると細かい設定ができますので、そこからフォントの変更と文字サイズの変更を行います。Backgroundの設定だけ下の方にあるので注意してください。これでラベルの設定はおしまいです!(カドを丸っこくするのはあとでまとめてやります。)3それぞれのボタンを配置する次はボタンの配置です。ボタンはタップしたら+1とか+10とか、リセットするとか色々動作が異なりますが、ボタンをタップした時の動作はストーリーボードでは設定できません。コードを書く必要があります。先のステップということですね。ストーリーボードでできることは、あくまでも「ボタンという部品を画面上に配置する」ということを意識してください。ボタンの設定もラベルの設定とほぼ同じです。以下のように設定していきましょう。+1のボタンサイズインスペクタ(6コあるアイコンの右から2番目のやつ)の設定でサイズと座標を次のように変更します。X=67.5、Y=270、Width=100、Height=100ボタンの場合はサイズインスペクタの表示がラベルとちょっと異なるので注意してください。この値を設定するのは下図の赤枠部分です。あとは表示するボタンの中の文字や背景色の変更です。これはラベルとだいたい同じですね。Color...「黒色」に・Background...「赤色」に+1のボタンを配置したらこんな感じになります。-1のボタンあとのボタンは+1のボタンと同じになります。Color...「黒色」に・Background...「白色」にこれでボタンの画面作成もバッチリです!4ラベルとボタンのカドを丸くするラベルやボタンは、デフォルトの部品を配置しただけですと全て四角になっています。このままではちょっと味気ないですね。変更していきましょう!カドを丸くするには基本的にコードで記述しなければなりませんが、ちょっとしたことならストーリーボード上の設定からでも変更することができます。今度は6コあるアイコンの左から3番目、アイデンティティインスペクタを選択します。Attributes」というのがあり、カド丸の設定はそこから行うことができます。ラベルをクリックして選択して、+ボタンを押してこの部分に以下のように追加してください。(チェック入れる)layer.cornerRadiusのRだけが大文字なので注意してください。細かい意味は省きますが、この設定を入れることで「ラベルをカド丸にして、30pt分丸くするよー」という意味になります。30の数字を調整することによってどのくらい丸みを帯びさせるのかを変更することができます。同様にボタンもカド丸にしてしまいましょう。+1や-1などの4つのボタンには次の値を設定しましょう。(チェック入れる)4つのボタンのサイズは先ほどWidth=100pt、Height=100ptに設定していました。カドを50ptで丸くする設定ですので、この4つのボタンは完全の円になります。リセットボタンには次のように設定しましょう。(チェック入れる)これで設定は完了です。「この設定はストーリーボード上には反映されず、アプリが実行されたタイミングで設定が反映される」ということです。このままでは本当にカド丸になっているかが分かりません。確認するにはシミュレータを立ち上げてみましょう。5シミュレータで動作を確認してみるラベルやボタンがカド丸になっているか確認してみましょう。シミュレータを起動するには画面の左上の▶︎のスタートボタンをクリックするだけです。(◼︎はストップボタンです)このアプリはiPhone6sのサイズを前提として作成しているので、アプリのシミュレータもiPhone6sに揃えましょう。シミュレータのiPhoneの種類を変更するには、iPhone○○と書かれている部分をクリックして対象のiPhoneを選択します。それではスタートボタンで実行してみましょう!ストーリーボードの表示とは異なり、ちゃんとカド丸になっているのがわかります。これでアプリのレイアウトは完成しました!しかし、このままではまだボタンをタップしたとしても何も数字に変化は起こりませんね。先程も述べましたが、ボタンをタップした際の動作はコードを記述必要があります。ストーリーボードはとても直感的で使いやすいものですが、それだけではアプリを完成させることはできないんですね。