新しいプロジェクトを生成するとXcodeはプロジェクトで使用するuserInterfaceをStoryBoard基して生成するか、それともSwiftUI基してするかを選択権を提供します。SwiftUIプロジェクトを生成するとXcodeはUIKitStoryBoardモードには全然違う方法のuserInterface設計環境を提供します。
SwiftUIモードで作業するとアプリ開発者である皆様の時間大部分をコードEditorとPreviewCanvasで費やすことになります。
17.1 Xcode14 始める
Xcodeを始める実行すると、'Show this window when Xcode launches'を消していない場合 Window > Welcome to Xcode メニュウを選択しましょう
17.2 SwiftUI プロジェクト生成する
新しいプロジェクト生成するときテンプリット画面にはアプリプロジェクトを実装する方法を選択するオプションが表示されます。特定ApplePlatformアプリを作るとか、multiPlatformプロジェクトを生成するオプションを使う事ができます。platform別オプションを選択するとStoryBoard または SwiftUI基盤プロジェクトを生成する事もできます。
Multiplatformプロジェクト使用するとflatform別コードを最小限にして様々なApplePlatform用アプリで設計する事もできます。最初はIOSだけを対象にする予定でもMulti Platformオプションをプロジェクトを再構成しなくても今後方のplatformでアプリを
使うできる様にする柔軟性を提供するMultiplatformをお勧めます。
基本アプリ、文章基盤あアプリまたはゲームプロジェクトを作るのに使用するtempleteもあiります。
Nextを押すとプロジェクト名前を入力必要があるProjectOption画面が表示されます。
Organization Identifierは普段会社ウェブサイトのURLを逆にする事です。此れは実際デバイスでIOS高級機能をテストされる様にProvisioning profileおよびauthenticationを生成するときに使用されまする。またアプリ掲載されるとき Apple App Store内でアプリを識別させる役目もします。
Provisioning profile デバイスでアプリを実行するためには、私のデバイスが開発者を信頼できるかどうかを知る必要があり、アプリのインストールを許可するかどうかを決めることができますが、この決定を助けるファイルがプロビジョニングプロファイルです。
17.3 SwiftUIモードXcode
新しく生成されたmultiPlatform 'App'プロジェクトにはDemo.swiftとContentView.swiftと言う二つのSwiftUIビューファイルが含めれており、プロジェクトNavigation Pannelで選択すると
プロジェクトが始めてロードされる時にはXcodeはdefaultでアプリをbuildしてテストするため対象platformでMacOsを使用する事ができます。続行する前にRun DestinationChooserを使用してIPhoneを選択しましょう
PreviewCanvas中であるViewを選択するとCodeEditorで該当する部分が自動的に選択されて、強調形で表現されます。逆にコードEditorであるコードを選択するとCanvasであるViewが選択されます。
現在選択された項目propertyはAtrributeInspectorPannelで表示されます。
Debugg中なのでDebuggPannelで IOS Frameworkと皆様がコードに含ませたprint Syntax内容が出力されますもしConsoleが表示されない場合はDebbug分割Pannelの
それをclickしましょう。 此れはVariable View(Left) , Console View(Right) 二つ全部を表示できる様にしています。Variable Viewはアプリが衝突するとかDebugging BreakPointに到達する地点からアプリ内の変数を表示されます。反面、Console Viewは実行するアプリの出力結果とMessageが表示されます。
MinimapではMousePointerを合わせると該当位置のClass, Property または機能を表すLabelが表示します。
Mouseをを持っている間Commandを押ていると次の様にSourceFileの中で含まれた要素が表示されます。
17.4 Preview Canvas
此れはuserInterface設計に対する視覚的な表示と共にlayout内でViewを追加するとか修正する道具を提供します。また、此れはIOS Simulatorを実行しなくてもアプリをテストする様にします。
17.5 Preview 固定する
Xcodeでアフリを作るときにデフォルトで生成されるソラ未開ContentView.swift file以外にも複数の SwiftUI View filewで構成する事もできます。プロジェクトNavigatorPannelでSwiftUIファイルを選択するとコードエディタでとPreview Canvasが現在選ばれたファイルの内容で変更される様です。どどに方のSwiftUIファイルのコードを修正する間にも特定SwiftUIファイルのuserInterfaceLayoutが表示されていたい時があります。特に依存関係のレイアウトであったり他のviewで含まれたLayoutの場合にそうなる。
Pin Buttonは他のViewファイルを選択しても現在のpreviewをCanvasで固定して表示される様にします。preview上段にあるViewButtonをclickして固定されたView間を切り替えます。
17.6 画面設計修正する
SwiftUI作業には基本的に他のviewを追加するためにModifierを利用してViewを修正、Logicを追加して状態と他のデータObjectをBindingする事が含まれています。その様な作業全てはコードeditorでStructを修正する方法で進行します。例え、'Hello World'Text Viewを表現するfontEditorはEditor内で適度なModifierを追加いて変更する事ができます。
Text("Hello, world")
.font(.largeTitle)
方の方法ではLibraryPannelで欲しい項目を探してSwiftUI ViewでDragandDropして変更することです。
この方法をで使用うすると一度使用する後でPannelが消えてしまいます。でも、optionKeyを押すてLibrary buttonをclickすると消えてしまいません。
Library Pannelで中央上部にあるふくすうのiconは modifier, snippet, image, color resourceなどとカテゴリーに切り替える方法で使用されます。
LibraryからPreviewCanvasで項目をDragAndDropする事もできます。
この例題でButtonViewをTextView下で置こうとするとpreviewと既存のTextViewは自動的にVerticalStack ContainerViewに追加されると言うお知らせが表示されるであろう
ViewまたはModifierをSwiftUIViewFileで追加したらforegroundColorModifierを使用してカラーを指定してみよう。簡単にはEditorを修正する事です。
Text("Hello world")
.foregroundColor(.red)
他の方法ではeditorまたはpreviewPanelで該当View選んだ後でattributeInspector Pannelでforeground colorを変更する事です。
addModifierを通じてModifierを追加することもできます。このメニュウの中で現在ViewTypeで使用できるModifierが表示されます。
17.8 editor Context メニュウ
Commandを押したままコードエディターの項目をclickすると
選択した項目のターフによって変わるメニュウを提供します。一般的には現在viewに対するAttribute InspectorのPopUpバージョンで、shortcut optionとStackとListContainerにある現在viewを含むoptionが含まれます。此れは自身で属するsubViewであるviewを抽出するためにも有用です。subViewを生成することは再利用性を高めながら、性能を改善して、複雑な設計構成を綺麗いな様にお奨めています。
17.9 複数のデバイスでプレビュー
新しいくて生成されたSwiftUI Viewファイルは次のように宣言部が含まれています。
struct PreViewProvider : PreviewProvider {
Static var previews: some View {
ContentView()
}
}
PreviewProvider Protocolを従うこのStruct{}はファイルで基本となるViewのInstanceを↑ returnします。これまXcodeがpreviewCanvasで該当のViewをプレビューを表示する様に指示することでこのような宣言がなければCanvasには何も現れないだろう。
Defaultで、PreviewCanvasはXcode Toolbarでplay/Stopbutton 右にあるTarget Menuで現在選択された単一のデバイス基盤のuserInterfaceを見せてあげます。
ここで他のデバイスわ指定することもできますけどデバイスが指定される様にpreview structを修正する事でする
struct SwiftUIView: PreviewProvider {
static var previews : some View {
ContentView()
.previewDevice("iPhone SE (2nd generation)")
.previewDisplayName("iPhone SE")
}
}
次の様にGroupViewでGroupingして複数のデバイスで同時にPreviewする事ができます。
struct ContentView_Previews: PreviewProvider {
static var previews : some View {
Group{
ContentView()
.previewDevice("iphon13")
.previewDisplayName("iphon13")
ContentView()
.previewDevice("iPhone SE (2nd generation)")
.previewDisplayName("iPhone SE")
}
}
}
複数のデバイスでpreviewすると次の様にpreviewPannel上段にあるbuttonを使っで変更する事ができます。
enviroment modifierは他の構成でLayoutPreviewする事でも使う事ができます。例えば、ダークモードのpreview為のコードです。
ContentView()
.preferredColorScheme(.dark)
.previewDevice("iPhone SE (2nd generation)")
preview structは canvasにあるViewでSample Dataを伝達してテストするにも有用です。
17.11実際IOSデバイスでアプリ実行する
simulator環境は多様なIOSデバイスモーデルでアフリをテストする事ができる有用な事ですけど、実際IOSデバイスでテストする事も大事です。
もし、皆様が｀アフリ開発者プログラム加入するで説明した様にXcodeの設定画面でApple IDを入力しプロジェクトに対して開チームを選択した場合、開発用マックシステムとUSBCableで連結された実際デバイスでアフリを実行する事もできます。
開発システムとデバイスを連結された状態でアプリをテストする準備ができたらXcode toolbarであるデバイスメニュウを使います。もしかしてIOS Simulator 構成の一つがDefaultで設定されるかもしれない。このメニュウを選択して実際デバイスで変更しましょう。
17.12 デバイスとシミュレーター管理する
現在IOSデバイスとXcodeで使用する様に構成すされたシミュレーターはXcodeのデバイス画面で表示・管理することができる。
17.13 ネットワークテスト活性化する
USBCableを連結してネットワーク連結を通じするテストも支援します。
無線でアプリを実行するターゲットとして使用することが可能です。ただ同じWIFIを連結されている事です。
17.14 build error処理する
17.15 アフリ性能モニタリング
LivePreviewCanvaseで実行しているアプリの性能をモニタリングする事ができます。この情報はDebugNavigaorを通じて見る事ができます。
これらのカテゴリーのいずれかを選択すると選択されたアフリの性能に対する追加情報が提供されます。
17.16 使用者InterfaceLayout階層構造見てみる
XcodeはuserInterfaceLayoutを回転して見る事ができる3次元ビューで分離する機能を提供します。これを通じてuserInterfaceのView階層構造がどうやって構築されるかを確認する事ができます。
また、SwiftUIがどのぐらいしてくれるかを確認します。
階層構造をdebugginする間に左のPannelでは
layoutに対する全体のView階層構造が表示されます。
要約
新しいプロジェクト生成するとXcodeはアプリのuserInterfaceを作る時にUIkitStoryBoardを利用するとか、それともSwiftUIを使用するかを決定できるoptionをあげます。
previewCanvasはCodeEditorで変更されたコードがリアルタイムで反映できるように画面をupdateする様です。だが大きいな変更についてはUpadateがどどに一時停止されます。
Attribute Inspectorでは選択されたView propertyを変更して新しい修正者を追加するようにします。Commandを押したままEditorとCanvasViewをclickすると多様なContextMenuが表示されます。