Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Nobuhiro Ito

July 05, 2014
Tweet

More Decks by Nobuhiro Ito

Other Decks in Programming

Transcript

  1. Xamarin Studio 5 Ͱ͸͡ΊΔ

    StoryBoard + Auto Layout
    ҏ੎γϯ / ҏ౻৳༟!
    !
    2014/07/05(Sat)!
    Japan Xamarin User Group Conference #1

    View Slide

  2. ࣗݾ঺հ
    •  ҏ౻৳༟ / ҏ੎γϯ!
    –  @iseebi / id:iseebi!
    •  ϑΣϯϦϧגࣜձࣾڞಉ։ൃ෦ॴଐ!
    –  iOS / Android / Windows 8 ͷΞϓϦ։ൃͯ͠·͢!
    •  ίϛϡχςΟ!
    –  εϚʔτϑΥϯษڧձ@ؔ੢!
    –  ͍͢͝Haskellಡॻձ in େࡕ!
    •  HຊಡΜͰ·͢ɻ(2ि໨)!

    View Slide

  3. View Slide

  4. εςοΧʔ͋Γ·͢ʂ

    View Slide

  5. ϑΣϯϦϧ΋͏Ұͭͷப

    View Slide

  6. ओͳ࣮੷@Xamarin
    http://biz.fenrir-inc.com/application_development/casestudy_app/nhk_kouhaku.html!
    !
    ※3೥࿈ଓͰ΍ͬͯͯɺୈ64ճ(Ver.3.x)͔ΒXamarin

    View Slide

  7. MvvmCrossΨν੎Ͱ͢
    ɾιʔεϨϕϧͰղੳͯ͠࢖ͬͨΓ!
    ɾ͋Μ·Γ࢖ͬͯͳ͍ػೳ΋ιʔεಡΜͰ࢖ͬͨΓ!
    ɾࣾ಺ϓϥάΠϯ࡞ͬͨΓ(ͦΖͦΖࣾ಺NuGetϦϙδτϦཱ͍ͯͨ)!
    !
    ɾόάݟ͚ͭͨΒͪΐ͍ͪΐ͍Pull RequestૹͬͨΓ͍ͯ͠·͢ɻ!

    View Slide

  8. Xamarin 3.0 new features
    •  Xamarin Designer for iOS!
    •  Xamarin.Forms!
    •  Xamarin Studio 5.0!
    –  NuGet!
    –  F#!
    –  .NET BCL Documentation!
    •  Shared Projects!
    ๻͸͜Εʹ͍͓ͭͯ࿩͠͠·͢
    ͜ͷ͋ͱ͋Ί͍͞Μ͕!
    ͓࿩ͯ͘͠͠Ε·͢

    View Slide

  9. ࠓ೔ͷ͓͠ͳ͕͖
    •  Xamarin Designer for iOS ͷ࢖͍ํ!
    –  Storyboard ͷॳظઃఆ
    –  جຊૢ࡞!
    –  Segue/Unwind Segue!
    –  UITableView ͷ Static Cells / Dynamic Prototypes!
    •  Auto Layout ͷ࢖͍ํ!
    –  Auto Layout ͱ͸!
    –  Auto Layout Λ࢖Θͳ͍ͱ͖ͷ໰୊!
    –  Constraint ͷఆٛํ๏!

    View Slide

  10. Xamarin Designer for iOS
    •  iOS ͷ UI ఆٛϑΝΠϧ Storyboard ΛฤूͰ͖Δ!
    –  ͍··ͰXcode Λ։͔ͳ͍ͱͰ͖ͳ͔ͬͨɺ

    iOS ͷ UI ฤू͕XS / VSͰͰ͖ΔΑ͏ʹͳͬͨɻ!
    –  ෳ਺ͷը໘ؒͷఆٛΛͨ͠Γɺ͍Ζ͍ΖͰ͖Δ!
    •  UI ఆٛϑΝΠϧ͸ XIB (Interface Builder)͕͋Δ͕ɺ

    ͪ͜Β͸ඇରԠɻ!
    –  Ҿ͖ଓ͖ཁXcode!
    •  Ұ෦ͷػೳ͸Xcode ͷ΋ͷΛ্ճΔ!
    •  ࣮͸Alpha ChannelͰ͸݁ߏલ͔Β͋ͬͨɻ!
    –  Xamarin 3 ͷλΠϛϯάͰਖ਼ࣜԽ!

    View Slide

  11. ϓϩδΣΫτͷઃఆ
    •  Master-Detail Application ͳͲͰελʔτ͢Δͱ
    ͢ͰʹStoryboard͕ϓϩδΣΫτʹؚ·Ε·͢ɻ!
    •  Empty Application ͔Β࡞੒͢Δ৔߹!
    –  Storyboard ΛϓϩδΣΫτʹ௥Ճ!
    –  ϓϩδΣΫτͷϓϩύςΟ iOS Application Ͱ 

    Main Interface Λ࡞ͬͨ Storyboard ʹࢦఆ!
    –  AppDelegate Λमਖ਼ !
    •  Window ϓϩύςΟΛΦʔόʔϥΠυ

    (ࣗಈ࣮૷ϓϩύςΟͰOK)!
    •  FinishedLaunching ͰUIWindow Λ࡞͍ͬͯΔͱ͜ΖΛফ͢!

    View Slide

  12. Storyboard ͷجຊૢ࡞
    Auto Layout Ҏ֎͸ͦΜͳʹ೉͘͠ͳ͍Ͱ͢

    View Slide

  13. Storyboard ͷجຊૢ࡞
    πʔϧϘοΫε
    ϓϩύςΟ
    3.5inch/4inch ੾ସ
    ը໘޲͖੾ସ
    iOS6/7੾ସ
    ζʔϜ
    ౳ഒҎ্ͷζʔϜ͕Ͱ͖Δ͜ͱͱ!
    ౳ഒҎ֎ͰViewController ಺ΛมߋͰ͖Δ
    ͷ͕Xcode ͱൺ΂ͯΑ͍ͱ͜Ζ

    View Slide

  14. Storyboard ͷجຊૢ࡞
    View Controller Segue (ηάΤ)

    View Slide

  15. Storyboard ͷجຊૢ࡞
    •  ViewController ͷ഑ஔ!
    –  ʙController ͕ը໘ʹͳΔ!
    •  ViewController ͷதʹ Control Λ

    υϥοάˍυϩοϓͰ഑ஔͰ͖Δ!
    –  ஔ͍ͯ͸͍͚ͳ͍΋ͷ͕ஔ͚Δ͜ͱ΋͋ΔͷͰ஫ҙʂ!
    •  UITableViewҎ֎ʹUITableViewCellͱ͔!
    •  ϓϩύςΟͷIdentityͰ!
    –  ClassΛࢦఆ͢ΔͱରԠ͢ΔΫϥε͕ग़དྷΔ!
    –  NameΛࢦఆ͢ΔͱɺViewControllerʹ

    ରԠ͢ΔϓϩύςΟ͕࡞ΒΕΔ!
    –  Xcode Ͱ͸ࣗಈతʹ࡞ΒΕͳ͍!

    View Slide

  16. Segue (ηάΤ)
    •  Storyboard ಺Ͱ͸ը໘ؒͷભҠ΍

    ਌ࢠؔ܎Λఆٛ͢Δ͜ͱ͕Ͱ͖·͢ɻ!
    –  ͜ΕΛSegue(ηάΤ)ͱ͍͍·͢ɻ!
    •  Ϙλϯ΍ViewController͔Β

    ӈυϥοάˍυϩοϓͰఆٛͰ͖·͢ɻ!
    –  ϘλϯͳͲ͔Β΋Ͱ͖Δ͠ɺ

    ఆٛͨ͠΋ͷΛίʔυ͔ΒൃՐ΋Ͱ͖Δɻ!
    •  Segue ͷछྨ!
    –  ը໘ؒͷભҠ!
    •  Push, Modal (ਐΉ)!
    •  Unwind (໭Δ)!
    –  ؔ܎ੑ!
    •  Root(UINavigationController)!
    •  Tab (UITabBarController)!
    •  Embed (Container View)

    View Slide

  17. Unwind Segue
    •  ʮ໭ΔʯΛࣔ͢Segue!
    •  ໭ͬͨઌͷը໘ʹͳΔViewController ʹ

    ϝιουΛఆٛ͢Δɻ!
    •  ໭Δલͷը໘ͷϘλϯͳͲ͔Βɺ

    Scene Exit ʹ޲͔ͬͯӈυϥοάͯ݁͠߹͢Δ!
    [Action ("UnwindToTopViewController:")]!
    public void UnwindToTopViewController (UIStoryboardSegue segue)!
    {!
    } "!

    View Slide

  18. UITableViewController
    •  Storyboard ্Ͱ࢖͑Δ 

    UITableViewController ͷఆٛ͸2 छྨ͋Δ!
    –  Static cells

    Storyboard ্Ͱ͢΂ͯͷఆٛΛ࡞੒͢Δ!
    –  Dynamic Prototypes

    ηϧͷݟͨ໨Λఆٛͯ͠σʔλ͸ίʔυͰྲྀ͠ࠐΉ

    View Slide

  19. Auto Layout
    •  ը໘্ͷཁૉಉ࢜ͷؔ܎ੑΛఆٛͯ͠ɺ

    ͦΕΛ΋ͱʹϨΠΞ΢τΛܾఆ͢Δػೳɻ!
    •  ֤߲໨΍਌ཁૉ͔Βͷڑ཭΍෯ɾߴ͞ͳͲΛఆ
    ٛ͠·͢ɻ!
    •  iOS Ͱ͸͜ͷػೳͰ

    ଟղ૾౓ରԠΛߦ͍·͢ɻ!
    –  iOS ΞϓϦΤϯδχΞ͕

    ઈର͓͖͍֮͑ͯͨ

    ٕज़ͷҰͭ

    View Slide

  20. Auto Layout Λ࢖Θͳ͍ͱ͜͏ͳΔ
    •  iOS 6/7ରԠ࣌ͷ߲໨જΓࠐΈ໰୊!
    –  ͦ΋ͦ΋6͸΋͏๨Εͨํ͕͍͍ͷ͸͓͖ͯ͞!
    •  iPhone 4/4S ʻʼ iPhone 5!
    •  ը໘ճస
    6Ͱ͋Θͤͨͷʹ 7ͰNavigation Barͷ

    Լʹߦͬͯ͠·͏

    View Slide

  21. Constraint (੍໿)
    •  ViewͱViewͷؔ܎ɺViewࣗମͷ෯ߴ͞ͳͲΛ

    ఆٛ͢ΔͷΛ Constraint ͱ͍͍·͢ɻ!
    –  ઢͷҰຊ͕ͣͭ Constraint ʹͳΓ·͢ɻ!

    View Slide

  22. Constraint (੍໿)
    y : View1 ͷଐੑ
    x : View2 ͷଐੑ
    m : ܎਺
    b : ఆ਺஋ (Constraint Value)

    View1 == View2 ΋OK
    ଐੑ!
    •  Left, Right, Top, Bottom!
    •  Leading, Trailing!
    •  ݴޠͷಡΉํ޲Ͱ

    ࠨӈ͕มಈ͢Δ!
    •  Width, Height !
    •  CenterX, CenterY!
    •  Baseline

    View Slide

  23. Constraint ۩ମྫ
    button.left = 1 * view.right + 60
    button.width = 1 * view.width + 0

    View Slide

  24. Constraint ͷఆٛ: ୯ମ
    •  ViewΛΫϦοΫ͢ΔͱϞʔυ͕੾ΓସΓ·͢!
    –  ؙ͍ͱ͖͸େ͖͞ͷมߋ!
    –  ࢛͍֯ͱ͖͸Autolayout!
    •  ತͷϋϯυϧ͸Viewؒͷִؒఆٛ!
    •  Ⅰͷϋϯυϧ͸෯ͷఆٛ
    •  தԝͷ□ͷϋϯυϧ΋ִؒఆٛ
    (ͪ͜Βͩͱ਌Viewͷத৺͔Βͷִؒࢦఆ΋Ͱ͖Δ)
    –  XcodeΑΓͬͪ͜ͷ΄͏͕؆୯

    (ӈυϥοά͍ͬͺ͍͔ͭΘͳ͍ͱ͍͚ͳ͍)!
    ΫϦοΫͰ੾Γସ͑

    View Slide

  25. Constraint ͷఆٛ: ෳ਺ཁૉ
    •  ViewΛෳ਺બ୒͢Δͱɺ

    બ୒ͨ͠ཁૉ͢΂ͯʹҰׅͰఆٛΛ௥ՃͰ͖·͢!
    –  ͜Ε΋Xcodeͩͱૢ࡞͕एׯҧ͏

    View Slide

  26. Constraint ͷΤϥʔ
    •  Constraint ͷఆ͕ٛໃ६ɾෆ଍͢Δ৔߹͸

    ΤϥʔʹͳΓ·͢ɻ!
    –  Y࠲ඪ͸ܾఆͰ͖Δ͕ɺ

    X࠲ඪΛܾఆͰ͖ͳ͍!
    –  X,Y ࠲ඪ͸ܾఆͰ͖Δ͕ɺ

    େ͖͞ΛܾఆͰ͖ͳ͍!
    –  ఆ͕ٛໃ६͢Δ

    (ಉ͡ࢦఆ͕2ͭ͋ͬͯɺ਺஋ͷఆ͕ٛҧ͏)!
    •  ఆ͕ٛෆ଍͢Δ৔߹͸ԫ৭͍ઢɺ

    ఆ͕ٛໃ६͢Δ৔߹͸੺͍ઢͰڭ͑ͯ͘Ε·͢ɻ!
    –  ࢀߟʹͯ͠मਖ਼͠·͠ΐ͏

    View Slide

  27. Constraint ͷΤϥʔͷमਖ਼
    •  ఆ͕ٛෆ଍͍ͯ͠Δ৔߹͸ɺViewControllerͷ
    όʔͷԫ৭͍˚ͰͲ͕͜ෆ଍͍ͯ͠Δ͔Θ͔Γ
    ·͢ɻ!
    –  ࣗಈमਖ਼͸ɺ͍͍ͩͨ

    ͏·͍͔͘ͳ͍ͷͰ

    ආ͚Δͷ͕ແ೉ɻ!
    •  ఆ͕ٛໃ६͢Δ৔߹͸ɺ੺͍ઢΛϙΠϯτ͢Δ
    ͱݪҼΛڭ͑ͯ͘Ε·͢ɻ

    View Slide

  28. ͱ͜ΖͰ
    •  ʮXamarin.Forms ͋Δͷʹ 

    ɹiOS ґଘͳ View ͷ࡞Γํ֮͑Δඞཁͳ͘Ͷʁʯ!
    •  ͦΜͳ͜ͱ͸ͳ͍ΑɺศརͩΑ!
    –  ը໘ભҠΛ௚ײɾϊϯίʔσΟϯάͰ࡞ΕΔ!
    •  ҰؾʹϓϩτλΠϓ·Ͱ͍͚࣋ͬͯΔ!
    –  Forms ͱ૊Έ߹Θͤͯ࢖͏͜ͱ΋Ͱ͖Δ!
    •  ͷ͜ͱΛߟ͑Δͱ…!
    –  SDK ͱ͔Xcode 6 ΈͯͨΒͬ͛͢ʔෆԺͳ΍͕ͭ…!
    –  ࠶౓ݴ͏͚ͲɺAuto Layout ͸ઈର͓͖͍ٕ֮͑ͯͨज़!

    View Slide

  29. ·ͱΊ
    •  Xamarin Studio / Visual Studio Ͱ Storyboard ͕

    ࢖͑ΔΑ͏ʹͳͬͨʂ

    ຊՈΑΓ࢖͍΍͍͢͠؆୯͔ͩΒΈΜͳ࢖͓
    ͏ʂ!

    View Slide

  30. ͓஌Βͤ

    View Slide

  31. ΤϯδχΞืूதͰ͢
    http://info.fenrir-inc.com/jp/recruit/jobs.html
    iOS / Android Native!
    Xamarin / ετΞΞϓϦͰ͖Δํ

    View Slide

  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!

    View Slide