Submit Search
Upload
3 auto layout tips
•
5 likes
•
3,382 views
Tomoki Hasegawa
Follow
@tomzoh による【第13回】potatotips(iOS/Android開発Tips共有会) の発表資料です。 #potatotips
Read less
Read more
Software
Report
Share
Report
Share
1 of 19
Download Now
Download to read offline
Recommended
html5j Webプラットフォームの紹介
html5j Webプラットフォームの紹介
Osamu Monoe
カスタムコネクタ入門
カスタムコネクタ入門
ssuser6e9dab
20200829 Ctrl+Alt+BとスマホタッチでPower Automateのフローを実行してみよう
20200829 Ctrl+Alt+BとスマホタッチでPower Automateのフローを実行してみよう
ta2c
第三回北海道ワトソン勉強会 Watson + IoT 丼
第三回北海道ワトソン勉強会 Watson + IoT 丼
K Kimura
類似画像検索APIを作ってみた話
類似画像検索APIを作ってみた話
K Kimura
HTML5で作るiPhoneアプリケーション
HTML5で作るiPhoneアプリケーション
だいすけ ふるかわ
baserCMS勉強会@福岡 vol.3
baserCMS勉強会@福岡 vol.3
arata
Html5で作るiPhoneアプリケーション2010
Html5で作るiPhoneアプリケーション2010
だいすけ ふるかわ
More Related Content
Viewers also liked
BaseViewControllerは作りたくない
BaseViewControllerは作りたくない
今城 善矩
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計
Taketo Sano
第49回HTML5勉強会 Google I/O 2014サマリー
第49回HTML5勉強会 Google I/O 2014サマリー
Takuya Oikawa
アップルのテンプレートは有害と考えられる
アップルのテンプレートは有害と考えられる
Brian Gesiak
サイボウズの企業風土
サイボウズの企業風土
chika_nakazawa
各アプリケーションの概要(クラウド版)
各アプリケーションの概要(クラウド版)
Cybozucommunity
各アプリケーションの概要(パッケージ版)
各アプリケーションの概要(パッケージ版)
Cybozucommunity
DeNAにおける機械学習・深層学習活用
DeNAにおける機械学習・深層学習活用
Kazuki Fujikawa
Viewers also liked
(8)
BaseViewControllerは作りたくない
BaseViewControllerは作りたくない
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計
第49回HTML5勉強会 Google I/O 2014サマリー
第49回HTML5勉強会 Google I/O 2014サマリー
アップルのテンプレートは有害と考えられる
アップルのテンプレートは有害と考えられる
サイボウズの企業風土
サイボウズの企業風土
各アプリケーションの概要(クラウド版)
各アプリケーションの概要(クラウド版)
各アプリケーションの概要(パッケージ版)
各アプリケーションの概要(パッケージ版)
DeNAにおける機械学習・深層学習活用
DeNAにおける機械学習・深層学習活用
Similar to 3 auto layout tips
はじめてのiOSアプリ開発 Swift対応版
はじめてのiOSアプリ開発 Swift対応版
Tomoki Hasegawa
Stargazer Meetup #1
Stargazer Meetup #1
Tomoki Hasegawa
TestFlightみたいなのを自作する
TestFlightみたいなのを自作する
Tomoki Hasegawa
Swiftのプロパティオブザーバを使い倒す
Swiftのプロパティオブザーバを使い倒す
Tomoki Hasegawa
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf
【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf
TakeshiFukae
機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介
Kazuma Kadomae
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
Tomoki Hasegawa
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
Masakazu Muraoka
iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術
Tomoki Hasegawa
AppStore申請を一式まるっと自動化する
AppStore申請を一式まるっと自動化する
Tomoki Hasegawa
やはりお前らのCore Dataの使い方も間違っている
やはりお前らのCore Dataの使い方も間違っている
今城 善矩
0からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.0
Kenta Nakamura
0dire_unyo
0dire_unyo
Kei Oyama
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
Monaca
JPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AI
JPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AI
MPN Japan
2018年に於ける HTML の役割(実践編)
2018年に於ける HTML の役割(実践編)
UX Ojisan
Windows Phone / iOS / Android アプリ同時開発のススメ
Windows Phone / iOS / Android アプリ同時開発のススメ
Yoshito Tabuchi
何を自動化するのか
何を自動化するのか
暁 三宅
Portfolio
Portfolio
ZepJPN
Similar to 3 auto layout tips
(20)
はじめてのiOSアプリ開発 Swift対応版
はじめてのiOSアプリ開発 Swift対応版
Stargazer Meetup #1
Stargazer Meetup #1
TestFlightみたいなのを自作する
TestFlightみたいなのを自作する
Swiftのプロパティオブザーバを使い倒す
Swiftのプロパティオブザーバを使い倒す
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf
【AI:ML#16】Amazon Lexを用いたチャットボットの構築.pdf
機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術
AppStore申請を一式まるっと自動化する
AppStore申請を一式まるっと自動化する
やはりお前らのCore Dataの使い方も間違っている
やはりお前らのCore Dataの使い方も間違っている
0からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.0
0dire_unyo
0dire_unyo
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
JPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AI
JPC2017 [F3] ネクストセット アドオンでつなぐOffice 365 と IoT, ロボット, AI
2018年に於ける HTML の役割(実践編)
2018年に於ける HTML の役割(実践編)
Windows Phone / iOS / Android アプリ同時開発のススメ
Windows Phone / iOS / Android アプリ同時開発のススメ
何を自動化するのか
何を自動化するのか
Portfolio
Portfolio
More from Tomoki Hasegawa
Reading php terminal-gameboy-emulator
Reading php terminal-gameboy-emulator
Tomoki Hasegawa
Drupal8 〜 モダンなアーキテクチャのPHPベース OSS CMS
Drupal8 〜 モダンなアーキテクチャのPHPベース OSS CMS
Tomoki Hasegawa
とある受託ベンダの開発環境
とある受託ベンダの開発環境
Tomoki Hasegawa
iOS Developers Conference Japan 2016
iOS Developers Conference Japan 2016
Tomoki Hasegawa
エンジニアのお祭り
エンジニアのお祭り
Tomoki Hasegawa
勉強会のこちら側とあちら側
勉強会のこちら側とあちら側
Tomoki Hasegawa
tvOSでWebSocketを使う
tvOSでWebSocketを使う
Tomoki Hasegawa
「これを買っている人はこれも買っています」実装してみた PHP side
「これを買っている人はこれも買っています」実装してみた PHP side
Tomoki Hasegawa
tvOSネイティブアプリを作る
tvOSネイティブアプリを作る
Tomoki Hasegawa
「これを買っている人はこれも買っています」実装してみた
「これを買っている人はこれも買っています」実装してみた
Tomoki Hasegawa
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Tomoki Hasegawa
PHPでスマホアプリにプッシュ通知する
PHPでスマホアプリにプッシュ通知する
Tomoki Hasegawa
PUSH通知証明書作成ツールを作った
PUSH通知証明書作成ツールを作った
Tomoki Hasegawa
PHPカンファレンス福岡に 行ってきた
PHPカンファレンス福岡に 行ってきた
Tomoki Hasegawa
CakePHP3ウォークスルー
CakePHP3ウォークスルー
Tomoki Hasegawa
PHPerのためのSwift入門
PHPerのためのSwift入門
Tomoki Hasegawa
Drupal on vagrant-aws
Drupal on vagrant-aws
Tomoki Hasegawa
オプショナル型。 〜 なんとなく付ける ! ? 撲滅
オプショナル型。 〜 なんとなく付ける ! ? 撲滅
Tomoki Hasegawa
Swift事情2014夏 ~ Swift入門 beta6対応
Swift事情2014夏 ~ Swift入門 beta6対応
Tomoki Hasegawa
CustomOperatorで遊ぼう!
CustomOperatorで遊ぼう!
Tomoki Hasegawa
More from Tomoki Hasegawa
(20)
Reading php terminal-gameboy-emulator
Reading php terminal-gameboy-emulator
Drupal8 〜 モダンなアーキテクチャのPHPベース OSS CMS
Drupal8 〜 モダンなアーキテクチャのPHPベース OSS CMS
とある受託ベンダの開発環境
とある受託ベンダの開発環境
iOS Developers Conference Japan 2016
iOS Developers Conference Japan 2016
エンジニアのお祭り
エンジニアのお祭り
勉強会のこちら側とあちら側
勉強会のこちら側とあちら側
tvOSでWebSocketを使う
tvOSでWebSocketを使う
「これを買っている人はこれも買っています」実装してみた PHP side
「これを買っている人はこれも買っています」実装してみた PHP side
tvOSネイティブアプリを作る
tvOSネイティブアプリを作る
「これを買っている人はこれも買っています」実装してみた
「これを買っている人はこれも買っています」実装してみた
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
Drupal 8 - モダンなアーキテクチャのPHPベースOSS CMS
PHPでスマホアプリにプッシュ通知する
PHPでスマホアプリにプッシュ通知する
PUSH通知証明書作成ツールを作った
PUSH通知証明書作成ツールを作った
PHPカンファレンス福岡に 行ってきた
PHPカンファレンス福岡に 行ってきた
CakePHP3ウォークスルー
CakePHP3ウォークスルー
PHPerのためのSwift入門
PHPerのためのSwift入門
Drupal on vagrant-aws
Drupal on vagrant-aws
オプショナル型。 〜 なんとなく付ける ! ? 撲滅
オプショナル型。 〜 なんとなく付ける ! ? 撲滅
Swift事情2014夏 ~ Swift入門 beta6対応
Swift事情2014夏 ~ Swift入門 beta6対応
CustomOperatorで遊ぼう!
CustomOperatorで遊ぼう!
3 auto layout tips
1.
3 Auto Layout
Tips デジタルサーカス(株)⻑⾧長⾕谷川智希
2.
⾃自⼰己紹介 ・ ⻑⾧長⾕谷川智希 /
デジタルサーカス(株) 副団⻑⾧長CTO ・ 開発系趣味: iOSアプリ開発, Web開発 ・ その他趣味: レンタルカートレース, 電⼦子⼯工作(mbed), … と も き @tomzoh iOS 執筆中
3.
デジタルサーカス(株) ・ Webサイト受託開発 ・ スマホアプリ受託開発 ・
⾃自社サービス (PHP, CakePHP, Drupal) (iOS, Android) (http://appbuilder.jp) Twitter: @tomzoh Yo: TOMZOH
4.
Twitter: @tomzoh Yo:
TOMZOH
5.
今⽇日のテーマ: 3 Auto Layout
Tips
6.
導⼊入
7.
Auto Layout ・ iOS6から導⼊入されたUI部品のレイアウトの ⽅方法。 ・
UI部品の位置や⼤大きさを「制約」として定義 する。 ・ 右の例例の場合、以下を制約として定義して いる。 ・ 上・左・右の余⽩白 (Top / Leading / Trailing Space) ・ ⾼高さ (Height)
8.
なぜいまAuto Layoutの話? ・ iPhone6,
6Plus発売、画⾯面バリエーション増加。 ・ Auto Layout不不可避になった。 ・ 今までは使わなくてもアプリは作れたので、意外とiOS開発 経験の⻑⾧長いエンジニアほどAuto Layoutになじみが無かった りする。 ・ そんじゃ⾃自分がこれまでに得た知⾒見見をシェアしよう!
9.
Auto Layout設定の基本
10.
Auto Layoutの設定の基本 ・ Auto
Layout設定の基本はシンプル。 「要素の位置と⼤大きさを過不不⾜足なく定義する」こと。 (x, y) (w, h)
11.
頻出パターン パターン1: 左右に伸びる 上と左の余⽩白(位置) 右の余⽩白と⾼高さ(⼤大きさ) パターン2: サイズ固定 上と左の余⽩白(位置) 幅と⾼高さ(⼤大きさ) パターン3:
サイズ可変 上と左の余⽩白(位置) 右と下の余⽩白(⼤大きさ)
12.
パターン2: サイズ固定 上と左の余⽩白(位置) 幅と⾼高さ(⼤大きさ) パターン1: 左右に伸びる 上と左の余⽩白(位置) 右の余⽩白と⾼高さ(⼤大きさ) パターン3:
サイズ可変 上と左の余⽩白(位置) 右と下の余⽩白(⼤大きさ)
13.
3 Auto Layout
Tips
14.
(1) Outlet経由で制約を変更更 ・ 制約にはOutletを作ることができる。 ・
Outlet = Interface Builder(GUI)で作ったUI部品とクラ スプロパティを関連づける仕組み。 ・ 「中に⼊入るテキストの⻑⾧長さで⾼高さが変わるUILabel」 → UILabelの⾼高さの制約をOutletにすると便便利利。
15.
(2) Auto Layoutのタイミング ・
Outlet経由で制約を変更更する場合、viewDidLoad(_:)ではダメ。 ・ その後Auto Layoutが動作して制約ベースの場所・サイズに戻されてしまう。 ・ viewDidLayoutSubviews()の中で触る。
16.
(3) UIScrollView ・ UIScrollViewの制約はちょっと⾯面倒。 ・
2セットの制約が必要。 ・ UIScrollView⾃自体の位置と⼤大きさ ・ 中のコンテンツ(右図のUIView)の位置と⼤大きさ ・ UIViewの⽅方が⼤大きければスクロールが発⽣生する。 ・ 中のコンテンツは⼤大きなUIViewを作って、UIScrollViewの直 接の⼦子どもはそれだけにするのが吉。 UIView UIScrollView画⾯面
17.
これだけ押さえれば Auto Layout とりあえず使えるはず。
18.
Enjoy Auto Layout!
19.
ありがとうございました。 @tomzoh 2⽉月から⼀一緒に開発してくださるパートナーさん iOS, Android各1名募集中です。
Download Now