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

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

VFLを使ってみよう

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

Auto Layoutをコードから使おう

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

Auto Layoutを使ってみよう

前回の記事でAuto Layoutがどんな機能なのかを説明しました。 今回は実際にAuto Layoutを使ってみたいと思います。 サンプルとしてViewを中央配置するレイアウトを作ってみたいと思います。 レイアウトをするときは、前回言ったとおり 今レイアウトしている要素のX軸、Y軸、幅(Width)、高さ(Height)が決まっているか? を考えながらレイアウトしましょう。 上手くいくと思います。 Auto Layoutの制約の追加する方法は大きく分けて2つあります。 「Align」「Pin」の2つです。 Alignは2つ以上のビューを整列させる時に使います。 Pinは隣り合ったビューの距離、 »

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

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