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
Introduction of Aizome - 多言語対応とスタイル適用を両立する書式付き文字列ライブラリ
iseebi
0
100
Bitriseで本をビルドする / Build a book with Bitrise
iseebi
0
150
BitriseでmacOSアプリをビルドする / Build macOS apps with Bitrise
iseebi
1
790
iOS/Androidアプリ転送ツール TransporterPadの紹介
iseebi
0
6.1k
Apple Developer Enterprise Program でどこまでいけるのか
iseebi
0
770
ReactiveProperty を使ったアプリの設計に Realm Xamarin を組み合わせる
iseebi
0
650
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
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
690
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
660
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
680
Discover Metal 4
rei315
2
110
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
600
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
880
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
560
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
180
Select API from Kotlin Coroutine
jmatsu
1
210
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.8k
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Adopting Sorbet at Scale
ufuk
77
9.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Visualization
eitanlees
146
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Designing Experiences People Love
moore
142
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf 2023
tenderlove
30
1.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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!