Xamarin Studio 5 ではじめる StoryBoard + Auto Layout

2014/07/05(Sat) Japan Xamarin User Group Conference

Transcript

1. Xamarin Studio 5 Ͱ͸͡ΊΔ
 StoryBoard + Auto Layout
   ҏ੎
   γϯ / ҏ౻
   ৳༟! ! 2014/07/05(Sat)! Japan Xamarin User Group Conference #1
   
2. ࣗݾ঺հ
   •  ҏ౻
   ৳༟ / ҏ੎
   γϯ! –  @iseebi / id:iseebi! •  ϑΣϯϦϧגࣜձࣾ
   ڞಉ։ൃ෦ॴଐ! –  iOS / Android / Windows 8 ͷΞϓϦ։ൃͯ͠·͢! •  ίϛϡχςΟ! –  εϚʔτϑΥϯษڧձ@ؔ੢! –  ͍͢͝Haskellಡॻձ in େࡕ! •  HຊಡΜͰ·͢ɻ(2ि໨)!
4. εςοΧʔ͋Γ·͢ʂ
   
5. ϑΣϯϦϧ΋͏Ұͭͷப
   
6. ओͳ࣮੷@Xamarin
   http://biz.fenrir-inc.com/application_development/casestudy_app/nhk_kouhaku.html! ! ※3೥࿈ଓͰ΍ͬͯͯɺୈ64ճ(Ver.3.x)͔ΒXamarin
   
7. MvvmCrossΨν੎Ͱ͢
   ɾιʔεϨϕϧͰղੳͯ͠࢖ͬͨΓ! ɾ͋Μ·Γ࢖ͬͯͳ͍ػೳ΋ιʔεಡΜͰ࢖ͬͨΓ! ɾࣾ಺ϓϥάΠϯ࡞ͬͨΓ(ͦΖͦΖࣾ಺NuGetϦϙδτϦཱ͍ͯͨ)! ! ɾόάݟ͚ͭͨΒͪΐ͍ͪΐ͍Pull RequestૹͬͨΓ͍ͯ͠·͢ɻ!
8. Xamarin 3.0 new features
   •  Xamarin Designer for iOS! •  Xamarin.Forms! •  Xamarin Studio 5.0! –  NuGet! –  F#! –  .NET BCL Documentation! •  Shared Projects! ๻͸͜Εʹ͍͓ͭͯ࿩͠͠·͢
   ͜ͷ͋ͱ͋Ί͍͞Μ͕! ͓࿩ͯ͘͠͠Ε·͢
   
9. ࠓ೔ͷ͓͠ͳ͕͖
   •  Xamarin Designer for iOS ͷ࢖͍ํ! –  Storyboard ͷॳظઃఆ
   –  جຊૢ࡞! –  Segue/Unwind Segue! –  UITableView ͷ Static Cells / Dynamic Prototypes! •  Auto Layout ͷ࢖͍ํ! –  Auto Layout ͱ͸! –  Auto Layout Λ࢖Θͳ͍ͱ͖ͷ໰୊! –  Constraint ͷఆٛํ๏!
10. Xamarin Designer for iOS
    •  iOS ͷ UI ఆٛϑΝΠϧ Storyboard ΛฤूͰ͖Δ! –  ͍··Ͱ
    Xcode Λ։͔ͳ͍ͱͰ͖ͳ͔ͬͨɺ
 iOS ͷ UI ฤू͕XS / VSͰͰ͖ΔΑ͏ʹͳͬͨɻ! –  ෳ਺ͷը໘ؒͷఆٛΛͨ͠Γɺ͍Ζ͍ΖͰ͖Δ! •  UI ఆٛϑΝΠϧ͸ XIB (Interface Builder)͕͋Δ͕ɺ
 ͪ͜Β͸ඇରԠɻ! –  Ҿ͖ଓ͖ཁ
    Xcode! •  Ұ෦ͷػೳ͸
    Xcode ͷ΋ͷΛ্ճΔ! •  ࣮͸Alpha ChannelͰ͸݁ߏલ͔Β͋ͬͨɻ! –  Xamarin 3 ͷλΠϛϯάͰਖ਼ࣜԽ!
11. ϓϩδΣΫτͷઃఆ
    •  Master-Detail Application ͳͲͰελʔτ͢Δͱ ͢ͰʹStoryboard͕ϓϩδΣΫτʹؚ·Ε·͢ɻ! •  Empty Application ͔Β࡞੒͢Δ৔߹! –  Storyboard ΛϓϩδΣΫτʹ௥Ճ! –  ϓϩδΣΫτͷϓϩύςΟ iOS Application Ͱ 
 Main Interface Λ࡞ͬͨ Storyboard ʹࢦఆ! –  AppDelegate Λमਖ਼ ! •  Window ϓϩύςΟΛΦʔόʔϥΠυ
 (ࣗಈ࣮૷ϓϩύςΟͰOK)! •  FinishedLaunching Ͱ
    UIWindow Λ࡞͍ͬͯΔͱ͜ΖΛফ͢!
12. Storyboard ͷجຊૢ࡞
    Auto Layout Ҏ֎͸ͦΜͳʹ೉͘͠ͳ͍Ͱ͢
    
13. Storyboard ͷجຊૢ࡞
    πʔϧϘοΫε
    ϓϩύςΟ
    3.5inch/4inch ੾ସ
    ը໘޲͖੾ସ
    iOS6/7੾ସ
    ζʔϜ
    ౳ഒҎ্ͷζʔϜ͕Ͱ͖Δ͜ͱͱ! ౳ഒҎ֎Ͱ
    ViewController ಺ΛมߋͰ͖Δ ͷ͕
    Xcode ͱൺ΂ͯΑ͍ͱ͜Ζ
    
14. Storyboard ͷجຊૢ࡞
    View Controller
    Segue (ηάΤ)
    
15. Storyboard ͷجຊૢ࡞
    •  ViewController ͷ഑ஔ! –  ʙController ͕ը໘ʹͳΔ! •  ViewController ͷதʹ Control Λ
 υϥοάˍυϩοϓͰ഑ஔͰ͖Δ! –  ஔ͍ͯ͸͍͚ͳ͍΋ͷ͕ஔ͚Δ͜ͱ΋͋ΔͷͰ஫ҙʂ! •  UITableViewҎ֎ʹUITableViewCellͱ͔! •  ϓϩύςΟͷIdentityͰ! –  ClassΛࢦఆ͢ΔͱରԠ͢ΔΫϥε͕ग़དྷΔ! –  NameΛࢦఆ͢ΔͱɺViewControllerʹ
 ରԠ͢ΔϓϩύςΟ͕࡞ΒΕΔ! –  Xcode Ͱ͸ࣗಈతʹ࡞ΒΕͳ͍!
16. Segue (ηάΤ)
    •  Storyboard ಺Ͱ͸ը໘ؒͷભҠ΍
 ਌ࢠؔ܎Λఆٛ͢Δ͜ͱ͕Ͱ͖·͢ɻ! –  ͜ΕΛSegue(ηάΤ)ͱ͍͍·͢ɻ! •  Ϙλϯ΍ViewController͔Β
 ӈυϥοάˍυϩοϓͰఆٛͰ͖·͢ɻ! –  ϘλϯͳͲ͔Β΋Ͱ͖Δ͠ɺ
 ఆٛͨ͠΋ͷΛίʔυ͔ΒൃՐ΋Ͱ͖Δɻ! •  Segue ͷछྨ! –  ը໘ؒͷભҠ! •  Push, Modal (ਐΉ)! •  Unwind (໭Δ)! –  ؔ܎ੑ! •  Root(UINavigationController)! •  Tab (UITabBarController)! •  Embed (Container View)
    
17. Unwind Segue
    •  ʮ໭ΔʯΛࣔ͢Segue! •  ໭ͬͨઌͷը໘ʹͳΔ
    ViewController ʹ
 ϝιουΛఆٛ͢Δɻ! •  ໭Δલͷը໘ͷϘλϯͳͲ͔Βɺ
 Scene Exit ʹ޲͔ͬͯӈυϥοάͯ݁͠߹͢Δ! [Action ("UnwindToTopViewController:")]! public void UnwindToTopViewController (UIStoryboardSegue segue)! {! } "!
18. UITableViewController
    •  Storyboard ্Ͱ࢖͑Δ 
 UITableViewController ͷఆٛ͸
    2 छྨ͋Δ! –  Static cells
 Storyboard ্Ͱ͢΂ͯͷఆٛΛ࡞੒͢Δ! –  Dynamic Prototypes
 ηϧͷݟͨ໨Λఆٛͯ͠σʔλ͸ίʔυͰྲྀ͠ࠐΉ
    
19. Auto Layout
    •  ը໘্ͷཁૉಉ࢜ͷؔ܎ੑΛఆٛͯ͠ɺ
 ͦΕΛ΋ͱʹϨΠΞ΢τΛܾఆ͢Δػೳɻ! •  ֤߲໨΍਌ཁૉ͔Βͷڑ཭΍෯ɾߴ͞ͳͲΛఆ ٛ͠·͢ɻ! •  iOS Ͱ͸͜ͷػೳͰ
 ଟղ૾౓ରԠΛߦ͍·͢ɻ! –  iOS ΞϓϦΤϯδχΞ͕
 ઈର͓͖͍֮͑ͯͨ
 ٕज़ͷҰͭ
    
20. Auto Layout Λ࢖Θͳ͍ͱ͜͏ͳΔ
    •  iOS 6/7ରԠ࣌ͷ߲໨જΓࠐΈ໰୊! –  ͦ΋ͦ΋6͸΋͏๨Εͨํ͕͍͍ͷ͸͓͖ͯ͞! •  iPhone 4/4S ʻʼ iPhone 5! •  ը໘ճస
    6Ͱ͋Θͤͨͷʹ
    7ͰNavigation Barͷ
 Լʹߦͬͯ͠·͏
    
21. Constraint (੍໿)
    •  ViewͱViewͷؔ܎ɺViewࣗମͷ෯ߴ͞ͳͲΛ
 ఆٛ͢ΔͷΛ Constraint ͱ͍͍·͢ɻ! –  ઢͷҰຊ͕ͣͭ Constraint ʹͳΓ·͢ɻ!
22. Constraint (੍໿)
    y : View1 ͷଐੑ x : View2 ͷଐੑ m : ܎਺ b : ఆ਺஋ (Constraint Value) View1 == View2 ΋OK
    ଐੑ! •  Left, Right, Top, Bottom! •  Leading, Trailing! •  ݴޠͷಡΉํ޲Ͱ
 ࠨӈ͕มಈ͢Δ! •  Width, Height ! •  CenterX, CenterY! •  Baseline
    
23. Constraint ۩ମྫ
    button.left = 1 * view.right + 60
    button.width = 1 * view.width + 0
    
24. Constraint ͷఆٛ: ୯ମ
    •  ViewΛΫϦοΫ͢ΔͱϞʔυ͕੾ΓସΓ·͢! –  ؙ͍ͱ͖͸େ͖͞ͷมߋ! –  ࢛͍֯ͱ͖͸Autolayout! •  ತͷϋϯυϧ͸Viewؒͷִؒఆٛ! •  Ⅰͷϋϯυϧ͸෯ͷఆٛ •  தԝͷ□ͷϋϯυϧ΋ִؒఆٛ (ͪ͜Βͩͱ਌Viewͷத৺͔Βͷִؒࢦఆ΋Ͱ͖Δ) –  XcodeΑΓͬͪ͜ͷ΄͏͕؆୯
 (ӈυϥοά͍ͬͺ͍͔ͭΘͳ͍ͱ͍͚ͳ͍)! ΫϦοΫͰ੾Γସ͑
    
25. Constraint ͷఆٛ: ෳ਺ཁૉ
    •  ViewΛෳ਺બ୒͢Δͱɺ
 બ୒ͨ͠ཁૉ͢΂ͯʹҰׅͰఆٛΛ௥ՃͰ͖·͢! –  ͜Ε΋Xcodeͩͱૢ࡞͕एׯҧ͏
    
26. Constraint ͷΤϥʔ
    •  Constraint ͷఆ͕ٛໃ६ɾෆ଍͢Δ৔߹͸
 ΤϥʔʹͳΓ·͢ɻ! –  Y࠲ඪ͸ܾఆͰ͖Δ͕ɺ
 X࠲ඪΛܾఆͰ͖ͳ͍! –  X,Y ࠲ඪ͸ܾఆͰ͖Δ͕ɺ
 େ͖͞ΛܾఆͰ͖ͳ͍! –  ఆ͕ٛໃ६͢Δ
 (ಉ͡ࢦఆ͕2ͭ͋ͬͯɺ਺஋ͷఆ͕ٛҧ͏)! •  ఆ͕ٛෆ଍͢Δ৔߹͸ԫ৭͍ઢɺ
 ఆ͕ٛໃ६͢Δ৔߹͸੺͍ઢͰڭ͑ͯ͘Ε·͢ɻ! –  ࢀߟʹͯ͠मਖ਼͠·͠ΐ͏
    
27. Constraint ͷΤϥʔͷमਖ਼
    •  ఆ͕ٛෆ଍͍ͯ͠Δ৔߹͸ɺViewControllerͷ όʔͷԫ৭͍˚ͰͲ͕͜ෆ଍͍ͯ͠Δ͔Θ͔Γ ·͢ɻ! –  ࣗಈमਖ਼͸ɺ͍͍ͩͨ
 ͏·͍͔͘ͳ͍ͷͰ
 ආ͚Δͷ͕ແ೉ɻ! •  ఆ͕ٛໃ६͢Δ৔߹͸ɺ੺͍ઢΛϙΠϯτ͢Δ ͱݪҼΛڭ͑ͯ͘Ε·͢ɻ
    
28. ͱ͜ΖͰ
    •  ʮXamarin.Forms ͋Δͷʹ 
 ɹiOS ґଘͳ View ͷ࡞Γํ֮͑Δඞཁͳ͘Ͷʁʯ! •  ͦΜͳ͜ͱ͸ͳ͍ΑɺศརͩΑ! –  ը໘ભҠΛ௚ײɾϊϯίʔσΟϯάͰ࡞ΕΔ! •  ҰؾʹϓϩτλΠϓ·Ͱ͍͚࣋ͬͯΔ! –  Forms ͱ૊Έ߹Θͤͯ࢖͏͜ͱ΋Ͱ͖Δ! •  ͷ͜ͱΛߟ͑Δͱ…! –  SDK ͱ͔
    Xcode 6 ΈͯͨΒͬ͛͢ʔෆԺͳ΍͕ͭ…! –  ࠶౓ݴ͏͚ͲɺAuto Layout ͸ઈର͓͖͍ٕ֮͑ͯͨज़!
29. ·ͱΊ
    •  Xamarin Studio / Visual Studio Ͱ Storyboard ͕
 ࢖͑ΔΑ͏ʹͳͬͨʂ
 ຊՈΑΓ࢖͍΍͍͢͠؆୯͔ͩΒΈΜͳ࢖͓ ͏ʂ!
30. ͓஌Βͤ
    
31. ΤϯδχΞืूதͰ͢
    http://info.fenrir-inc.com/jp/recruit/jobs.html
    iOS / Android Native! Xamarin / ετΞΞϓϦͰ͖Δํ
    
32. ࢀߟࢿྉ
    •  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!