Xcode 10のUI変更
2018年の9月、Xcode 10がリリースされました。様々なアップデートがある中でUIも変わったところがあり、戸惑う方も多くいると思います。 この記事ではXcode 10が以前のバージョンを変わったところを解説します。
![Xcode 10のUI変更](/content/images/size/w2000/2018/12/----------2018-12-23-13.23.59.jpg)
2018年の9月、Xcode 10がリリースされました。様々なアップデートがある中でUIも変わったところがあり、戸惑う方も多くいると思います。
この記事ではXcode 10が以前のバージョンを変わったところを解説します。
Xcode 9までStoryboard
やXib
選択中に表示されていたライブラリーペインが廃止されました。
ライブラリーペインにあったオブジェクトライブラリーやメディアライブラリーはワークスペースツールバーに移動されました。
また以前のバージョンでは「Stack Button」として表示されていた選択中のViewをStack View
下に内包する機能がありました。それが、Stack View
だけではなく、UIView
やUIScrollView
も内包できるようになります。
コードスニペットもまたワークスペースツールバーに移動されました。
これらのUI変更を解説していきます。
また最後に、私が関わったXcode 10のアップデート内容をまとめたiOS 12Programingを宣伝させてください。
目次
- オブジェクトライブラリー/メディアライブラリー
- Embed in ボタン
- コードスニペット
- 宣伝
オブジェクトライブラリー/メディアライブラリー
Xcode 9まではStoryboardファイルやXibファイルを開いているときに、右ペインのユーティリティ領域にてオブジェクトライブラリーやメディアライブラリーが選択可能でした。
Xcode 10ではこのユーティリティ領域が廃止され、オブジェクトライブラリーやメディアライブラリーのアクセスはワークスペースツールバーのエディター設定ボタン左側に移動しました。
まずオブジェクトライブラリーについて解説します。
クリックするとオブジェクトライブラリーのウィンドウが表示されます。
選択したいオブジェクトをクリックし、ViewControllerの上にドラッグすれば配置されます。
配置するとウィンドウは非表示になります。ドラッグ後も引き続きライブラリーウィンドウを表示し続けたい場合は、optionキーを押しながらクリックするか、オブジェクトをドラッグ中にoptionキーを押します。
そうするとウィンドウが固定されます。
オブジェクトライブラリーのショートカットはcommand + shift + Lです。
続いてメデイアライブラリーの解説です。
オブジェクトライブラリーのボタンを長押しするとリストが表示され、メデイアライブラリーが選択できるようになります。
操作はオブジェクトライブラリーと同じです。選択したメディアをドラッグして配置、ウィンドウを固定したい場合はoptionキーを押しながらメディア・ライブラリーを選択するか、ドラッグ中にoptionキーを押します。
メデイアライブラリーのショートカットはcommand + shift + Mです。
Embed in ボタン
Xcode 9までは「Stack」ボタンだったものが「Embed in」ボタンとして新しくなりました。
以前だと選択したViewをUIStackView
に内包するものでしたが、バージョンアップでUIView
(マージンのありなし選択可能)、UIScrollView
も選択できるようになりました。
またViewController
のEmbedもNavigation Controller
とTab Bar Controller
を選択できるようになりました。
それぞれ選択するとどうなるかを解説します。
今回はサンプルとして以下のように真四角なUIView
を4つ並べたレイアウトをしました。
View
真四角のUIView
を選択しながらEmbed inボタンのViewをクリックします。
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.50.09.jpg)
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.50.47.jpg)
すると4つのViewを内包した新たなViewが作成されました。
Viewの階層は上記図をご確認ください。
View Without Inset
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.51.23.jpg)
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.51.32.jpg)
View Without Insetを選択するとその名の通り、マージンなしでUIView
が選択したViewを内包します。
Scroll View
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.51.48.jpg)
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.51.59-1.jpg)
Scroll Viewを選択すると選択したViewをUIScrollView
に内包してくれます。
Stack View
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.52.19-1.jpg)
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.52.27.jpg)
Stack Viewを選択すると選択したViewをUIStackView
に内包してくれます。
View Controllerの内包
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.52.46.jpg)
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.52.52.jpg)
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.53.04.jpg)
![](https://blog.personal-factory.com/content/images/2018/12/----------2018-12-21-22.53.13.jpg)
Navigation ControllerとTab Bar Controllerを選択するとそれぞれのView Controllerに選択したView Controllerが内包されます。
コードスニペット
ソースエディターを表示している場合に、オブジェクトライブラリーと同じくワークスペース ツールバーのエディター設定ボタンの左隣に表示されます。
ショートカットはcommand + shift + Lです。
注意が必要なのはコードスニペットのウィンドウからは新規にコードスニペットが作成できないことです。
コードスニペットを新規作成する場合はメニューのEditor > Create Code Snippetから行います。
Xcode 10で user snippetsってどこにいっちゃったの……? pic.twitter.com/DiVgsC5VVI
— Kaoru (@TachibanaKaoru) December 6, 2018
宣伝
Xcode 10のUI変更を解説しました。オブジェクトライブラリー/メディアライブラリー、Embed inボタン、コードスニペットと、前のバージョンと大きく変わって戸惑う方も多いと思います。
この記事が参考になれば幸いです。
さて、今Peaksさんにて「iOS 12 Programming」が発売中です。
ARKitやCoreMLなど、iOS 12の最新機能をまとめた一冊です。
私は共著として、Xcode 10の新機能をまとめています。
今回のXcode 10にアップデートしたことでXcodeが格段に使いやすくなりました。
他のエディターには備わっているマルチカーソルや、Gitのステータスがひと目で分かるUIに変更されています。
さらにSignposts
の機能でInstruments
と連携してアプリパフォーマンスを計測できる機能も追加されました。
本書ではAuto Layout
をパフォーマンスを計測し、どの実装がすばやく表示されるのかを評価しています。
今回解説したUI変更も含め、より深くXcode 10がわかる本となっています。
私が執筆した章の項目はこちら
・UI の変更点
・エディター機能のアップデート
・Playground のステップ毎実行
・Run Script Phase の改善
・ソースコード管理機能
・Signposts と Instruments によるパフォーマンス計測
・エナジーログの収集
iOS 12を開発するエンジニアはもちろん、iOSが13、14とバージョンアップしても読み続けられる本となっています。
ぜひ興味のある方はこちらからご購入お願いします!