iOS/iPhone/iPad/MacOSX プログラミング, Objective-C, Cocoaなど
![Cocoaの日々: Autolayoutで可変高さのビューをアニメーション](https://cdn-ak-scissors.b.st-hatena.com/image/square/8ed52c9e51507e2809ab50c1696fe2384c2df9bf/height=288;version=1;width=512/http%3A%2F%2F4.bp.blogspot.com%2F-cTVhVZKbtnA%2FUsiLi-sEQLI%2FAAAAAAAAMos%2FCjj23WPLJxs%2Fs320%2F140105-0041.png)
前回のつづき 今回はCustom Viewの高さが可変する場合について説明したいと思います。 サンプルコード: https://github.com/stack3/iOSAutoLayoutSamples サンプルコードを起動してFlexible Custom Viewを選択すると以下の画面が表示されます。 グレー背景とその上にLabelが2つ乗っていますが、これがCustom Viewです。 Resizeボタンを押すと以下のように改行が必要な文字列がLabelに設定されて、Custom Viewの高さが変わります。 ResizeボタンもCustom Viewの高さに合わせて下へ移動します。 横画面も対応できています。横画面の場合は文字が1行にたくさん入るので高さが低くなります。 STFlexibleCustomView.xib このファイルでCustom Viewのレイアウトをしています
Posted on July 19th, 2014 When Dynamic Type came out in iOS7, I was hoping to get to use it. After all, who doesn’t want to make their app more readable for users who need it? Well, it seemed really difficult to get started with it – I’m still figuring the best way to resize my iOS7 cells with AutoLayout!, so I never “had time” to work on it much, especially with more “important” features taking a
Please note that in most cases Matt's solution works as expected. But if it doesn't work for you, please, read further. To make your label automatically resize height you need to do following: Set layout constrains for label Set height constraint with low priority. It should be lower than ContentCompressionResistancePriority Set numberOfLines = 0 Set ContentHuggingPriority higher than label's heig
Auto Layoutはプログラムでも実現できます。Visual Format Languageと呼ばれるものを使います。今回はその説明ですが、あらかじめ言っておくと、自分はプログラムでAuto Layoutを実装することはやめたほうがいいと思っています。最後にその理由を説明しますが、何が駄目かを知るためにもVisual Format Languageについて説明しましょう。 サンプルコードを元に説明します。 https://github.com/stack3/STVisualFormatLanguageSample まずは、おさらい。Auto LayoutはViewどうしの相対的な配置制約にもとづいてレイアウトが実現されます。このViewどうしの制約のことをConstraintと呼びます。プログラムによるAuto Layoutは、このConstraint(NSLayoutConstrai
Visual Format Languageを使ったプログラムによるAuto Layoutについて前回説明しました。 プログラムによるAuto Layout しかし、自分はVisual Format Languageは使わない方向でいきたいと思います。またInterface Builderを嫌って、すべてプログラムによるAuto Layoutで実装することもおすすめできません。その理由を以下に述べます。 2014/3/21更新。Xcode 5以前はInterface BuilderでのAuto LayoutのConstraint設定で不便なことが多く、保守性を考えるとAuto Layoutが使える範囲は限定的ではないかという見方で記事を書いていました。Xcode 5からはInterface Builderも洗練されたので、できるだけInterface Builder + Auto Layo
補足事項まとめ 今回は、前回まで説明してきた内容の補足事項についてまとめたいと思います。 iOS 6 以前のデバイスでの表示互換性 iOS 6 以前のデバイスでの表示を修正する 前回作成したレイアウトを iOS 6 以前のデバイスで表示してみましょう。すると、下図のように上側の UIView とステータスバーの間に間隔がありません。 iOS 7 では、ステータスバーは透明でコンテンツ部に覆い被さるものに変更されました。そのため、このレイアウトで問題なかったのですが、iOS 6 ではこのレイアウトは不自然です。 この問題を修正しましょう。 制約を再設定する まず、上側の UIView に設定されている親ビューの上端との間隔に関する制約を選択して削除します。制約の削除は、制約を選択後、delete キーを押下することでできます。 次に、再度親ビューの上端との間隔に関する制約を追加します。上側の
Auto Layout で少し込み入ったレイアウトを作成する 今回は、前回より少し込み入ったレイアウトを作成してみたいと思います。今回作成するのは、下図のような3つの UIView から構成されるレイアウトです。 下側の2つの UIView はスクリーンサイズに合わせて幅が等分され、スクリーンの高さが変わっても高さが変わりません。デバイスを横向きにした際には下図のようになります。 コンポーネントを配置する では、Xcode で新しいプロジェクトを作成してください。テンプレートは Single View Application を利用します。 Main.storyboard を表示して、Canvas 内の ViewController 上に UIView を下図のように配置してください。配置の際は、ガイドラインに沿って配置します。わかりやすいように UIView には背景色を設定しています。
とりあえず Auto Layout を使ってみる 今回は実際に Auto Layout を利用して Interface Builder 上でレイアウトを作成してみたいと思います。UILabel を常にスクリーン右下に固定するという簡単なものです。 プロジェクトの作成 まず、新しい Xcode プロジェクトを作成して下さい。テンプレートは Single View Application を利用します。 コンポーネントを配置する プロジェクトを作成したら、Main.storyboard を表示して下さい。ViewController が一つ Canvas 上に表示されていると思います。この ViewController の View 上に UILabel を一つ、右下に配置して下さい。 この状態で実行してみましょう。デバイスのオリエンテーションがポートレイトの場合は特に問題なく表示されます。
様々な制約 今回は、Auto Layout で利用する様々な種類の制約について、Interface Builder の Canvas 上で確認していきたいと思います。 制約ボタンその1 まずは、Canvas 右下にあるボタン群の中の一番左側のボタンから見て行きましょう。このボタンをクリックすると、下図の様なメニューが表示されます。 これらは、コンポーネントのアライメントに関する制約を追加・編集するための機能です。上から順番に機能を確認していきましょう。 アライメント(端揃え) Leading Edges 複数のコンポーネントの Leading 側(日本語環境では左)端の水平位置を揃える制約を追加します。追加される制約はコンポーネント同士の間の Leading Alignment です。 Trailing Edges 複数のコンポーネントの Trailing 側(日本語環境では右)端の水平位
Xcode 5 の Auto Layout サポート機能 iOS 6 で Auto Layout が導入された際に、Xcode 4 の Interface Builder においても Auto Layout における制約を編集する機能が追加されました。しかし、慣れないうちはこちらが意図しない挙動をしているように見えやすく、また、コンポーネントの数が多くなると制約の数が爆発的に増えてしまう事もあり、この機能はお世辞にも使いやすいとは言い難いものでした。 Xcode 5 では、Auto Layout における制約の編集機能が一新されています。やはり、Auto Layout の制約に関する最低限の知識は必要とされるものの、制約の編集がしやすくなったことで格段に使いやすくなりました。 今回は、Xcode 5 の Auto Layout 関連機能を確認したいと思います。 Auto Layout の切
Auto Layout Auto Layout とは、iOS 6 (Mac は OS X Lion) から導入された「制約」ベースのレイアウトシステムです。これは、既存のレイアウトシステムである Autosizing を置き換える目的で導入された機能です。 Auto Layout は、込み入ったレイアウトを表現することが出来る一方、従来からのレイアウトシステムである Autoresizing 程単純ではないため、取っ掛かりづらいと感じる方も多いのではないかと思います。また、Xcode 4 の Auto Layout サポート機能がお世辞にも使いやすいとは言えないものであったことが、取っ付きにくさに拍車をかけていました。 iOS 7 のリリースに合わせて新しくリリースされた Xcode 5 では、Auto Layout サポート機能が大分使いやすいものになりました。そこで、何回かに分けて X
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く