Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Xamarin Studio 5 ではじめる StoryBoard + Auto Layout
Search
Nobuhiro Ito
July 05, 2014
Programming
2
5.9k
Xamarin Studio 5 ではじめる StoryBoard + Auto Layout
2014/07/05(Sat) Japan Xamarin User Group Conference
Nobuhiro Ito
July 05, 2014
Tweet
Share
More Decks by Nobuhiro Ito
See All by Nobuhiro Ito
Bitriseで本をビルドする / Build a book with Bitrise
iseebi
0
130
BitriseでmacOSアプリをビルドする / Build macOS apps with Bitrise
iseebi
1
750
iOS/Androidアプリ転送ツール TransporterPadの紹介
iseebi
0
6k
Xamarinアプリとプッシュ通知
iseebi
2
1.7k
Apple Developer Enterprise Program でどこまでいけるのか
iseebi
0
750
ReactiveProperty を使ったアプリの設計に Realm Xamarin を組み合わせる
iseebi
0
620
ReactiveProperty で Xamarin アプリの作り方が変わった
iseebi
3
1.7k
600件のPull RequestからみたXamarinのはまりどころ
iseebi
3
4.2k
Yet Another Cross Platform Development
iseebi
0
4.2k
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.1k
Rails アプリ地図考 Flush Cut
makicamel
1
110
『品質』という言葉が嫌いな理由
korimu
0
160
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
GraphQLとの向き合い方2022年版
quramy
44
13k
Producing Creativity
orderedlist
PRO
343
39k
Designing Experiences People Love
moore
139
23k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
How GitHub (no longer) Works
holman
313
140k
Become a Pro
speakerdeck
PRO
26
5.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
A Philosophy of Restraint
colly
203
16k
Transcript
Xamarin Studio 5 Ͱ͡ΊΔ StoryBoard + Auto Layout ҏγϯ /
ҏ౻৳༟! ! 2014/07/05(Sat)! Japan Xamarin User Group Conference #1
ࣗݾհ • ҏ౻৳༟ / ҏγϯ! – @iseebi / id:iseebi! •
ϑΣϯϦϧגࣜձࣾڞಉ։ൃ෦ॴଐ! – iOS / Android / Windows 8 ͷΞϓϦ։ൃͯ͠·͢! • ίϛϡχςΟ! – εϚʔτϑΥϯษڧձ@ؔ! – ͍͢͝Haskellಡॻձ in େࡕ! • HຊಡΜͰ·͢ɻ(2ि)!
None
εςοΧʔ͋Γ·͢ʂ
ϑΣϯϦϧ͏Ұͭͷப
ओͳ࣮@Xamarin http://biz.fenrir-inc.com/application_development/casestudy_app/nhk_kouhaku.html! ! ※3࿈ଓͰͬͯͯɺୈ64ճ(Ver.3.x)͔ΒXamarin
MvvmCrossΨνͰ͢ ɾιʔεϨϕϧͰղੳͯͬͨ͠Γ! ɾ͋Μ·Γͬͯͳ͍ػೳιʔεಡΜͰͬͨΓ! ɾࣾϓϥάΠϯ࡞ͬͨΓ(ͦΖͦΖࣾNuGetϦϙδτϦཱ͍ͯͨ)! ! ɾόάݟ͚ͭͨΒͪΐ͍ͪΐ͍Pull RequestૹͬͨΓ͍ͯ͠·͢ɻ!
Xamarin 3.0 new features • Xamarin Designer for iOS! •
Xamarin.Forms! • Xamarin Studio 5.0! – NuGet! – F#! – .NET BCL Documentation! • Shared Projects! ͜Εʹ͍͓ͭͯ͠͠·͢ ͜ͷ͋ͱ͋Ί͍͞Μ͕! ͓ͯ͘͠͠Ε·͢
ࠓͷ͓͠ͳ͕͖ • Xamarin Designer for iOS ͷ͍ํ! – Storyboard ͷॳظઃఆ
– جຊૢ࡞! – Segue/Unwind Segue! – UITableView ͷ Static Cells / Dynamic Prototypes! • Auto Layout ͷ͍ํ! – Auto Layout ͱ! – Auto Layout ΛΘͳ͍ͱ͖ͷ! – Constraint ͷఆٛํ๏!
Xamarin Designer for iOS • iOS ͷ UI ఆٛϑΝΠϧ Storyboard
ΛฤूͰ͖Δ! – ͍··ͰXcode Λ։͔ͳ͍ͱͰ͖ͳ͔ͬͨɺ iOS ͷ UI ฤू͕XS / VSͰͰ͖ΔΑ͏ʹͳͬͨɻ! – ෳͷը໘ؒͷఆٛΛͨ͠Γɺ͍Ζ͍ΖͰ͖Δ! • UI ఆٛϑΝΠϧ XIB (Interface Builder)͕͋Δ͕ɺ ͪ͜ΒඇରԠɻ! – Ҿ͖ଓ͖ཁXcode! • Ұ෦ͷػೳXcode ͷͷΛ্ճΔ! • ࣮Alpha ChannelͰ݁ߏલ͔Β͋ͬͨɻ! – Xamarin 3 ͷλΠϛϯάͰਖ਼ࣜԽ!
ϓϩδΣΫτͷઃఆ • Master-Detail Application ͳͲͰελʔτ͢Δͱ ͢ͰʹStoryboard͕ϓϩδΣΫτʹؚ·Ε·͢ɻ! • Empty Application ͔Β࡞͢Δ߹!
– Storyboard ΛϓϩδΣΫτʹՃ! – ϓϩδΣΫτͷϓϩύςΟ iOS Application Ͱ Main Interface Λ࡞ͬͨ Storyboard ʹࢦఆ! – AppDelegate Λमਖ਼ ! • Window ϓϩύςΟΛΦʔόʔϥΠυ (ࣗಈ࣮ϓϩύςΟͰOK)! • FinishedLaunching ͰUIWindow Λ࡞͍ͬͯΔͱ͜ΖΛফ͢!
Storyboard ͷجຊૢ࡞ Auto Layout Ҏ֎ͦΜͳʹ͘͠ͳ͍Ͱ͢
Storyboard ͷجຊૢ࡞ πʔϧϘοΫε ϓϩύςΟ 3.5inch/4inch ସ ը໘͖ସ iOS6/7ସ ζʔϜ ഒҎ্ͷζʔϜ͕Ͱ͖Δ͜ͱͱ!
ഒҎ֎ͰViewController ΛมߋͰ͖Δ ͷ͕Xcode ͱൺͯΑ͍ͱ͜Ζ
Storyboard ͷجຊૢ࡞ View Controller Segue (ηάΤ)
Storyboard ͷجຊૢ࡞ • ViewController ͷஔ! – ʙController ͕ը໘ʹͳΔ! • ViewController
ͷதʹ Control Λ υϥοάˍυϩοϓͰஔͰ͖Δ! – ஔ͍͍͚ͯͳ͍ͷ͕ஔ͚Δ͜ͱ͋ΔͷͰҙʂ! • UITableViewҎ֎ʹUITableViewCellͱ͔! • ϓϩύςΟͷIdentityͰ! – ClassΛࢦఆ͢ΔͱରԠ͢ΔΫϥε͕ग़དྷΔ! – NameΛࢦఆ͢ΔͱɺViewControllerʹ ରԠ͢ΔϓϩύςΟ͕࡞ΒΕΔ! – Xcode Ͱࣗಈతʹ࡞ΒΕͳ͍!
Segue (ηάΤ) • Storyboard Ͱը໘ؒͷભҠ ࢠؔΛఆٛ͢Δ͜ͱ͕Ͱ͖·͢ɻ! – ͜ΕΛSegue(ηάΤ)ͱ͍͍·͢ɻ! • ϘλϯViewController͔Β
ӈυϥοάˍυϩοϓͰఆٛͰ͖·͢ɻ! – ϘλϯͳͲ͔ΒͰ͖Δ͠ɺ ఆٛͨ͠ͷΛίʔυ͔ΒൃՐͰ͖Δɻ! • Segue ͷछྨ! – ը໘ؒͷભҠ! • Push, Modal (ਐΉ)! • Unwind (Δ)! – ؔੑ! • Root(UINavigationController)! • Tab (UITabBarController)! • Embed (Container View)
Unwind Segue • ʮΔʯΛࣔ͢Segue! • ͬͨઌͷը໘ʹͳΔViewController ʹ ϝιουΛఆٛ͢Δɻ! • Δલͷը໘ͷϘλϯͳͲ͔Βɺ
Scene Exit ʹ͔ͬͯӈυϥοάͯ݁͠߹͢Δ! [Action ("UnwindToTopViewController:")]! public void UnwindToTopViewController (UIStoryboardSegue segue)! {! } "!
UITableViewController • Storyboard ্Ͱ͑Δ UITableViewController ͷఆٛ2 छྨ͋Δ! – Static
cells Storyboard ্Ͱͯ͢ͷఆٛΛ࡞͢Δ! – Dynamic Prototypes ηϧͷݟͨΛఆٛͯ͠σʔλίʔυͰྲྀ͠ࠐΉ
Auto Layout • ը໘্ͷཁૉಉ࢜ͷؔੑΛఆٛͯ͠ɺ ͦΕΛͱʹϨΠΞτΛܾఆ͢Δػೳɻ! • ֤߲ཁૉ͔Βͷڑ෯ɾߴ͞ͳͲΛఆ ٛ͠·͢ɻ! • iOS
Ͱ͜ͷػೳͰ ଟղ૾ରԠΛߦ͍·͢ɻ! – iOS ΞϓϦΤϯδχΞ͕ ઈର͓͖͍֮͑ͯͨ ٕज़ͷҰͭ
Auto Layout ΛΘͳ͍ͱ͜͏ͳΔ • iOS 6/7ରԠ࣌ͷ߲જΓࠐΈ! – ͦͦ6͏Εͨํ͕͍͍ͷ͓͖ͯ͞! • iPhone
4/4S ʻʼ iPhone 5! • ը໘ճస 6Ͱ͋Θͤͨͷʹ 7ͰNavigation Barͷ Լʹߦͬͯ͠·͏
Constraint (੍) • ViewͱViewͷؔɺViewࣗମͷ෯ߴ͞ͳͲΛ ఆٛ͢ΔͷΛ Constraint ͱ͍͍·͢ɻ! – ઢͷҰຊ͕ͣͭ Constraint
ʹͳΓ·͢ɻ!
Constraint (੍) y : View1 ͷଐੑ x : View2 ͷଐੑ
m : b : ఆ (Constraint Value) View1 == View2 OK ଐੑ! • Left, Right, Top, Bottom! • Leading, Trailing! • ݴޠͷಡΉํͰ ࠨӈ͕มಈ͢Δ! • Width, Height ! • CenterX, CenterY! • Baseline
Constraint ۩ମྫ button.left = 1 * view.right + 60
button.width = 1 * view.width + 0
Constraint ͷఆٛ: ୯ମ • ViewΛΫϦοΫ͢ΔͱϞʔυ͕ΓସΓ·͢! – ؙ͍ͱ͖େ͖͞ͷมߋ! – ࢛͍֯ͱ͖Autolayout! •
ತͷϋϯυϧViewؒͷִؒఆٛ! • Ⅰͷϋϯυϧ෯ͷఆٛ • தԝͷ□ͷϋϯυϧִؒఆٛ (ͪ͜ΒͩͱViewͷத৺͔ΒͷִؒࢦఆͰ͖Δ) – XcodeΑΓͬͪ͜ͷ΄͏͕؆୯ (ӈυϥοά͍ͬͺ͍͔ͭΘͳ͍ͱ͍͚ͳ͍)! ΫϦοΫͰΓସ͑
Constraint ͷఆٛ: ෳཁૉ • ViewΛෳબ͢Δͱɺ બͨ͠ཁૉͯ͢ʹҰׅͰఆٛΛՃͰ͖·͢! – ͜ΕXcodeͩͱૢ࡞͕एׯҧ͏
Constraint ͷΤϥʔ • Constraint ͷఆ͕ٛໃ६ɾෆ͢Δ߹ ΤϥʔʹͳΓ·͢ɻ! – Y࠲ඪܾఆͰ͖Δ͕ɺ X࠲ඪΛܾఆͰ͖ͳ͍! –
X,Y ࠲ඪܾఆͰ͖Δ͕ɺ େ͖͞ΛܾఆͰ͖ͳ͍! – ఆ͕ٛໃ६͢Δ (ಉ͡ࢦఆ͕2ͭ͋ͬͯɺͷఆ͕ٛҧ͏)! • ఆ͕ٛෆ͢Δ߹ԫ৭͍ઢɺ ఆ͕ٛໃ६͢Δ߹͍ઢͰڭ͑ͯ͘Ε·͢ɻ! – ࢀߟʹͯ͠मਖ਼͠·͠ΐ͏
Constraint ͷΤϥʔͷमਖ਼ • ఆ͕ٛෆ͍ͯ͠Δ߹ɺViewControllerͷ όʔͷԫ৭͍˚ͰͲ͕͜ෆ͍ͯ͠Δ͔Θ͔Γ ·͢ɻ! – ࣗಈमਖ਼ɺ͍͍ͩͨ ͏·͍͔͘ͳ͍ͷͰ ආ͚Δͷ͕ແɻ!
• ఆ͕ٛໃ६͢Δ߹ɺ͍ઢΛϙΠϯτ͢Δ ͱݪҼΛڭ͑ͯ͘Ε·͢ɻ
ͱ͜ΖͰ • ʮXamarin.Forms ͋Δͷʹ ɹiOS ґଘͳ View ͷ࡞Γํ֮͑Δඞཁͳ͘Ͷʁʯ! •
ͦΜͳ͜ͱͳ͍ΑɺศརͩΑ! – ը໘ભҠΛײɾϊϯίʔσΟϯάͰ࡞ΕΔ! • ҰؾʹϓϩτλΠϓ·Ͱ͍͚࣋ͬͯΔ! – Forms ͱΈ߹Θͤͯ͏͜ͱͰ͖Δ! • ͷ͜ͱΛߟ͑Δͱ…! – SDK ͱ͔Xcode 6 ΈͯͨΒͬ͛͢ʔෆԺͳ͕ͭ…! – ࠶ݴ͏͚ͲɺAuto Layout ઈର͓͖͍ٕ֮͑ͯͨज़!
·ͱΊ • Xamarin Studio / Visual Studio Ͱ Storyboard ͕
͑ΔΑ͏ʹͳͬͨʂ ຊՈΑΓ͍͍͢͠؆୯͔ͩΒΈΜͳ͓ ͏ʂ!
͓Βͤ
ΤϯδχΞืूதͰ͢ http://info.fenrir-inc.com/jp/recruit/jobs.html iOS / Android Native! Xamarin / ετΞΞϓϦͰ͖Δํ
ࢀߟࢿྉ • 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!