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

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

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

619fccc61ef955ccf39bfa41df527042?s=128

Nobuhiro Ito

July 05, 2014
Tweet

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!