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. 1.

    Xamarin Studio 5 Ͱ͸͡ΊΔ
 StoryBoard + Auto Layout ҏ੎γϯ /

    ҏ౻৳༟! ! 2014/07/05(Sat)! Japan Xamarin User Group Conference #1
  2. 2.

    ࣗݾ঺հ •  ҏ౻৳༟ / ҏ੎γϯ! –  @iseebi / id:iseebi! • 

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

    Xamarin 3.0 new features •  Xamarin Designer for iOS! • 

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

    ࠓ೔ͷ͓͠ͳ͕͖ •  Xamarin Designer for iOS ͷ࢖͍ํ! –  Storyboard ͷॳظઃఆ

    –  جຊૢ࡞! –  Segue/Unwind Segue! –  UITableView ͷ Static Cells / Dynamic Prototypes! •  Auto Layout ͷ࢖͍ํ! –  Auto Layout ͱ͸! –  Auto Layout Λ࢖Θͳ͍ͱ͖ͷ໰୊! –  Constraint ͷఆٛํ๏!
  6. 10.

    Xamarin Designer for iOS •  iOS ͷ UI ఆٛϑΝΠϧ Storyboard

    ΛฤूͰ͖Δ! –  ͍··ͰXcode Λ։͔ͳ͍ͱͰ͖ͳ͔ͬͨɺ
 iOS ͷ UI ฤू͕XS / VSͰͰ͖ΔΑ͏ʹͳͬͨɻ! –  ෳ਺ͷը໘ؒͷఆٛΛͨ͠Γɺ͍Ζ͍ΖͰ͖Δ! •  UI ఆٛϑΝΠϧ͸ XIB (Interface Builder)͕͋Δ͕ɺ
 ͪ͜Β͸ඇରԠɻ! –  Ҿ͖ଓ͖ཁXcode! •  Ұ෦ͷػೳ͸Xcode ͷ΋ͷΛ্ճΔ! •  ࣮͸Alpha ChannelͰ͸݁ߏલ͔Β͋ͬͨɻ! –  Xamarin 3 ͷλΠϛϯάͰਖ਼ࣜԽ!
  7. 11.

    ϓϩδΣΫτͷઃఆ •  Master-Detail Application ͳͲͰελʔτ͢Δͱ ͢ͰʹStoryboard͕ϓϩδΣΫτʹؚ·Ε·͢ɻ! •  Empty Application ͔Β࡞੒͢Δ৔߹!

    –  Storyboard ΛϓϩδΣΫτʹ௥Ճ! –  ϓϩδΣΫτͷϓϩύςΟ iOS Application Ͱ 
 Main Interface Λ࡞ͬͨ Storyboard ʹࢦఆ! –  AppDelegate Λमਖ਼ ! •  Window ϓϩύςΟΛΦʔόʔϥΠυ
 (ࣗಈ࣮૷ϓϩύςΟͰOK)! •  FinishedLaunching ͰUIWindow Λ࡞͍ͬͯΔͱ͜ΖΛফ͢!
  8. 15.

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

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

    Segue (ηάΤ) •  Storyboard ಺Ͱ͸ը໘ؒͷભҠ΍
 ਌ࢠؔ܎Λఆٛ͢Δ͜ͱ͕Ͱ͖·͢ɻ! –  ͜ΕΛSegue(ηάΤ)ͱ͍͍·͢ɻ! •  Ϙλϯ΍ViewController͔Β


    ӈυϥοάˍυϩοϓͰఆٛͰ͖·͢ɻ! –  ϘλϯͳͲ͔Β΋Ͱ͖Δ͠ɺ
 ఆٛͨ͠΋ͷΛίʔυ͔ΒൃՐ΋Ͱ͖Δɻ! •  Segue ͷछྨ! –  ը໘ؒͷભҠ! •  Push, Modal (ਐΉ)! •  Unwind (໭Δ)! –  ؔ܎ੑ! •  Root(UINavigationController)! •  Tab (UITabBarController)! •  Embed (Container View)
  10. 17.

    Unwind Segue •  ʮ໭ΔʯΛࣔ͢Segue! •  ໭ͬͨઌͷը໘ʹͳΔViewController ʹ
 ϝιουΛఆٛ͢Δɻ! •  ໭Δલͷը໘ͷϘλϯͳͲ͔Βɺ


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

    UITableViewController •  Storyboard ্Ͱ࢖͑Δ 
 UITableViewController ͷఆٛ͸2 छྨ͋Δ! –  Static

    cells
 Storyboard ্Ͱ͢΂ͯͷఆٛΛ࡞੒͢Δ! –  Dynamic Prototypes
 ηϧͷݟͨ໨Λఆٛͯ͠σʔλ͸ίʔυͰྲྀ͠ࠐΉ
  12. 20.

    Auto Layout Λ࢖Θͳ͍ͱ͜͏ͳΔ •  iOS 6/7ରԠ࣌ͷ߲໨જΓࠐΈ໰୊! –  ͦ΋ͦ΋6͸΋͏๨Εͨํ͕͍͍ͷ͸͓͖ͯ͞! •  iPhone

    4/4S ʻʼ iPhone 5! •  ը໘ճస 6Ͱ͋Θͤͨͷʹ 7ͰNavigation Barͷ
 Լʹߦͬͯ͠·͏
  13. 22.

    Constraint (੍໿) y : View1 ͷଐੑ x : View2 ͷଐੑ

    m : ܎਺ b : ఆ਺஋ (Constraint Value) View1 == View2 ΋OK ଐੑ! •  Left, Right, Top, Bottom! •  Leading, Trailing! •  ݴޠͷಡΉํ޲Ͱ
 ࠨӈ͕มಈ͢Δ! •  Width, Height ! •  CenterX, CenterY! •  Baseline
  14. 23.

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

    button.width = 1 * view.width + 0 
  15. 24.

    Constraint ͷఆٛ: ୯ମ •  ViewΛΫϦοΫ͢ΔͱϞʔυ͕੾ΓସΓ·͢! –  ؙ͍ͱ͖͸େ͖͞ͷมߋ! –  ࢛͍֯ͱ͖͸Autolayout! • 

    ತͷϋϯυϧ͸Viewؒͷִؒఆٛ! •  Ⅰͷϋϯυϧ͸෯ͷఆٛ •  தԝͷ□ͷϋϯυϧ΋ִؒఆٛ (ͪ͜Βͩͱ਌Viewͷத৺͔Βͷִؒࢦఆ΋Ͱ͖Δ) –  XcodeΑΓͬͪ͜ͷ΄͏͕؆୯
 (ӈυϥοά͍ͬͺ͍͔ͭΘͳ͍ͱ͍͚ͳ͍)! ΫϦοΫͰ੾Γସ͑
  16. 26.

    Constraint ͷΤϥʔ •  Constraint ͷఆ͕ٛໃ६ɾෆ଍͢Δ৔߹͸
 ΤϥʔʹͳΓ·͢ɻ! –  Y࠲ඪ͸ܾఆͰ͖Δ͕ɺ
 X࠲ඪΛܾఆͰ͖ͳ͍! – 

    X,Y ࠲ඪ͸ܾఆͰ͖Δ͕ɺ
 େ͖͞ΛܾఆͰ͖ͳ͍! –  ఆ͕ٛໃ६͢Δ
 (ಉ͡ࢦఆ͕2ͭ͋ͬͯɺ਺஋ͷఆ͕ٛҧ͏)! •  ఆ͕ٛෆ଍͢Δ৔߹͸ԫ৭͍ઢɺ
 ఆ͕ٛໃ६͢Δ৔߹͸੺͍ઢͰڭ͑ͯ͘Ε·͢ɻ! –  ࢀߟʹͯ͠मਖ਼͠·͠ΐ͏
  17. 28.

    ͱ͜ΖͰ •  ʮXamarin.Forms ͋Δͷʹ 
 ɹiOS ґଘͳ View ͷ࡞Γํ֮͑Δඞཁͳ͘Ͷʁʯ! • 

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

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


    ࢖͑ΔΑ͏ʹͳͬͨʂ
 ຊՈΑΓ࢖͍΍͍͢͠؆୯͔ͩΒΈΜͳ࢖͓ ͏ʂ!
  19. 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!