Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

iOSプログラミングでAutoLayoutを数式のように記述する

949 views

Published on

iOSプログラミングで、AutoLayoutを数式のように記述する方法について、自作や多作のフレームワークの紹介をしています。

Published in: Software
  • Be the first to comment

iOSプログラミングでAutoLayoutを数式のように記述する

  1. 1. iOSプログラミングで AutoLayoutを数式のように 記述する方法 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 1
  2. 2. 自己紹介 • 藤本尚邦"(@%isa) • h+ps://github.com/%isa • フリーランスプログラマー • RubyCocoaフレームワーク原作者 • Mac開発歴、薄く長く約25年 • iOS開発歴、1年弱 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 2
  3. 3. AutoLayoutの基本 あるビューの位置やサイズを、別の何かとの関係式 として定義すること: ビューXの縦幅 = ビューYの縦幅 × A + B ビューXの縦幅 = ビューXの横幅 ビューXの上端 = 上部マージン + A ビューXの横幅 = A (※"AとBは定数) 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 3
  4. 4. AutoLayoutの基本 別の何かは、ビューの位置やサイズとは限りません: • 自身または他のビューの位置や高さ • マージン(UILayoutSupportプロトコル) • なし(nil) 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 4
  5. 5. AutoLayoutの基本 iOS/Mac(OS(Xプログラミングでは、この関係式を NSLayoutConstraintクラスのオブジェクトとして扱 います。 つまり、NSLayoutConstraint(レイアウト制約)を定義 することが、AutoLayoutプログラミングの基本とな ります。 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 5
  6. 6. レイアウト例 ・ mainViewの高さ = baseViewの高さ 3/4 ・ mainViewの上端 = baseViewの上端 + 8 ・ mainViewの左端 = baseViewの左端 + 8 ・ mainViewの右端 = baseViewの右端 ­ 8 ・ infoViewの上端 = mainViewの下端 + 8 ・ infoViewの左端 = baseViewの左端 + 8 ・ infoViewの右端 = baseViewの右端 ­ 8 ・ infoViewの下端 = baseViewの下端 ­ 8 baseView mainView infoView 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 6
  7. 7. AutoLayoutを定義する方法 1. storyboard/xibファイルをXcodeのGUIで編集 2. プログラムでNSLayoutConstraintを生成 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 7
  8. 8. 質問です • AutoLayoutを、Xcode-GUIではなくプログラムで 定義することはありますか? • どんなときにプログラムで定義しますか? 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 8
  9. 9. この発表ではプログラムで のNSLayoutConstraint定義 に的を絞ります 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 9
  10. 10. NSLayoutConstraintの生成方法 1. ビジュアル言語で制約を記述し、文字列引数とし て与えて生成 2. 制約に関係する全ての値を引数に与えて生成 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 10
  11. 11. ビジュアル言語 • プログラム実行時に構文がチェックされる • つまり走らせてみなければわからない • 覚えるのも面倒 • 実用に難ありなので、ここでは触れません 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 11
  12. 12. ならば全ての値を引数渡し class NSLayoutConstraint: NSObject { convenience init(item view1: AnyObject, attribute attr1: NSLayoutAttribute, relatedBy relation: NSLayoutRelation, toItem view2: AnyObject?, attribute attr2: NSLayoutAttribute, multiplier multiplier: CGFloat, constant c: CGFloat) } 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 12
  13. 13. 引数多すぎワロたwww 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 13
  14. 14. 実際に使うとこんな感じ… 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 14
  15. 15. NSLayoutConstraint baseView.addConstraints([ NSLayoutConstraint( item: mainView, attribute: .Height, relatedBy: .Equal, toItem: baseView, attribute: .Height, multiplier: 3.0 / 4.0, constant: 0), NSLayoutConstraint( item: mainView, attribute: .Leading, relatedBy: .Equal, toItem: baseView, attribute: .Leading, multiplier: 1, constant: 8), NSLayoutConstraint( item: mainView, attribute: .Top, relatedBy: .Equal, toItem: baseView, attribute: .Top, multiplier: 1, constant: 8), NSLayoutConstraint( item: mainView, attribute: .Trailing, relatedBy: .Equal, toItem: baseView, attribute: .Trailing, multiplier: 1, constant: -8), // 以下、長いので略 ]) 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 15
  16. 16. 文字多すぎワロた \(^o^)/ 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 16
  17. 17. ワロえない (´・ω・`) 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 17
  18. 18. NSLayoutConstraint.なんて 大っ嫌いなんだからねっ! ٩(๑`^´๑)۶ 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 18
  19. 19. ? 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 19
  20. 20. ! 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 20
  21. 21. !藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 21
  22. 22. こんな風に書けたら読み書きしやす いなぁ baseView.addConstraints([ mainView[.Height] * 4 == baseView[.Height] * 3, mainView[.Leading] == baseView[.Leading] + 8, mainView[.Top] == baseView[.Top] + 8, mainView[.Trailing] == baseView[.Trailing] - 8, // 以下も略さないよ infoView[.Top] == mainView[.Bottom] + 8, infoView[.Leading] == baseView[.Leading] + 8, infoView[.Trailing] == baseView[.Trailing] - 8, infoView[.Bottom] == baseView[.Bottom] - 8, ]) 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 22
  23. 23. そこで奥さん! FormulaStyleConstraint ですよ! 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 23
  24. 24. FormulaStyleConstraint NSLayoutConstraintを等式・不等式などの数式で定 義できるようにするSwi/用のフレームワーク h"ps://github.com/0isa/FormulaStyleConstraint 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 24
  25. 25. FormulaStyleConstraintの使用例 baseView.addConstraints([ mainView[.Height] * 4 == baseView[.Height] * 3, mainView[.Leading] == baseView[.Leading] + 8, mainView[.Top] == baseView[.Top] + 8, mainView[.Trailing] == baseView[.Trailing] - 8, infoView[.Top] == mainView[.Bottom] + 8, infoView[.Leading] == baseView[.Leading] + 8, infoView[.Trailing] == baseView[.Trailing] - 8, infoView[.Bottom] == baseView[.Bottom] - 8, ]) 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 25
  26. 26. FormulaStyleConstraintの特徴 • NSLayoutConstraintの数式による定義に目的を絞 ったシンプルな構成 • ソースコードはたったの154行、実装の理解が容 易です2(バージョン1.2) 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 26
  27. 27. FormulaStyleConstraintの課題 • UILayoutSupportプロトコルのサポート • マージン(topLayoutMargin,3 bo5omLayoutMargin)を扱えない • Swi932.03の3protocol3extension3でおそらく対応 可能 • Mac3OS3Xのサポート 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 27
  28. 28. FormulaStyleConstraintの競合品 制約を数式で定義するというアイディアは、誰かが すでに作ってる可能性大。しかし、自作する楽しみ を味わいたかったので調べずに作りました。 ひとまず完成してから調べたところ、やっぱりあり ました(´・ω・`) 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 28
  29. 29. Cartography Using&Cartography,&you&can&set&up&your&Auto&Layout& constraints&in&declara7ve&code&and&without&any& stringly&typing! h"ps://github.com/robb/Cartography 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 29
  30. 30. Cartographyの使用例 layout(baseView, mainView) { $1.height == $0.height * (3.0 / 4.0) $1.Leading == $0.leading + 8 $1.top == $0.top + 8 $1.trailing = $0.trailing - 8 // 以下略 } 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 30
  31. 31. Cartographyの特徴 • 制約の定義をブロック内に記述するDSLタイプ • 整列(align)などの拡張機能あり • ソースコード約1400行(バージョン0.5) • 名前が短くてかっこいい • GitHubのスター数約30007(FormulaStyleConstraint は0、ゼロ、Nothing) 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 31
  32. 32. 開発にあたっての感想など • 初めてTravis(CIを使ってみた( バッジを付け てみたかっただけ) • 初めてCarthageに対応してみた(これは便利) • 初めてプルリクをもらった((ただしボットにw) • ひとり焼き肉、ひとりディズニーランド、ひとり 美ら海水族館、ひとりGitHub 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 32
  33. 33. まとめ FormulaStyleConstraintにせよ、Cartographyにせ よ、素でNSLayoutConstraintのコードを書くよりは るかに楽ちんなので、AutoLayoutをプログラムで書 いている人にはたいへんオススメです! • h#ps://github.com/1isa/FormulaStyleConstraint • h#ps://github.com/robb/Cartography 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 33
  34. 34. Thank&you! 藤本尚邦!/!Cocoa勉強会(関東)!#74!2015年9月5日 34

×