*

[Swift]Swiftチュートリアル。コントロールを複数綺麗に並べる。

公開日: : 最終更新日:2015/02/23 Swift

ちょっと趣向を変えて、コントロールの並べ方です。

綺麗にコントロールを並べるにはコツがいります。

Swift入門まとめページはこちら→Swiftまとめページ

目指す画面はこんな感じ。
swift
真ん中にTextFieldを置いて、その左右にLabelとButtonを配置します。

起点となる真ん中のTextFieldを配置

真ん中に配置。

Single View Applicationで適当にプロジェクト名を決めて作成してください。
私は適当にLineUpControllersという名前で作成しました。
swift

早速Main.storyboardを選択して、適当にTextFieldをドラッグ&ドロップします。
swift
適当すぎてズレています。あえてズラしています。

次に真ん中に配置するように制約を加えます。
TextFieldを選択したまま、右下のAlignマークをクリックして、Horizontal Center in Conteinerにチェックを入れて、Add 1 Constraintをクリックします。
wannabenote

こんな感じで表示されれば、もうどのプラットフォームでも横方向には真ん中に表示されます。
wannabenote
試しに実行してみて確認してみても構いません。

さて、こちらのTextFieldの左側にLabelを配置したいところですが、このままでは視覚的には左にズレているため、配置しづらいことこの上ありません。
そこで、見た目上の位置を真ん中にズラします。
TextFieldを選択して、右下のアイコン(左から三番目)をクリックして、UpdateFrameをクリックしてください。
swift

すると、真ん中に移動しましたが、かなり上の方かつ、小さくなってしまいました。
swift

これは何が起きたかというと、制約を読み込ませたようなものです。
今ついている制約の「横方向で真ん中に配置する」のみが効いて、他の大きさなどの情報がなくなってしまったため、小さくなり、なおかつ一番上部に移動してしまいました。

もう少し下に動かしたいし、サイズを大きくしたいところです。

まずは少し下に動かしましょう。
storyboard上で下の方にズラします。
そして先ほどのAlignアイコンをクリックしてVertical Center in Containerにチェックを入れ、ドロップダウンリストをクリックして、Use Current Canvas Valueをクリックします。
swift
すると、今コントロールのある座標を出してくれるので、そのままAdd 1 Constraintをします。

次に横サイズを広げます。
こちらも実際にTextFieldを広げてから、Sizeのアイコンをクリックして、Widthにチェックを入れて、Add 1 Constraintをクリックします。
swift

この状態で実行すると真ん中かつ、いいサイズでTextFieldが表示されます。
swift

続きは次回。

続きを更新しました。→[Swift]Swiftチュートリアル。コントローラを複数綺麗に並べる。その2。

ad

関連記事

wannabenote

[Swift]Swiftチュートリアル。ボタンを真ん中に配置して処理を記述する方法。

前回(SwiftData設定)の続き。 Swift入門まとめページはこちら→Swiftまとめペ

記事を読む

swift

[Swift]Swiftチュートリアル。コントローラを複数綺麗に並べる。その2。

前回、Swiftで真ん中にコントロールを配置した続き。 Swift入門まとめページはこちら→S

記事を読む

swift

[Swift]TableViewControllerにナビゲーションバーを追加する方法 その2

前回のTableViewControllerにナビゲーションバーを追加する方法の続きです。 S

記事を読む

swift

[Swift]Swiftチュートリアル。SwiftDataでデータをselectする方法。

データの挿入が出来たので、データを取得してみましょう。 Swift入門まとめページはこちら→S

記事を読む

wannabenote

[swift]Swiftでデータを扱うアプリを作りたい。sqliteのラッパーSwiftDataを初期設定。

Swift入門まとめページはこちら→Swiftまとめページ 息抜きに 基本飽き性なので、ある

記事を読む

swift

[Swift]Swiftチュートリアル。SwiftDataでCreate Tableする方法。

前回、ボタンを配置できたので、いよいよデータベースを扱いましょう。 Swift入門まとめページ

記事を読む

swift

[Swift]Swiftチュートリアル。SwiftDataでInsertを発行する方法。

CreateTableを前回出来るようになったので、今度はデータを挿入してみましょう。 Swi

記事を読む

swift

[Swift]Swiftチュートリアル。SwiftDataで取得したデータをTableViewにデータを出力する。

いよいよSwiftDataからデータを取得してTableDataViewに出力してみます。 S

記事を読む

swift

[Swift]TableViewControllerにナビゲーションバーを追加する方法

画面遷移するのに大切なナビゲーションバーのお話。 Swift入門まとめページはこちら→Swif

記事を読む

swift

[Swift]Swiftチュートリアル。UITableViewControllerを設定する。

データが取得できるようになったので、今度はデータを複数表示してみます。 Swift入門まとめペ

記事を読む

ad

Message

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

ad

  •  Auther;わなび

     「オープン系得意だよね? 俺のPCの調子悪いんだけど」という無茶振りから解き放たれゲームエンジニアに。
    C#とかUnityを扱います。
    Twitterフォロー大歓迎です。
    githubアカウント→wannabenote
  • follow us in feedly
PAGE TOP ↑