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

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ि໨)!
3. None

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!