Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Xamarin Studio 5 ではじめる StoryBoard + Auto Layout
Search
Nobuhiro Ito
July 05, 2014
Programming
2
5.9k
Xamarin Studio 5 ではじめる StoryBoard + Auto Layout
2014/07/05(Sat) Japan Xamarin User Group Conference
Nobuhiro Ito
July 05, 2014
Tweet
Share
More Decks by Nobuhiro Ito
See All by Nobuhiro Ito
Introduction of Aizome - 多言語対応とスタイル適用を両立する書式付き文字列ライブラリ
iseebi
0
110
Bitriseで本をビルドする / Build a book with Bitrise
iseebi
0
160
BitriseでmacOSアプリをビルドする / Build macOS apps with Bitrise
iseebi
1
800
iOS/Androidアプリ転送ツール TransporterPadの紹介
iseebi
0
6.1k
Apple Developer Enterprise Program でどこまでいけるのか
iseebi
0
780
ReactiveProperty を使ったアプリの設計に Realm Xamarin を組み合わせる
iseebi
0
660
ReactiveProperty で Xamarin アプリの作り方が変わった
iseebi
3
1.7k
600件のPull RequestからみたXamarinのはまりどころ
iseebi
3
4.3k
Yet Another Cross Platform Development
iseebi
0
4.2k
Other Decks in Programming
See All in Programming
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
1
320
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
150
Langfuseと歩む生成AI活用推進
licux
3
320
AIコーディングAgentとの向き合い方
eycjur
0
250
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
240
コンテキストエンジニアリング Cursor編
kinopeee
1
740
為你自己學 Python - 冷知識篇
eddie
1
330
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.6k
複雑なドメインに挑む.pdf
yukisakai1225
5
920
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
100
AWS発のAIエディタKiroを使ってみた
iriikeita
1
140
Featured
See All Featured
The Language of Interfaces
destraynor
160
25k
Into the Great Unknown - MozCon
thekraken
40
2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
A Tale of Four Properties
chriscoyier
160
23k
It's Worth the Effort
3n
187
28k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing Experiences People Love
moore
142
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A designer walks into a library…
pauljervisheath
207
24k
Agile that works and the tools we love
rasmusluckow
330
21k
Designing for Performance
lara
610
69k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Transcript
Xamarin Studio 5 Ͱ͡ΊΔ StoryBoard + Auto Layout ҏγϯ /
ҏ౻৳༟! ! 2014/07/05(Sat)! Japan Xamarin User Group Conference #1
ࣗݾհ • ҏ౻৳༟ / ҏγϯ! – @iseebi / id:iseebi! •
ϑΣϯϦϧגࣜձࣾڞಉ։ൃ෦ॴଐ! – iOS / Android / Windows 8 ͷΞϓϦ։ൃͯ͠·͢! • ίϛϡχςΟ! – εϚʔτϑΥϯษڧձ@ؔ! – ͍͢͝Haskellಡॻձ in େࡕ! • HຊಡΜͰ·͢ɻ(2ि)!
None
εςοΧʔ͋Γ·͢ʂ
ϑΣϯϦϧ͏Ұͭͷப
ओͳ࣮@Xamarin http://biz.fenrir-inc.com/application_development/casestudy_app/nhk_kouhaku.html! ! ※3࿈ଓͰͬͯͯɺୈ64ճ(Ver.3.x)͔ΒXamarin
MvvmCrossΨνͰ͢ ɾιʔεϨϕϧͰղੳͯͬͨ͠Γ! ɾ͋Μ·Γͬͯͳ͍ػೳιʔεಡΜͰͬͨΓ! ɾࣾϓϥάΠϯ࡞ͬͨΓ(ͦΖͦΖࣾNuGetϦϙδτϦཱ͍ͯͨ)! ! ɾόάݟ͚ͭͨΒͪΐ͍ͪΐ͍Pull RequestૹͬͨΓ͍ͯ͠·͢ɻ!
Xamarin 3.0 new features • Xamarin Designer for iOS! •
Xamarin.Forms! • Xamarin Studio 5.0! – NuGet! – F#! – .NET BCL Documentation! • Shared Projects! ͜Εʹ͍͓ͭͯ͠͠·͢ ͜ͷ͋ͱ͋Ί͍͞Μ͕! ͓ͯ͘͠͠Ε·͢
ࠓͷ͓͠ͳ͕͖ • Xamarin Designer for iOS ͷ͍ํ! – Storyboard ͷॳظઃఆ
– جຊૢ࡞! – Segue/Unwind Segue! – UITableView ͷ Static Cells / Dynamic Prototypes! • Auto Layout ͷ͍ํ! – Auto Layout ͱ! – Auto Layout ΛΘͳ͍ͱ͖ͷ! – Constraint ͷఆٛํ๏!
Xamarin Designer for iOS • iOS ͷ UI ఆٛϑΝΠϧ Storyboard
ΛฤूͰ͖Δ! – ͍··ͰXcode Λ։͔ͳ͍ͱͰ͖ͳ͔ͬͨɺ iOS ͷ UI ฤू͕XS / VSͰͰ͖ΔΑ͏ʹͳͬͨɻ! – ෳͷը໘ؒͷఆٛΛͨ͠Γɺ͍Ζ͍ΖͰ͖Δ! • UI ఆٛϑΝΠϧ XIB (Interface Builder)͕͋Δ͕ɺ ͪ͜ΒඇରԠɻ! – Ҿ͖ଓ͖ཁXcode! • Ұ෦ͷػೳXcode ͷͷΛ্ճΔ! • ࣮Alpha ChannelͰ݁ߏલ͔Β͋ͬͨɻ! – Xamarin 3 ͷλΠϛϯάͰਖ਼ࣜԽ!
ϓϩδΣΫτͷઃఆ • Master-Detail Application ͳͲͰελʔτ͢Δͱ ͢ͰʹStoryboard͕ϓϩδΣΫτʹؚ·Ε·͢ɻ! • Empty Application ͔Β࡞͢Δ߹!
– Storyboard ΛϓϩδΣΫτʹՃ! – ϓϩδΣΫτͷϓϩύςΟ iOS Application Ͱ Main Interface Λ࡞ͬͨ Storyboard ʹࢦఆ! – AppDelegate Λमਖ਼ ! • Window ϓϩύςΟΛΦʔόʔϥΠυ (ࣗಈ࣮ϓϩύςΟͰOK)! • FinishedLaunching ͰUIWindow Λ࡞͍ͬͯΔͱ͜ΖΛফ͢!
Storyboard ͷجຊૢ࡞ Auto Layout Ҏ֎ͦΜͳʹ͘͠ͳ͍Ͱ͢
Storyboard ͷجຊૢ࡞ πʔϧϘοΫε ϓϩύςΟ 3.5inch/4inch ସ ը໘͖ସ iOS6/7ସ ζʔϜ ഒҎ্ͷζʔϜ͕Ͱ͖Δ͜ͱͱ!
ഒҎ֎ͰViewController ΛมߋͰ͖Δ ͷ͕Xcode ͱൺͯΑ͍ͱ͜Ζ
Storyboard ͷجຊૢ࡞ View Controller Segue (ηάΤ)
Storyboard ͷجຊૢ࡞ • ViewController ͷஔ! – ʙController ͕ը໘ʹͳΔ! • ViewController
ͷதʹ Control Λ υϥοάˍυϩοϓͰஔͰ͖Δ! – ஔ͍͍͚ͯͳ͍ͷ͕ஔ͚Δ͜ͱ͋ΔͷͰҙʂ! • UITableViewҎ֎ʹUITableViewCellͱ͔! • ϓϩύςΟͷIdentityͰ! – ClassΛࢦఆ͢ΔͱରԠ͢ΔΫϥε͕ग़དྷΔ! – NameΛࢦఆ͢ΔͱɺViewControllerʹ ରԠ͢ΔϓϩύςΟ͕࡞ΒΕΔ! – Xcode Ͱࣗಈతʹ࡞ΒΕͳ͍!
Segue (ηάΤ) • Storyboard Ͱը໘ؒͷભҠ ࢠؔΛఆٛ͢Δ͜ͱ͕Ͱ͖·͢ɻ! – ͜ΕΛSegue(ηάΤ)ͱ͍͍·͢ɻ! • ϘλϯViewController͔Β
ӈυϥοάˍυϩοϓͰఆٛͰ͖·͢ɻ! – ϘλϯͳͲ͔ΒͰ͖Δ͠ɺ ఆٛͨ͠ͷΛίʔυ͔ΒൃՐͰ͖Δɻ! • Segue ͷछྨ! – ը໘ؒͷભҠ! • Push, Modal (ਐΉ)! • Unwind (Δ)! – ؔੑ! • Root(UINavigationController)! • Tab (UITabBarController)! • Embed (Container View)
Unwind Segue • ʮΔʯΛࣔ͢Segue! • ͬͨઌͷը໘ʹͳΔViewController ʹ ϝιουΛఆٛ͢Δɻ! • Δલͷը໘ͷϘλϯͳͲ͔Βɺ
Scene Exit ʹ͔ͬͯӈυϥοάͯ݁͠߹͢Δ! [Action ("UnwindToTopViewController:")]! public void UnwindToTopViewController (UIStoryboardSegue segue)! {! } "!
UITableViewController • Storyboard ্Ͱ͑Δ UITableViewController ͷఆٛ2 छྨ͋Δ! – Static
cells Storyboard ্Ͱͯ͢ͷఆٛΛ࡞͢Δ! – Dynamic Prototypes ηϧͷݟͨΛఆٛͯ͠σʔλίʔυͰྲྀ͠ࠐΉ
Auto Layout • ը໘্ͷཁૉಉ࢜ͷؔੑΛఆٛͯ͠ɺ ͦΕΛͱʹϨΠΞτΛܾఆ͢Δػೳɻ! • ֤߲ཁૉ͔Βͷڑ෯ɾߴ͞ͳͲΛఆ ٛ͠·͢ɻ! • iOS
Ͱ͜ͷػೳͰ ଟղ૾ରԠΛߦ͍·͢ɻ! – iOS ΞϓϦΤϯδχΞ͕ ઈର͓͖͍֮͑ͯͨ ٕज़ͷҰͭ
Auto Layout ΛΘͳ͍ͱ͜͏ͳΔ • iOS 6/7ରԠ࣌ͷ߲જΓࠐΈ! – ͦͦ6͏Εͨํ͕͍͍ͷ͓͖ͯ͞! • iPhone
4/4S ʻʼ iPhone 5! • ը໘ճస 6Ͱ͋Θͤͨͷʹ 7ͰNavigation Barͷ Լʹߦͬͯ͠·͏
Constraint (੍) • ViewͱViewͷؔɺViewࣗମͷ෯ߴ͞ͳͲΛ ఆٛ͢ΔͷΛ Constraint ͱ͍͍·͢ɻ! – ઢͷҰຊ͕ͣͭ Constraint
ʹͳΓ·͢ɻ!
Constraint (੍) y : View1 ͷଐੑ x : View2 ͷଐੑ
m : b : ఆ (Constraint Value) View1 == View2 OK ଐੑ! • Left, Right, Top, Bottom! • Leading, Trailing! • ݴޠͷಡΉํͰ ࠨӈ͕มಈ͢Δ! • Width, Height ! • CenterX, CenterY! • Baseline
Constraint ۩ମྫ button.left = 1 * view.right + 60
button.width = 1 * view.width + 0
Constraint ͷఆٛ: ୯ମ • ViewΛΫϦοΫ͢ΔͱϞʔυ͕ΓସΓ·͢! – ؙ͍ͱ͖େ͖͞ͷมߋ! – ࢛͍֯ͱ͖Autolayout! •
ತͷϋϯυϧViewؒͷִؒఆٛ! • Ⅰͷϋϯυϧ෯ͷఆٛ • தԝͷ□ͷϋϯυϧִؒఆٛ (ͪ͜ΒͩͱViewͷத৺͔ΒͷִؒࢦఆͰ͖Δ) – XcodeΑΓͬͪ͜ͷ΄͏͕؆୯ (ӈυϥοά͍ͬͺ͍͔ͭΘͳ͍ͱ͍͚ͳ͍)! ΫϦοΫͰΓସ͑
Constraint ͷఆٛ: ෳཁૉ • ViewΛෳબ͢Δͱɺ બͨ͠ཁૉͯ͢ʹҰׅͰఆٛΛՃͰ͖·͢! – ͜ΕXcodeͩͱૢ࡞͕एׯҧ͏
Constraint ͷΤϥʔ • Constraint ͷఆ͕ٛໃ६ɾෆ͢Δ߹ ΤϥʔʹͳΓ·͢ɻ! – Y࠲ඪܾఆͰ͖Δ͕ɺ X࠲ඪΛܾఆͰ͖ͳ͍! –
X,Y ࠲ඪܾఆͰ͖Δ͕ɺ େ͖͞ΛܾఆͰ͖ͳ͍! – ఆ͕ٛໃ६͢Δ (ಉ͡ࢦఆ͕2ͭ͋ͬͯɺͷఆ͕ٛҧ͏)! • ఆ͕ٛෆ͢Δ߹ԫ৭͍ઢɺ ఆ͕ٛໃ६͢Δ߹͍ઢͰڭ͑ͯ͘Ε·͢ɻ! – ࢀߟʹͯ͠मਖ਼͠·͠ΐ͏
Constraint ͷΤϥʔͷमਖ਼ • ఆ͕ٛෆ͍ͯ͠Δ߹ɺViewControllerͷ όʔͷԫ৭͍˚ͰͲ͕͜ෆ͍ͯ͠Δ͔Θ͔Γ ·͢ɻ! – ࣗಈमਖ਼ɺ͍͍ͩͨ ͏·͍͔͘ͳ͍ͷͰ ආ͚Δͷ͕ແɻ!
• ఆ͕ٛໃ६͢Δ߹ɺ͍ઢΛϙΠϯτ͢Δ ͱݪҼΛڭ͑ͯ͘Ε·͢ɻ
ͱ͜ΖͰ • ʮXamarin.Forms ͋Δͷʹ ɹiOS ґଘͳ View ͷ࡞Γํ֮͑Δඞཁͳ͘Ͷʁʯ! •
ͦΜͳ͜ͱͳ͍ΑɺศརͩΑ! – ը໘ભҠΛײɾϊϯίʔσΟϯάͰ࡞ΕΔ! • ҰؾʹϓϩτλΠϓ·Ͱ͍͚࣋ͬͯΔ! – Forms ͱΈ߹Θͤͯ͏͜ͱͰ͖Δ! • ͷ͜ͱΛߟ͑Δͱ…! – SDK ͱ͔Xcode 6 ΈͯͨΒͬ͛͢ʔෆԺͳ͕ͭ…! – ࠶ݴ͏͚ͲɺAuto Layout ઈର͓͖͍ٕ֮͑ͯͨज़!
·ͱΊ • Xamarin Studio / Visual Studio Ͱ Storyboard ͕
͑ΔΑ͏ʹͳͬͨʂ ຊՈΑΓ͍͍͢͠؆୯͔ͩΒΈΜͳ͓ ͏ʂ!
͓Βͤ
ΤϯδχΞืूதͰ͢ http://info.fenrir-inc.com/jp/recruit/jobs.html iOS / Android Native! Xamarin / ετΞΞϓϦͰ͖Δํ
ࢀߟࢿྉ • Walkthrough - Using the iOS Designer | Xamarin!
– http://developer.xamarin.com/guides/ios/ user_interface/designer/designer_walkthrough/! • Auto Layout with the iOS Designer | Xamarin! – http://developer.xamarin.com/guides/ios/ user_interface/designer/designer_auto_layout/! • Auto Layout ΨΠυ! – https://developer.apple.com/jp/devcenter/ios/library/ documentation/AutolayoutPG.pdf! • Auto Layout(iOS 7ରԠ) ͦͷ1! – http://blogios.stack3.net/archives/1330!