SlideShare a Scribd company logo
1 of 19
Download to read offline
3 Auto Layout Tips
デジタルサーカス(株)⻑⾧長⾕谷川智希
⾃自⼰己紹介
・ ⻑⾧長⾕谷川智希 / デジタルサーカス(株) 副団⻑⾧長CTO
・ 開発系趣味: iOSアプリ開発, Web開発
・ その他趣味: レンタルカートレース, 電⼦子⼯工作(mbed), …
と も き
@tomzoh
iOS
執筆中
デジタルサーカス(株)
・ Webサイト受託開発
・ スマホアプリ受託開発
・ ⾃自社サービス
(PHP, CakePHP, Drupal)
(iOS, Android)
(http://appbuilder.jp)
Twitter: @tomzoh Yo: TOMZOH
Twitter: @tomzoh Yo: TOMZOH
今⽇日のテーマ:
3 Auto Layout Tips
導⼊入
Auto Layout
・ iOS6から導⼊入されたUI部品のレイアウトの
⽅方法。
・ UI部品の位置や⼤大きさを「制約」として定義
する。
・ 右の例例の場合、以下を制約として定義して
いる。
・ 上・左・右の余⽩白

(Top / Leading / Trailing Space)
・ ⾼高さ

(Height)

なぜいまAuto Layoutの話?
・ iPhone6, 6Plus発売、画⾯面バリエーション増加。
・ Auto Layout不不可避になった。
・ 今までは使わなくてもアプリは作れたので、意外とiOS開発
経験の⻑⾧長いエンジニアほどAuto Layoutになじみが無かった
りする。
・ そんじゃ⾃自分がこれまでに得た知⾒見見をシェアしよう!
Auto Layout設定の基本
Auto Layoutの設定の基本
・ Auto Layout設定の基本はシンプル。

「要素の位置と⼤大きさを過不不⾜足なく定義する」こと。
(x, y)
(w, h)
頻出パターン
パターン1: 左右に伸びる

上と左の余⽩白(位置)

右の余⽩白と⾼高さ(⼤大きさ)
パターン2: サイズ固定

上と左の余⽩白(位置)

幅と⾼高さ(⼤大きさ)
パターン3: サイズ可変

上と左の余⽩白(位置)

右と下の余⽩白(⼤大きさ)
パターン2: サイズ固定

上と左の余⽩白(位置)

幅と⾼高さ(⼤大きさ)
パターン1: 左右に伸びる

上と左の余⽩白(位置)

右の余⽩白と⾼高さ(⼤大きさ)
パターン3: サイズ可変

上と左の余⽩白(位置)

右と下の余⽩白(⼤大きさ)
3 Auto Layout Tips
(1) Outlet経由で制約を変更更
・ 制約にはOutletを作ることができる。
・ Outlet = Interface Builder(GUI)で作ったUI部品とクラ
スプロパティを関連づける仕組み。
・ 「中に⼊入るテキストの⻑⾧長さで⾼高さが変わるUILabel」

→ UILabelの⾼高さの制約をOutletにすると便便利利。
(2) Auto Layoutのタイミング
・ Outlet経由で制約を変更更する場合、viewDidLoad(_:)ではダメ。
・ その後Auto Layoutが動作して制約ベースの場所・サイズに戻されてしまう。
・ viewDidLayoutSubviews()の中で触る。
(3) UIScrollView
・ UIScrollViewの制約はちょっと⾯面倒。
・ 2セットの制約が必要。
・ UIScrollView⾃自体の位置と⼤大きさ
・ 中のコンテンツ(右図のUIView)の位置と⼤大きさ
・ UIViewの⽅方が⼤大きければスクロールが発⽣生する。
・ 中のコンテンツは⼤大きなUIViewを作って、UIScrollViewの直
接の⼦子どもはそれだけにするのが吉。
UIView
UIScrollView画⾯面
これだけ押さえれば
Auto Layout
とりあえず使えるはず。
Enjoy Auto Layout!
ありがとうございました。
@tomzoh
2⽉月から⼀一緒に開発してくださるパートナーさん
iOS, Android各1名募集中です。

More Related Content

Viewers also liked

BaseViewControllerは作りたくない
BaseViewControllerは作りたくないBaseViewControllerは作りたくない
BaseViewControllerは作りたくない今城 善矩
 
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計Taketo Sano
 
第49回HTML5勉強会 Google I/O 2014サマリー
第49回HTML5勉強会 Google I/O 2014サマリー第49回HTML5勉強会 Google I/O 2014サマリー
第49回HTML5勉強会 Google I/O 2014サマリーTakuya Oikawa
 
アップルのテンプレートは有害と考えられる
アップルのテンプレートは有害と考えられるアップルのテンプレートは有害と考えられる
アップルのテンプレートは有害と考えられるBrian Gesiak
 
サイボウズの企業風土
サイボウズの企業風土サイボウズの企業風土
サイボウズの企業風土chika_nakazawa
 
各アプリケーションの概要(クラウド版)
各アプリケーションの概要(クラウド版)各アプリケーションの概要(クラウド版)
各アプリケーションの概要(クラウド版)Cybozucommunity
 
各アプリケーションの概要(パッケージ版)
各アプリケーションの概要(パッケージ版)各アプリケーションの概要(パッケージ版)
各アプリケーションの概要(パッケージ版)Cybozucommunity
 
DeNAにおける機械学習・深層学習活用
DeNAにおける機械学習・深層学習活用DeNAにおける機械学習・深層学習活用
DeNAにおける機械学習・深層学習活用Kazuki Fujikawa
 

Viewers also liked (8)

BaseViewControllerは作りたくない
BaseViewControllerは作りたくないBaseViewControllerは作りたくない
BaseViewControllerは作りたくない
 
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計
 
第49回HTML5勉強会 Google I/O 2014サマリー
第49回HTML5勉強会 Google I/O 2014サマリー第49回HTML5勉強会 Google I/O 2014サマリー
第49回HTML5勉強会 Google I/O 2014サマリー
 
アップルのテンプレートは有害と考えられる
アップルのテンプレートは有害と考えられるアップルのテンプレートは有害と考えられる
アップルのテンプレートは有害と考えられる
 
サイボウズの企業風土
サイボウズの企業風土サイボウズの企業風土
サイボウズの企業風土
 
各アプリケーションの概要(クラウド版)
各アプリケーションの概要(クラウド版)各アプリケーションの概要(クラウド版)
各アプリケーションの概要(クラウド版)
 
各アプリケーションの概要(パッケージ版)
各アプリケーションの概要(パッケージ版)各アプリケーションの概要(パッケージ版)
各アプリケーションの概要(パッケージ版)
 
DeNAにおける機械学習・深層学習活用
DeNAにおける機械学習・深層学習活用DeNAにおける機械学習・深層学習活用
DeNAにおける機械学習・深層学習活用
 

Similar to 3 auto layout tips

はじめてのiOSアプリ開発 Swift対応版
はじめてのiOSアプリ開発 Swift対応版はじめてのiOSアプリ開発 Swift対応版
はじめてのiOSアプリ開発 Swift対応版Tomoki Hasegawa
 
TestFlightみたいなのを自作する
TestFlightみたいなのを自作するTestFlightみたいなのを自作する
TestFlightみたいなのを自作するTomoki Hasegawa
 
Swiftのプロパティオブザーバを使い倒す
Swiftのプロパティオブザーバを使い倒すSwiftのプロパティオブザーバを使い倒す
Swiftのプロパティオブザーバを使い倒すTomoki Hasegawa
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイトrie05
 
【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf
【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf
【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdfTakeshiFukae
 
機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介Kazuma Kadomae
 
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版Tomoki Hasegawa
 
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由Masakazu Muraoka
 
iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術Tomoki Hasegawa
 
AppStore申請を一式まるっと自動化する
AppStore申請を一式まるっと自動化するAppStore申請を一式まるっと自動化する
AppStore申請を一式まるっと自動化するTomoki Hasegawa
 
やはりお前らのCore Dataの使い方も間違っている
やはりお前らのCore Dataの使い方も間違っているやはりお前らのCore Dataの使い方も間違っている
やはりお前らのCore Dataの使い方も間違っている今城 善矩
 
0からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.00からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.0Kenta Nakamura
 
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイントMonaca
 
JPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AI
JPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AIJPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AI
JPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AIMPN Japan
 
2018年に於ける HTML の役割(実践編)
2018年に於ける HTML の役割(実践編)2018年に於ける HTML の役割(実践編)
2018年に於ける HTML の役割(実践編)UX Ojisan
 
Windows Phone / iOS / Android アプリ同時開発のススメ
Windows Phone / iOS / Android アプリ同時開発のススメWindows Phone / iOS / Android アプリ同時開発のススメ
Windows Phone / iOS / Android アプリ同時開発のススメYoshito Tabuchi
 
何を自動化するのか
何を自動化するのか何を自動化するのか
何を自動化するのか暁 三宅
 
Portfolio
PortfolioPortfolio
PortfolioZepJPN
 

Similar to 3 auto layout tips (20)

はじめてのiOSアプリ開発 Swift対応版
はじめてのiOSアプリ開発 Swift対応版はじめてのiOSアプリ開発 Swift対応版
はじめてのiOSアプリ開発 Swift対応版
 
Stargazer Meetup #1
Stargazer Meetup #1Stargazer Meetup #1
Stargazer Meetup #1
 
TestFlightみたいなのを自作する
TestFlightみたいなのを自作するTestFlightみたいなのを自作する
TestFlightみたいなのを自作する
 
Swiftのプロパティオブザーバを使い倒す
Swiftのプロパティオブザーバを使い倒すSwiftのプロパティオブザーバを使い倒す
Swiftのプロパティオブザーバを使い倒す
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
 
【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf
【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf
【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf
 
機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介
 
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
 
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
 
iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術
 
AppStore申請を一式まるっと自動化する
AppStore申請を一式まるっと自動化するAppStore申請を一式まるっと自動化する
AppStore申請を一式まるっと自動化する
 
やはりお前らのCore Dataの使い方も間違っている
やはりお前らのCore Dataの使い方も間違っているやはりお前らのCore Dataの使い方も間違っている
やはりお前らのCore Dataの使い方も間違っている
 
0からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.00からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.0
 
0dire_unyo
0dire_unyo0dire_unyo
0dire_unyo
 
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
 
JPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AI
JPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AIJPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AI
JPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AI
 
2018年に於ける HTML の役割(実践編)
2018年に於ける HTML の役割(実践編)2018年に於ける HTML の役割(実践編)
2018年に於ける HTML の役割(実践編)
 
Windows Phone / iOS / Android アプリ同時開発のススメ
Windows Phone / iOS / Android アプリ同時開発のススメWindows Phone / iOS / Android アプリ同時開発のススメ
Windows Phone / iOS / Android アプリ同時開発のススメ
 
何を自動化するのか
何を自動化するのか何を自動化するのか
何を自動化するのか
 
Portfolio
PortfolioPortfolio
Portfolio
 

More from Tomoki Hasegawa

Reading php terminal-gameboy-emulator
Reading php terminal-gameboy-emulatorReading php terminal-gameboy-emulator
Reading php terminal-gameboy-emulatorTomoki Hasegawa
 
Drupal8 〜 モダンなアーキテクチャのPHPベース OSS CMS
Drupal8 〜 モダンなアーキテクチャのPHPベース OSS CMSDrupal8 〜 モダンなアーキテクチャのPHPベース OSS CMS
Drupal8 〜 モダンなアーキテクチャのPHPベース OSS CMSTomoki Hasegawa
 
とある受託ベンダの開発環境
とある受託ベンダの開発環境とある受託ベンダの開発環境
とある受託ベンダの開発環境Tomoki Hasegawa
 
iOS Developers Conference Japan 2016
iOS Developers Conference Japan 2016iOS Developers Conference Japan 2016
iOS Developers Conference Japan 2016Tomoki Hasegawa
 
エンジニアのお祭り
エンジニアのお祭りエンジニアのお祭り
エンジニアのお祭りTomoki Hasegawa
 
勉強会のこちら側とあちら側
勉強会のこちら側とあちら側勉強会のこちら側とあちら側
勉強会のこちら側とあちら側Tomoki Hasegawa
 
tvOSでWebSocketを使う
tvOSでWebSocketを使うtvOSでWebSocketを使う
tvOSでWebSocketを使うTomoki Hasegawa
 
「これを買っている人はこれも買っています」実装してみた PHP side
「これを買っている人はこれも買っています」実装してみた PHP side「これを買っている人はこれも買っています」実装してみた PHP side
「これを買っている人はこれも買っています」実装してみた PHP sideTomoki Hasegawa
 
tvOSネイティブアプリを作る
tvOSネイティブアプリを作るtvOSネイティブアプリを作る
tvOSネイティブアプリを作るTomoki Hasegawa
 
「これを買っている人はこれも買っています」実装してみた
「これを買っている人はこれも買っています」実装してみた「これを買っている人はこれも買っています」実装してみた
「これを買っている人はこれも買っています」実装してみたTomoki Hasegawa
 
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMSDrupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMSTomoki Hasegawa
 
PHPでスマホアプリにプッシュ通知する
PHPでスマホアプリにプッシュ通知するPHPでスマホアプリにプッシュ通知する
PHPでスマホアプリにプッシュ通知するTomoki Hasegawa
 
PUSH通知証明書作成ツールを作った
PUSH通知証明書作成ツールを作ったPUSH通知証明書作成ツールを作った
PUSH通知証明書作成ツールを作ったTomoki Hasegawa
 
PHPカンファレンス福岡に 行ってきた
PHPカンファレンス福岡に 行ってきたPHPカンファレンス福岡に 行ってきた
PHPカンファレンス福岡に 行ってきたTomoki Hasegawa
 
CakePHP3ウォークスルー
CakePHP3ウォークスルーCakePHP3ウォークスルー
CakePHP3ウォークスルーTomoki Hasegawa
 
PHPerのためのSwift入門
PHPerのためのSwift入門PHPerのためのSwift入門
PHPerのためのSwift入門Tomoki Hasegawa
 
オプショナル型。 〜 なんとなく付ける ! ? 撲滅
オプショナル型。 〜 なんとなく付ける ! ? 撲滅オプショナル型。 〜 なんとなく付ける ! ? 撲滅
オプショナル型。 〜 なんとなく付ける ! ? 撲滅Tomoki Hasegawa
 
Swift事情2014夏 ~ Swift入門 beta6対応
Swift事情2014夏 ~ Swift入門 beta6対応Swift事情2014夏 ~ Swift入門 beta6対応
Swift事情2014夏 ~ Swift入門 beta6対応Tomoki Hasegawa
 
CustomOperatorで遊ぼう!
CustomOperatorで遊ぼう!CustomOperatorで遊ぼう!
CustomOperatorで遊ぼう!Tomoki Hasegawa
 

More from Tomoki Hasegawa (20)

Reading php terminal-gameboy-emulator
Reading php terminal-gameboy-emulatorReading php terminal-gameboy-emulator
Reading php terminal-gameboy-emulator
 
Drupal8 〜 モダンなアーキテクチャのPHPベース OSS CMS
Drupal8 〜 モダンなアーキテクチャのPHPベース OSS CMSDrupal8 〜 モダンなアーキテクチャのPHPベース OSS CMS
Drupal8 〜 モダンなアーキテクチャのPHPベース OSS CMS
 
とある受託ベンダの開発環境
とある受託ベンダの開発環境とある受託ベンダの開発環境
とある受託ベンダの開発環境
 
iOS Developers Conference Japan 2016
iOS Developers Conference Japan 2016iOS Developers Conference Japan 2016
iOS Developers Conference Japan 2016
 
エンジニアのお祭り
エンジニアのお祭りエンジニアのお祭り
エンジニアのお祭り
 
勉強会のこちら側とあちら側
勉強会のこちら側とあちら側勉強会のこちら側とあちら側
勉強会のこちら側とあちら側
 
tvOSでWebSocketを使う
tvOSでWebSocketを使うtvOSでWebSocketを使う
tvOSでWebSocketを使う
 
「これを買っている人はこれも買っています」実装してみた PHP side
「これを買っている人はこれも買っています」実装してみた PHP side「これを買っている人はこれも買っています」実装してみた PHP side
「これを買っている人はこれも買っています」実装してみた PHP side
 
tvOSネイティブアプリを作る
tvOSネイティブアプリを作るtvOSネイティブアプリを作る
tvOSネイティブアプリを作る
 
「これを買っている人はこれも買っています」実装してみた
「これを買っている人はこれも買っています」実装してみた「これを買っている人はこれも買っています」実装してみた
「これを買っている人はこれも買っています」実装してみた
 
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMSDrupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
 
PHPでスマホアプリにプッシュ通知する
PHPでスマホアプリにプッシュ通知するPHPでスマホアプリにプッシュ通知する
PHPでスマホアプリにプッシュ通知する
 
PUSH通知証明書作成ツールを作った
PUSH通知証明書作成ツールを作ったPUSH通知証明書作成ツールを作った
PUSH通知証明書作成ツールを作った
 
PHPカンファレンス福岡に 行ってきた
PHPカンファレンス福岡に 行ってきたPHPカンファレンス福岡に 行ってきた
PHPカンファレンス福岡に 行ってきた
 
CakePHP3ウォークスルー
CakePHP3ウォークスルーCakePHP3ウォークスルー
CakePHP3ウォークスルー
 
PHPerのためのSwift入門
PHPerのためのSwift入門PHPerのためのSwift入門
PHPerのためのSwift入門
 
Drupal on vagrant-aws
Drupal on vagrant-awsDrupal on vagrant-aws
Drupal on vagrant-aws
 
オプショナル型。 〜 なんとなく付ける ! ? 撲滅
オプショナル型。 〜 なんとなく付ける ! ? 撲滅オプショナル型。 〜 なんとなく付ける ! ? 撲滅
オプショナル型。 〜 なんとなく付ける ! ? 撲滅
 
Swift事情2014夏 ~ Swift入門 beta6対応
Swift事情2014夏 ~ Swift入門 beta6対応Swift事情2014夏 ~ Swift入門 beta6対応
Swift事情2014夏 ~ Swift入門 beta6対応
 
CustomOperatorで遊ぼう!
CustomOperatorで遊ぼう!CustomOperatorで遊ぼう!
CustomOperatorで遊ぼう!
 

3 auto layout tips