Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Xamarin Studio 5 ではじめる StoryBoard + Auto Layout
Nobuhiro Ito
July 05, 2014
Programming
2
5.4k
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
iseebi
0
87
iseebi
1
340
iseebi
0
5.6k
iseebi
2
1.4k
iseebi
0
410
iseebi
0
360
iseebi
3
1.4k
iseebi
3
3.8k
iseebi
0
3.9k
Other Decks in Programming
See All in Programming
kaz29
2
130
manfredsteyer
PRO
1
120
joytomo
1
540
dqneo
0
150
naototty
1
100
samjulien
0
420
hyodol2513
2
1.1k
kaonash
2
1.9k
d_endo
1
510
borkdude
1
180
seike460
8
2.2k
ykpythemind
0
150
Featured
See All Featured
colly
188
14k
malarkey
392
61k
addyosmani
312
21k
notwaldorf
21
2.1k
morganepeng
95
14k
shpigford
370
42k
matthewcrist
73
7.5k
eileencodes
114
25k
mojombo
359
62k
productmarketing
7
780
destraynor
221
47k
michaelherold
226
8.6k
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!