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

by Nobuhiro Ito

Slide 1

Slide 1 text

Xamarin Studio 5 Ͱ͸͡ΊΔ  StoryBoard + Auto Layout ҏ੎γϯ / ҏ౻৳༟! ! 2014/07/05(Sat)! Japan Xamarin User Group Conference #1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

εςοΧʔ͋Γ·͢ʂ

Slide 5

Slide 5 text

ϑΣϯϦϧ΋͏Ұͭͷப

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ϓϩδΣΫτͷઃఆ •  Master-Detail Application ͳͲͰελʔτ͢Δͱ ͢ͰʹStoryboard͕ϓϩδΣΫτʹؚ·Ε·͢ɻ! •  Empty Application ͔Β࡞੒͢Δ৔߹! –  Storyboard ΛϓϩδΣΫτʹ௥Ճ! –  ϓϩδΣΫτͷϓϩύςΟ iOS Application Ͱ   Main Interface Λ࡞ͬͨ Storyboard ʹࢦఆ! –  AppDelegate Λमਖ਼ ! •  Window ϓϩύςΟΛΦʔόʔϥΠυ  (ࣗಈ࣮૷ϓϩύςΟͰOK)! •  FinishedLaunching ͰUIWindow Λ࡞͍ͬͯΔͱ͜ΖΛফ͢!

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Storyboard ͷجຊૢ࡞ •  ViewController ͷ഑ஔ! –  ʙController ͕ը໘ʹͳΔ! •  ViewController ͷதʹ Control Λ  υϥοάˍυϩοϓͰ഑ஔͰ͖Δ! –  ஔ͍ͯ͸͍͚ͳ͍΋ͷ͕ஔ͚Δ͜ͱ΋͋ΔͷͰ஫ҙʂ! •  UITableViewҎ֎ʹUITableViewCellͱ͔! •  ϓϩύςΟͷIdentityͰ! –  ClassΛࢦఆ͢ΔͱରԠ͢ΔΫϥε͕ग़དྷΔ! –  NameΛࢦఆ͢ΔͱɺViewControllerʹ  ରԠ͢ΔϓϩύςΟ͕࡞ΒΕΔ! –  Xcode Ͱ͸ࣗಈతʹ࡞ΒΕͳ͍!

Slide 16

Slide 16 text

Segue (ηάΤ) •  Storyboard ಺Ͱ͸ը໘ؒͷભҠ΍  ਌ࢠؔ܎Λఆٛ͢Δ͜ͱ͕Ͱ͖·͢ɻ! –  ͜ΕΛSegue(ηάΤ)ͱ͍͍·͢ɻ! •  Ϙλϯ΍ViewController͔Β  ӈυϥοάˍυϩοϓͰఆٛͰ͖·͢ɻ! –  ϘλϯͳͲ͔Β΋Ͱ͖Δ͠ɺ  ఆٛͨ͠΋ͷΛίʔυ͔ΒൃՐ΋Ͱ͖Δɻ! •  Segue ͷछྨ! –  ը໘ؒͷભҠ! •  Push, Modal (ਐΉ)! •  Unwind (໭Δ)! –  ؔ܎ੑ! •  Root(UINavigationController)! •  Tab (UITabBarController)! •  Embed (Container View)

Slide 17

Slide 17 text

Unwind Segue •  ʮ໭ΔʯΛࣔ͢Segue! •  ໭ͬͨઌͷը໘ʹͳΔViewController ʹ  ϝιουΛఆٛ͢Δɻ! •  ໭Δલͷը໘ͷϘλϯͳͲ͔Βɺ  Scene Exit ʹ޲͔ͬͯӈυϥοάͯ݁͠߹͢Δ! [Action ("UnwindToTopViewController:")]! public void UnwindToTopViewController (UIStoryboardSegue segue)! {! } "!

Slide 18

Slide 18 text

UITableViewController •  Storyboard ্Ͱ࢖͑Δ   UITableViewController ͷఆٛ͸2 छྨ͋Δ! –  Static cells  Storyboard ্Ͱ͢΂ͯͷఆٛΛ࡞੒͢Δ! –  Dynamic Prototypes  ηϧͷݟͨ໨Λఆٛͯ͠σʔλ͸ίʔυͰྲྀ͠ࠐΉ

Slide 19

Slide 19 text

Auto Layout •  ը໘্ͷཁૉಉ࢜ͷؔ܎ੑΛఆٛͯ͠ɺ  ͦΕΛ΋ͱʹϨΠΞ΢τΛܾఆ͢Δػೳɻ! •  ֤߲໨΍਌ཁૉ͔Βͷڑ཭΍෯ɾߴ͞ͳͲΛఆ ٛ͠·͢ɻ! •  iOS Ͱ͸͜ͷػೳͰ  ଟղ૾౓ରԠΛߦ͍·͢ɻ! –  iOS ΞϓϦΤϯδχΞ͕  ઈର͓͖͍֮͑ͯͨ  ٕज़ͷҰͭ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Constraint (੍໿) •  ViewͱViewͷؔ܎ɺViewࣗମͷ෯ߴ͞ͳͲΛ  ఆٛ͢ΔͷΛ Constraint ͱ͍͍·͢ɻ! –  ઢͷҰຊ͕ͣͭ Constraint ʹͳΓ·͢ɻ!

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Constraint ͷఆٛ: ෳ਺ཁૉ •  ViewΛෳ਺બ୒͢Δͱɺ  બ୒ͨ͠ཁૉ͢΂ͯʹҰׅͰఆٛΛ௥ՃͰ͖·͢! –  ͜Ε΋Xcodeͩͱૢ࡞͕एׯҧ͏

Slide 26

Slide 26 text

Constraint ͷΤϥʔ •  Constraint ͷఆ͕ٛໃ६ɾෆ଍͢Δ৔߹͸  ΤϥʔʹͳΓ·͢ɻ! –  Y࠲ඪ͸ܾఆͰ͖Δ͕ɺ  X࠲ඪΛܾఆͰ͖ͳ͍! –  X,Y ࠲ඪ͸ܾఆͰ͖Δ͕ɺ  େ͖͞ΛܾఆͰ͖ͳ͍! –  ఆ͕ٛໃ६͢Δ  (ಉ͡ࢦఆ͕2ͭ͋ͬͯɺ਺஋ͷఆ͕ٛҧ͏)! •  ఆ͕ٛෆ଍͢Δ৔߹͸ԫ৭͍ઢɺ  ఆ͕ٛໃ६͢Δ৔߹͸੺͍ઢͰڭ͑ͯ͘Ε·͢ɻ! –  ࢀߟʹͯ͠मਖ਼͠·͠ΐ͏

Slide 27

Slide 27 text

Constraint ͷΤϥʔͷमਖ਼ •  ఆ͕ٛෆ଍͍ͯ͠Δ৔߹͸ɺViewControllerͷ όʔͷԫ৭͍˚ͰͲ͕͜ෆ଍͍ͯ͠Δ͔Θ͔Γ ·͢ɻ! –  ࣗಈमਖ਼͸ɺ͍͍ͩͨ  ͏·͍͔͘ͳ͍ͷͰ  ආ͚Δͷ͕ແ೉ɻ! •  ఆ͕ٛໃ६͢Δ৔߹͸ɺ੺͍ઢΛϙΠϯτ͢Δ ͱݪҼΛڭ͑ͯ͘Ε·͢ɻ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

·ͱΊ •  Xamarin Studio / Visual Studio Ͱ Storyboard ͕  ࢖͑ΔΑ͏ʹͳͬͨʂ  ຊՈΑΓ࢖͍΍͍͢͠؆୯͔ͩΒΈΜͳ࢖͓ ͏ʂ!

Slide 30

Slide 30 text

͓஌Βͤ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ࢀߟࢿྉ •  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!