Swift

中身のあるコンテンツの部品

UIButtonやUILabelなど、テキストなどで中身のあるコンテンツはサイズがすでに決まっている部品があります。 この部品のサイズに関する制約は、プログラマーが自分で設定しなくてもすでに設定されています。 これを**Intrinsic Content Size(以下組み込みコンテンツサイズ)**といいます。 組み込みサイズのありなしでの制約設定 UIViewには、組み込みサイズがありません。 一方でUILabelには組み込みサイズがあります。テキストのサイズがそのままUILabelの幅と高さのサイズになります。 それが制約設定でどのように変わるかを見てみましょう。 UIViewをレイアウト まずUIViewを画面の右下に設定するレイアウトを考えてみます。 Storyboardを開いて、ViewControllerの右下にViewを置きます。 Trailingの制約とBottomの制約を追加してみます。 すると、制約が足りず、エラーを表す赤い線が表示されます。 Auto Layoutの制約エラーを解消するためにViewに幅と高さの制約を追加するとエラーはなくなります。 UILabelをレイアウト UIViewでは自分で、幅と高さの制約を追加する必要がありました。 今度はUILabelでやってみましょう。 同じようにViewControllerの右下にUILabelを置いて、Trailingの制約とBottomの制約を追加してみます。 ラベルのテキストは「

  • 佐藤 剛士
2 min read
Swift

VFLを使ってみよう

前回(AutoLayoutをコードから使おう)でAuto Layoutをコードから使ってみました。 実は、Auto Layoutをコードで使う方法は前回のNSLayoutConstraintクラスの +constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:メソッドを使う方法以外にももう一つ方法があります。 それが**「Visual Format Language (視覚的形式言語)」**を使った書き方です。 (以下VFLと略して話を続けます) まず、VFLのメリット、デメリットと基本の文法を説明したあとに、前回と同じレイアウトをVFLで作って見ようと思います。 メリット 可読性が上がる 前回の+constraintWithItem:attribute:relatedBy:toItem:

  • 佐藤 剛士
5 min read
Swift

Auto Layoutをコードから使おう

Auto LayoutによるビューのレイアウトはStorybordのGUIで設定できますが、もちろんコードからもAuto Layoutは設定できます。 コードでAuto Layoutができるようになれば、コンテンツをサーバーから取得して動的にレイアウトができるようになり、アプリ制作の幅がさらに広がります。 ただStoryboardでGUIからレイアウトするのとは異なり、コード特有の設定がいくつかありますので1つずつ見ていきましょう。 コードでAuto Layout コードでAuto Layoutを設定する流れは以下です ビューを生成する translatesAutoresizingMaskIntoConstraintsをオフにする ビューを他のビューに配置 ビューの制約を設定する 今回作るレイアウト 今回作るレイアウトは、以下のように赤いビューと黄色いビューを水平に並べるものを作りたいと思います。 設定しようとしている制約もここでまとめておきます。 赤のビュー 上部と親ビューの上部の距離が88 左側と親ビューの左側の距離が10 下部と親ビューの下部の距離が20 幅が親ビューの幅の40% 黄色ビュー 上部と親ビューの上部の距離が88 右側と親ビューの右側の距離が10 下部と親ビューの下部の距離が20 幅が赤色ビューと同じ

  • 佐藤 剛士
5 min read
iOS

Auto Layoutを使ってみよう

前回の記事でAuto Layoutがどんな機能なのかを説明しました。 今回は実際にAuto Layoutを使ってみたいと思います。 サンプルとしてViewを中央配置するレイアウトを作ってみたいと思います。 レイアウトをするときは、前回言ったとおり 今レイアウトしている要素のX軸、Y軸、幅(Width)、高さ(Height)が決まっているか? を考えながらレイアウトしましょう。 上手くいくと思います。 Auto Layoutの制約の追加する方法は大きく分けて2つあります。 「Align」「Pin」の2つです。 Alignは2つ以上のビューを整列させる時に使います。 Pinは隣り合ったビューの距離、ビューの大きさなどを数値で固定させたい時に使います。 **note:**Xcodeではのキャンバスと、実際のレイアウトは異なるということは頭に入れておいてもいいかもしれません。 ストーリーボードのViewControllerはデフォルトで600px × 600pxの大きさ。 対して、

  • 佐藤 剛士
3 min read
iOS

Tips:画面サイズ80%の大きさで画像を置く

Auto Layoutを使って画面サイズより80%の大きさで画像を置くやり方を見ていきたいと思います。 スプラッシュ画面などで、アプリアイコンを表示するときに使えるTipsだと思います。 今回の作るレイアウト 今回作るレイアウトを一度まとめます。 Image Viewを親ビューに対して垂直方向、水平方向ともに中心に置く X座標とY座標が決まります。 Image Viewの幅を親ビューの幅の80%の大きさにする 幅(Width)が決まります。 Image Viewのアスペクト比を幅高さ1:1にする 高さ(Height)が決まります。 つくってみよう! ではさっそく作ってみましょう。 新しくプロジェクトを作成して、Main.storyboardを開きます。 Object LibraryからImage Viewを選んでView Controllerに置きます。 Image

  • 佐藤 剛士
3 min read
Auto Layout

レイアウトの救世主Stack Viewを使ってみよう

Auto Layoutには実は重大な欠点がありました。 それは、、 レイアウトの修正が大変 ということです。 レイアウトする要素が増えれば振れるに従って隣のビューとの関係も複雑になってしまいます。 例えば、画面上にボタンを縦に3つ並べるレイアウトを考えてみましょう。 ボタンをそれぞれ同じ大きさに縦に3つ並べるレイアウトを作ってみます。 このとき3つのボタンと親ビューとの関係性はざっと数えた分でも10個できてしまいます。 設定によってはそれ以上になることも考えられるでしょう。 ここで、ボタンを4つに増やしたいと思ったらどうでしょう? 少なくとも垂直方向の関係性は見直す必要があるでしょう。 ボタンが3つから4つになったとこで、親ビューとボタン同士の隙間の幅が変わることになるからです。 これはもう一大事です。 制約を1つずつ見なおしてボタンを増やすか、いっそのこと全ての制約を一度全部解除して、もう一度設定し直すかをしなければいけません。 実際私はこのような場合は制約を全部解除して、全ての制約を設定しなおしていました。 この方が、制約を修正するよりもかえって早いことが多かったからです。 しかし、一度設定したものを毎回全てリセットしていくのもやりきれない思いがします。 しかも、レイアウトの変更などはしょっちゅう行われます。 あとでボタンが必要になったなんてことは日常茶飯事です。

  • 佐藤 剛士
4 min read
iOS

Auto Layoutを始める前に

数年前、iPhone4sが全盛期のころまでは、iOSアプリの開発者は各端末のレイアウトを考える必要はありませんでした。 初代iPhoneからiPhone4sまでは画面サイズは一緒だったからです。 その頃に端末サイズのレイアウトで苦労していたのはAndroidアプリのエンジニアでした。(今もそうですが。。) 各メーカーごとに端末のサイズが異なり、それに合わせてアプリをデザインしなければなりませんでした。 しかし、2010年にiOSで動くタブレット、iPadが発売され、2012年にiPhone5が発売され、iOSエンジニアも各端末ごとのレイアウトをそれぞれで設定しなければいけなくなりました。 以下は、2015年12月現在で発売されているiOS端末の画面サイズの一覧です。 ピクセル解像度は物理的なピクセルを計ったもので、ポイント解像度はプログラムからアクセスする座標系で計った解像度です。 各端末ごとに、異なっていることが一目瞭然です。 異なる画面サイズでも、うまい具合に画面レイアウトができるようにする機能がAuto Layoutです。 iOSエンジニアにとっては避けては通れない重要な機能となりつつあります。 これから何回か記事をわたって、Auto Layoutを解説していきたいと思います。 Auto Layoutの概要、仕組み、具体的な機能を網羅するつもりです。 この記事を通して、Auto

  • 佐藤 剛士
2 min read