Help us understand the problem. What is going on with this article?

【Storyboard】Swiftを使った挫折しないiOSアプリ開発入門 #2

More than 1 year has passed since last update.

はじめに

大学生向けに勉強会を行ったものを記事化したものです。

対象

今回のレベル:1.0
Storyboard を利用したアプリの画面レイアウト作成における制約の付け方を勉強していきます!初回の続きになりますので、初回も合わせてみると良いかもしれません。

作るアプリ

ios_ study02.002.jpeg
GitHub(直ダウンロード)

前回、最後に工夫したいことを考えてみました。今回は、その中で、以下の内容にチャレンジしてみたいと思います。その中で、 Storyboard を使用したレイアウト方法を学んでいきます。

  • ボタンの配置場所を変えたい
  • 複数キャラクターに対応させたい

開発

ios_ study02.028.jpeg

初めに、前回配置した ボタンの配置場所を変える ことから始めていきましょう!
Main.storyboard と、それに対応する MainViewController.swift を表示しておきます。まずは、上記画像のような手順で操作していきます。
1番目ですが、対象のボタンを選択した状態にしておきます。

ios_ study02.029.jpeg

次に、右側の定規マーク(Size inspector)を選択状態にします。

ios_ study02.031.jpeg

View 項目でボタンの x 座標、 y 座標、幅、高さをそれぞれ設定することができます。今回使用している練習用のアプリでは、 幅と高さを80に設定 してみてください。設計画面上のボタンのサイズが変わったのがわかると思います。

ios_ study02.032.jpeg

ここで AutoLayout と呼ばれる仕組みを使ってみましょう!「 iPhone4s でも iPhone X でも画面の中央に 『スクリーン横幅 : ボタン = 3 : 1』のボタンを配置してください といった制約を設定できます。
今回も、上記画像のような順番で操作していきます。まず、はじめに対象のボタンを選択した状態にしておきます。

ios_ study02.033.jpeg

上記画像の赤い四角で囲った部分から Add new constraints メニューを呼び出します。ここでは、 パーツのサイズ・配置位置等の制約を設定する ことができます。先程、幅と高さを80に設定したときと 設定できる内容が異なることに注意 してください。

ios_ study02.035.jpeg

まずはじめに、 幅と高さを固定するという制約 をつけてみましょう!意味合いとしては液晶の大きい iPad でも液晶の小さい iPhone でも同じサイズで表示されるように制約をつけるということです。なので、結果として iPad ではすごく小さいパーツになるので見にくくなることが想像できますね。
上記画像の 赤枠内のチェックボックスにチェック することで、幅と高さを80に固定する制約が追加される準備が整いました。最後に Add 2 Constraints と書かれたボタンをクリックすれば、制約が追加されます。

ios_ study02.036.jpeg

さて、何やら怪しげな雰囲気ですね。ボタンの周りが赤く表示されたり、赤いバッジが表示されていませんか?そう!このままではエラーが出てしまうのです。何故か考えてみましょう!

ios_ study02.037.jpeg

エラーが出ていた原因ですが、英語に抵抗がない人はエラー分を読んでみてください。ということで、答えですが、 x 座標と y 座標が決まらない ことが原因です。なので、制約を追加していきましょう!

ios_ study02.038.jpeg

上記画像のような順番で操作していきます。まず、はじめに対象のボタンを選択した状態にしておきます。

ios_ study02.039.jpeg

上記画像の赤枠部分から Alignment constraints メニューを呼び出します。ここでは、 水平・垂直などの制約を設定する ことができます。

ios_ study02.040.jpeg

上記画像の赤枠部分のチェックボックスにチェックすることで、横方向に中央・縦方向に中央にパーツが配置されるようになり、結果として 画面の中心に配置される制約 が追加されたことになります。
ここで、 x 座標と y 座標が決まった ことはわかりますか?

ios_ study02.041.jpeg

最後に、 複数キャラクターに対応させる ためにボタンを増やしておきましょう!ボタンの追加方法は初回と同様ですが、コードとの接続まではまだしなくても構いません。
上記画像のような順番で操作していきます。1番目は今まで通りです。

ios_ study02.042.jpeg

今回は、横方向に中央にする訳にはいきませんね!ということで、 左右にある障害物との距離比率を保つ制約 をつけてみましょう!幅と高さを設定したところの赤枠部分で設定ができます。うっすら赤い、左右に伸びる線をクリックすると制約を追加する準備が整います。
注意しなければならないのは、 比率が保たれる ということです。上記画像にあるように、左障害物との距離が10で右障害物との距離が20なら、別の端末で左障害物との距離が20のとき、右障害物との距離が40となるような位置に表示されます。

最後に、縦方向に中央にする制約を追加して Add Constraints をクリックしましょう!

ios_ study02.043.jpeg

AutoLayout について軽くまとめてみました。
多くの便利機能があるため、一度に覚えて使えるようになるのは難しいですが、使っているうちに仲良くなれます!少しずつでも使うことを意識するといいかもしれませんね!

次回は、 たった2行追加するだけでカメラアプリが動くようになってしまうカラクリ を解説しながら Swift を使ったプログラミングの世界を紹介します!

最後まで見ていただき、ありがとうございます。

Swiftを使った挫折しないiOSアプリ開発入門シリーズ

以後、記事化中…

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした