初心者から始める楽器アプリの作り方（2/2）

はい、それでは前回の続きを行っていきます

 

今回は、縦画面、横画面両対応を行っていきたいと思います。

今回は、AutoLayoutという機能を使います

この機能を使うことで、様々なサイズのデバイスに対応することも可能になりますし、

先ほども言いました、縦画面、横画面、両画面が可能になります

 

それでは、AutoLayoutを有効にしましょう

main.storyboardを選択します。

そして、このインスペクターの画面で、

AutoLayoutにチェックを入れます。

Use AutoLayoutにチェックを入れます。

これで、AutoLayoutが使用可能になりました。

 

それでは、今の画面が、何もAutoLayoutを設定しない状態でどのように見えるかチェックしてみましょう

アシスタントエディタを有効にしまして、

AutomaticのところをPreViewに設定します。

このように、4インチのiPhoneでどのように見えるかが表示されました。

少し、猫が欄外の端に切れてますね

また、ツールバーも表示されておりません。

 

これは、うまく4インチのiPhoneに対応できていないことを意味します

iPhone4インチというのは、

iPhone5や5sのことですね。

+ボタンを押して、他のサイズも確認してみます。

 

iPhone6Plusの場合は、逆に、

下の方にスペースが空いてしまい、

また、右の方にもスペースが空いていますね。

 

iPhone4.7インチの場合は、正しく見えています。

iPhone3.5インチの場合は、

これは、4sのサイズですけども、

ツールバーが消えてしまって、

下と右の方で猫が消えてしまっていることを確認できます。

このような見え方を今するはずですね。

 

それでは、画面内にこの猫がすべて収まるように、

正しい位置に収まるようにして、なおかつ、

縦横両対応にできるように設定の方を行っていきたいと思います。

 

では、スタンダードエディタに戻りますね。

このように、猫が縦長に配置されると、

両対応が難しいですので、

ちょっと、配置を全体的に入れ替えていきますね。

この位置にしていきます。

このように並べていきます。

それでは、真ん中の猫、この猫からAutoLayoutの設定を行っていきます。

このピンを選択します

 

Constraint to Mergingのチェックを外しまして、

WidthとHeightに設定していきますね

各々、設定していきましょう。

そして、これですね。

Horizontally in Containerと

Vertically in Containerを

それぞれ0に設定します。

ふたつの制約を追加します。

 

はい、これで、常にこの猫は、真ん中の猫は

画面中央に表示されるようになって、また、大きさも

先ほど設定した値に決まるようになりました。

 

では、これの一つ上の猫も、値を設定していきます。

ここですね。まず、ピンの設定をしていきます。

幅と高さを固定していきます。

ふたつの制約を追加しました。

さらに、制約を追加してやります。

Controlボタンを押しながら、青い線を引っ張って行って、

下の猫と紐付けます。

Center Horizontalで、X軸方向の位置を揃えます。

もう一度、引っ張っていきます。

今度は、Vertical Spacingで、縦の距離を設定します。

これで、この猫の制約の設定は完了です。

 

では、次に左上の猫ですね。

これも同様に、WidthとHeightの設定をします。

そして、Controlを押しながら引っ張って、Center Verticalと、

もう一度引っ張っていって、

Horizontal Spacingを設定します。

 

右上の猫も同様ですね。

WidthとHeightの設定をします。

そして、Horizontal Spacingと、

Center Verticalと、

Horizontal Spacingを設定します。

 

この猫も、

WidthとHeightの設定をしまして、

Center Horizontalと、

Vertical Spacingを設定します。

 

左下の猫も同様ですね。

WidthとHeightの設定をしして、

Horizontal Spacingと、

Center Verticalを設定します。

 

WidthとHeightですね、

右下の猫も、設定を行います。

 

これで、すべての制約の設定が完了しました。

猫に関して、設定が完了しました。

 

では、画面下のツールバーに対しても

AutoLayoutの設定を行いましょう

ピンを選択します。

 

このConstrain to Merginsを外して、

左と右側の距離を0、下からの距離もゼロに設定します。

で、Heightを固定します。

この4つの制約を追加します。

このようになりました。

 

ここでちょっと、黄色いCautionが出ていますね。

このボタンに関するCautionが出ています。

設定した位置と現在の位置がちょっとずれているみたいですね。

Fix Misplacementで修正できます。

では、このようにすべての猫のAutoLayoutの設定が完了しました。

様々な機種でどのように見えるかをチェックしてみましょう。

 

アシスタントエディタをチェックします。

このように、すべてのiPhoneの機種において

問題なく表示できていることが確認できます。

 

それではこのiPhoneの画面を横にしてみましょう。

5.5インチを横にしてみます。

このように見えます。

 

4インチの場合はこのように見えます。

4.7インチの場合はこのように見えます。

3.5インチの場合はこのように見えます。

 

ツールバーと一部猫の画像が重なっていますが、

もし気になる方は、猫の位置を調整するか、

猫の大きさを小さくするなどして調整してみてくださいね。

 

それでは、シミュレーター上で動作させてみて、

動作を確認してみます。

 

では、まずiPhone6Plusで動作を確認してみましょう。

アプリが起動しましたね。

アプリの基本的な動作に関しては前回までに作ったアプリと同じになります。

それでは、アプリを回転させてみましょう。

シミュレーター上で、Hardwareからこの

Rotate Left かRightを選択すると、

アプリの回転をシミュレートすることができます。

では、左回転させてみましょう。

 

iPhoneが回転した時、このように猫が配置、表示されることになります。

猫に関しても、画面下のツールバーに関しても問題なく表示されていることがわかります。

横に回転すると、元に戻りますね。

 

はい、それでは他の機種も試してみましょう。

iPhone5を試してみます。

アプリの方が起動しました。

動作も問題なくしますね。

では、iPhoneを回転させてみます。

Rotate Leftをすると、このように表示されます。

問題なく動作しますね。

 

今回は、AutoLayoutの機能を使って、

縦横回転の対応および、様々なデバイスのサイズへの対応を行いました。

今回の内容を応用することで、

ご自分の作ったアプリを様々なシチュエーションで使えるアプリに対応させることができますので、

ぜひ、AutoLayoutの機能をいろいろ試してみてくださいね。

今回は以上になります。

 

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。

 

どこよりも楽しく学べるアプリ開発スクールを運営しています。

フォローしてしてくれると、とてもうれしいです☆

Facebook

https://www.facebook.com/techool

 

Twitter

https://twitter.com/TekuruSchool

 

YouTubeチャンネル

https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow

 

毎週土曜日の夜に動画のアップロードをしています。

よければ、チャンネル登録お願いします！

ソースコードや、操作の仕方、などなど、

なんでも気軽にコメントください。