iOS

Xcode 10のUI変更

2018年の9月、Xcode 10がリリースされました。様々なアップデートがある中でUIも変わったところがあり、戸惑う方も多くいると思います。 この記事ではXcode 10が以前のバージョンを変わったところを解説します。

Sato Takeshi

• 4 min read
Xcode 10のUI変更

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ファイルを開いているときに、右ペインのユーティリティ領域にてオブジェクトライブラリーやメディアライブラリーが選択可能でした。

01

Xcode 10ではこのユーティリティ領域が廃止され、オブジェクトライブラリーやメディアライブラリーのアクセスはワークスペースツールバーのエディター設定ボタン左側に移動しました。

まずオブジェクトライブラリーについて解説します。
クリックするとオブジェクトライブラリーのウィンドウが表示されます。

02

選択したいオブジェクトをクリックし、ViewControllerの上にドラッグすれば配置されます。
配置するとウィンドウは非表示になります。ドラッグ後も引き続きライブラリーウィンドウを表示し続けたい場合は、optionキーを押しながらクリックするか、オブジェクトをドラッグ中にoptionキーを押します。
そうするとウィンドウが固定されます。

fig3_1223

オブジェクトライブラリーのショートカットはcommand + shift + Lです。

続いてメデイアライブラリーの解説です。

オブジェクトライブラリーのボタンを長押しするとリストが表示され、メデイアライブラリーが選択できるようになります。

03

04

操作はオブジェクトライブラリーと同じです。選択したメディアをドラッグして配置、ウィンドウを固定したい場合はoptionキーを押しながらメディア・ライブラリーを選択するか、ドラッグ中にoptionキーを押します。

メデイアライブラリーのショートカットはcommand + shift + Mです。

Embed in ボタン

embed in

Xcode 9までは「Stack」ボタンだったものが「Embed in」ボタンとして新しくなりました。
以前だと選択したViewをUIStackViewに内包するものでしたが、バージョンアップでUIView(マージンのありなし選択可能)、UIScrollViewも選択できるようになりました。
またViewControllerのEmbedもNavigation ControllerとTab Bar Controllerを選択できるようになりました。
それぞれ選択するとどうなるかを解説します。

今回はサンプルとして以下のように真四角なUIViewを4つ並べたレイアウトをしました。

----------2018-12-21-22.49.32

View

真四角のUIViewを選択しながらEmbed inボタンのViewをクリックします。

4つのViewを選択してEmbed inボタンのViewをクリック

すると4つのViewを内包した新たなViewが作成されました。
Viewの階層は上記図をご確認ください。

View Without Inset

View Without Insetを選択するとその名の通り、マージンなしでUIViewが選択したViewを内包します。

Scroll View

Scroll Viewを選択すると選択したViewをUIScrollViewに内包してくれます。

Stack View

Stack Viewを選択すると選択したViewをUIStackViewに内包してくれます。

View Controllerの内包

Navigation ControllerとTab Bar Controllerを選択するとそれぞれのView Controllerに選択したView Controllerが内包されます。

コードスニペット

ソースエディターを表示している場合に、オブジェクトライブラリーと同じくワークスペース ツールバーのエディター設定ボタンの左隣に表示されます。

05

ショートカットはcommand + shift + Lです。
注意が必要なのはコードスニペットのウィンドウからは新規にコードスニペットが作成できないことです。

コードスニペットを新規作成する場合はメニューのEditor > Create Code Snippetから行います。

window上からは追加がないのないので注意

宣伝

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、１４とバージョンアップしても読み続けられる本となっています。
ぜひ興味のある方はこちらからご購入お願いします！

iOS 12 Programming

iOS 12 Programming

  • 著者： 加藤 尋樹,佐藤 紘一,石川 洋資,堤 修一,吉田 悠一,池田 翔,佐藤剛士,大榎一司,所 友太,
  • 製本版,電子版
  • PEAKSで購入する