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
110
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
780
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
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
630
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
850
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
730
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
660
構文解析器入門
ydah
7
1.9k
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
280
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
640
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Designing for humans not robots
tammielis
253
25k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Facilitating Awesome Meetings
lara
54
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Typedesign – Prime Four
hannesfritz
42
2.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Become a Pro
speakerdeck
PRO
29
5.4k
A Tale of Four Properties
chriscoyier
160
23k
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!