2018年11月23日に行われた.NETラボ 勉強会 2018年11月でLTした資料です。 https://dotnetlab.connpass.com/event/102490/

1. Xamarin.iOSでAuto Layoutをコード
から書く際に便利なライブラリ
2018/11/23
.NETラボ 勉強会 2018年11月
なかしょ（中島進也）

2. Profile
• 名前：なかしょ（中島 進也）
• Twitter：@nakasho_dev
• ブログ：なかしょの技術日誌
http://nakasho-dev.hatenablog.jp/
• 最近の興味
TDD、アジャイル開発、Xamarin、Chatbot、Tizen
• 主な参加コミュニティ
JXUG、.NETラボ、Cogbot、Teratail、TestNight
※本資料は私個人の意見であり、所属企業・部門見解を代表するもの
ではありません。
2

3. Xamarin.iOSでInterface Builder
3

4. StoryBoardのXML
4

5. StoryBoardを使うときに発生するデメリット
• チーム開発においてGitのコンフリクトがほぼ確実に発生して、
XMLを編集するよりInterface Builderで作り直したほうが良
いレベル。
• Dependency Injectionができない
• ソースコードとの関係性が良く分からない
5

6. コードでAutoLayoutを記述すると．．．
translatedLabel.HeightAnchor.ConstraintEqualTo(20).Active =
true;
translatedLabel.CenterXAnchor.ConstraintEqualTo(View.CenterX
Anchor).Active = true;
translatedLabel.TopAnchor.ConstraintEqualTo(translateButton.Bo
ttomAnchor, 20).Active = true;
translatedLabel.LeftAnchor.ConstraintEqualTo(View.LayoutMargi
nsGuide.LeftAnchor).Active = true;
translatedLabel.RightAnchor.ConstraintEqualTo(View.LayoutMarg
insGuide.RightAnchor).Active = true;
6
ラベル一つで
こんなに設定が必要
参考：https://github.com/TomohiroSuzuki128/XamAppCenterSample2018

7. 一つの画面に制約ってたくさんあるよね．．．
7
英語を入力してください
I Have a pen.
変換結果
私はペンを持つ
日本語に変換
英語を入力してください
I Have a pen.
変換結果
私はペンを持つ
日本語に変換

8. そこでCirrious.FluentLayout
8
Easy API for using
AutoLayout in iOS

9. コードが短く直感的に書ける
View.AddConstraints(
translatedLabel.Height().EqualTo(20),
translatedLabel.WithSameCenterX(View),
translatedLabel.AtTopOf(translateButton, 20),
translatedLabel.ToLeftMargin(View),
translatedLabel.ToRightMargin(View)
);
9
参考：https://github.com/FluentLayout/Cirrious.FluentLayout

10. AutoLayoutのコーディング支援ライブラリ
• Cirrious.FluentLayout
https://github.com/FluentLayout/Cirrious.FluentLayout
• Masonry
https://github.com/xamarin/XamarinComponents/tree/master/iO
S/Masonry
• PureLayout.Net
https://github.com/mallibone/PureLayout.Net
• SnapKit.Xamarin
https://github.com/Tylerian/SnapKit.Xamarin
10

11. AutoLayoutをコードで書く際の注意点
• UIKit のAPIの仕様変更時にコードの修正が必要
Interface Builderを使っていたら自動で対応できることが多い
支援ライブラリがすぐに対応してくれると負担は減る
• AutoLayoutの制約違反が実行時にしか分からない
Interface Builderを使っていたら編集時に分かる
• 支援ライブラリの更新が止まるリスク
11

12. ご清聴ありがとうございました。
なかしょ（中島 進也）
@nakasho_dev
12