Swift 20 SwiftUIを使えてCumstom View生成する

# 二十・壱　SwiftUI View

SwiftUIでViewはProtocolを従うStructureで宣言される。
View Protocolを従うようにするためには、structureはbody Propertyを持っているべきだ、このPropertyの中でViewが宣言されるべきです。
SwiftUIには使用者がinterfaceを構築する時に使える多様なView(例え、Text Label, field, Menu , toggle, layout, manager view)内蔵されている。
それぞれのViewはView Protocolを従う独立なObjectです。
SwiftUIでAppを作るようになったら、皆さんの自分自身なりのUser interface模様と動作するcustomView を生成するために、これらのViewを使えるはずです。
再利用できるView componentをCapsule化するSubview(例え、app仮面でloginをため保安　text fieldとtext fieldとbutton)から全体仮面で対するuser interfaceをcapsuleかするViewまで多様な領域にかけてcustom　viewを作る事ができます。custom viewの大きさは複雑性はまたは、custom viewで　capsule化された　child viewの個数とは関係なく、一つのcustom viewはuser interfaceの模様と動作を定義する一つの客体だけです。

# 二十・弐　Basic view 生成する
Xcodeにはcustom viewはSwiftUI View fileで含まれます。
新しいSwift UI Projectを生成すれば、XcodeはTextViewComponentひとつのcustomViewを持つ単一SwiftUIViewFileを生成するはずです。
他の view fileは　file>New>File Menuを選択してtemplet仮面でSwiftUIViewFileを選択してprojectで追加できる。
![Screenshot 2023-10-11 at 1.06.53 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/bab56f43-6e75-24f7-4259-8f67b0422c46.png)


ContentViewという名前のViewはViewProtocolを従うように宣言されています。
また、必須要素のbodyPropertyも持つていて、'Hello World'という文字列で初期化されたbuilt-in ComponentなTextViewのInstanceがbodyPropertyで含まっています。
このfileの２番目structureは **ContentViewのInstance**を生成するために必要であり、PreviewCanvasで現れるようにします。

# 二十・参　view追加する
bodyPropertyに　欲しなViewを配置して　他のViewが追加わっていける。
でも、bodyPropertyは たった一つの Viewを 返還するように 構成されています。
今度の例題でbodyComponentはChildImage及び、TextViewを含まれるVStackInstanceをreturnします。
**VStackConatiner範囲外**でViewを追加すると、Xcodeで 'Goodbye, world!'TextViewだけ含まれる２番目のpreviewを生成することになります。
![Screenshot 2023-10-11 at 1.49.40 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/3a7e0a30-88ab-25fb-5746-13f241a73d51.png)
名前からも分かるように、含まれたViewを垂直配置する。
SwiftViewは本的に親Viewと息子Viewが階層構造になります。これは様々な階層のViewが複雑なInterfaceを生成できるようになります。例え、
![IMG_1686.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/0d50cff9-66e6-b2c6-659b-b4346a1762f6.jpeg)
は
![Screenshot 2023-10-11 at 2.13.12 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/a2d09aff-4867-4bb0-b3e9-3e497140f698.png)
ここでContainerwで含まれる様々なViewを共に繋げば一つのView様に見なされます。
![Screenshot 2023-10-11 at 2.19.49 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/a0181d07-360d-10f1-78f9-37f43c97155c.png)
前の例題にはBodyPropertyのClosureはReturnSyntaxは無い。
なぜなら、たった一つの表現式になっている為です。だが、次の例題と一緒にClosureで別途の表現式が追加されば return syntaxを追加するべきだ。
![Screenshot 2023-10-11 at 2.41.54 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/428b3840-5bef-0594-2878-3cd00dce59db.png)

# 二十・肆 SubViewで作業する
> Appleは最大にViewを小さくて、軽くなる様にお進めています。

此れは再利用ができるComponentを生成を進めて、
view宣言部を最も**優しく管理**できる様にし、**Layoutが効果的にRendering**される様にする。
もし自分が作ったCustomViewの**宣言部が大きくて複雑**なら、
Subviewで割ることができる部分を探するべきだ。前のViewを参照して...
![Screenshot 2023-10-11 at 3.20.51 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/f758985d-1406-c95d-d49d-1a01c0b5eac4.png)

# 二十・伍　PropertyとりてのView
## 伍・甲　複雑なViewHirachy
SubView 生成以外にも、複雑なViewHirachyを作る方法**Viewで割り当う**
![Screenshot 2023-10-11 at 3.46.12 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/1f56159a-0797-9c4a-824d-9e3cab20a804.png)
## 伍・乙　Hstackの名前変更
宣言部の一部はProperty　Valueで移動して名前でreferenceられる
SubViewにくらへてreference時に()が**必要ない様**です。
![Screenshot 2023-10-11 at 4.12.17 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/d5c0681f-8c97-900a-1999-26bb0302dc34.png)

# 二十・淕　View変更する
## 淕・甲 ModifierをViewで適応される
> SwiftUI提供される全てのViewは正確にわたいたちが欲しい様に動かないで、
ModifierをViewて適応されで変更可能です。

このmodifierたちはViewのinstanceで呼ばれるMethod形をとりながら、
元々のViewを他のViewで　包み込む方法で必要な変更をします。
この言葉は同日なViewで、色んな変更を為にModiferがつながるという意味です。
![Screenshot 2023-10-11 at 5.23.36 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/a2e7ef06-5017-3db5-fa02-eb499d8bcc3d.png)
CarView()の下で使うこともできます
![Screenshot 2023-10-11 at 5.27.48 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/8e4de10c-7cbf-7694-af6e-0830c58b760d.png)

# 二十・柒　Text styleで作業する
前の例題で、viewでTextを表示するためfontは内在されたTextStyleを宣言されはした。
## 柒・甲
IOSはApplicaitonがTextを表示する時のText SizeをUserが選択できる様にします。
Setting > Display&Brightness > Text Size

## 柒・乙　
もしText Styleを使えてViewのFontを宣言すればText Sizeは使用者が指定されたFont Sizeに従って動的に合わせられる
* Large Title / Title / Title2 / Title3
* Headline / Subheadline 
* Body 
* Callout
* Footnote
* Caption / Caption2
このoptionを使えてCustom Fontを使う事ができます。
だが、この場合には使用者が選択されText Sizeと関係ないし固定された大きさで表示される。
![Screenshot 2023-10-11 at 11.47.05 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/f0a077e4-534d-ba59-716b-580cd494a0f8.png)
## 柒・丙　Modifier順序
![Screenshot 2023-10-11 at 11.55.22 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/27e11c72-ac20-431f-d1a3-8f4f9a59d54f.png)
![Screenshot 2023-10-12 at 12.00.53 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/0ef33d86-2d45-63d8-11da-8e8bbc25a870.png)
１番目はpaddingが適応されたんですけど、Text("Sample text")だけです。

## 柒・丁　Coustom Modifier
Viewでよく適応される代表的なModifierを作る時で使用します。
これを**様々なところで適応する事が必要な時**で便利です。
Cousom ModiefierはViewModifier Protocolを従うStructureで宣言されます。
そして、必要なところにMethod .modifier()を使って使用します。
# 二十・捌 基本的なEvent処理
SwiftUIが　Data-Drivenだけど使用者がinterface Viewを使用者が操作する時に発生するEven処理は依然として必要です。

## 捌・甲　Button viewのEventにとして
Button Viewの様な幾つのViewは使用者のinteractionを誘導するための目的で提供される。
また、ButtonViewは様々な他のViewをclickできるButtonに切り替えるために使用されることもあります。
Button Viewは内容と共に**Clickされる時に呼ばれるMethodで宣言される**べきです。
例え、View全体を一つのButtonで指定されることもできます。
でも、大部分の場合にはTextViewは、普段ButtonのContentで使用されはす。
次のImplementはTextViewを包むButtonViewで、clickさればbuttonPressed()というMetohdが呼ばれる。
![Screenshot 2023-10-12 at 10.44.28 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/14588fd0-d407-2d12-828b-e33dab88467b.png)
action functionを指定する上に、Buttonがclickされたときで、行うコードをClosureで指定することもできる。
![Screenshot 2023-10-12 at 10.48.43 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/1b2cfa66-fe5e-5366-0507-3d0a061285d1.png)
他の一般的な要件は**Image ViewをButtonで作らなきゃいけない場合**もあります。
![Screenshot 2023-10-12 at 1.15.54 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/a8b94ea1-ba15-48b7-c110-7628256158cd.png)

# 二十・玖 Custom Container View作る
SubViewは　View宣言部に小さく軽くて在りいよう再利用できるBlockで分ける有用な方法。
でも、下位ViewはContent:が Staticというものです。
言い換えばLayout(Body?)に含まれる時にSubViewに含まれるViewを動的に指定できない、
**下位Viewで含まれるView は最初の宣言部に指定された下位View だけです**
![Screenshot 2023-10-12 at 3.13.24 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/fa47e380-cb2d-229b-e50a-14f2df8cbcc5.png)


このVStackがあちこちで必要な時あちこちのViewがここで込めるべきだと仮定します。
その時にはSubViewは柔軟性を持たないんですけど、
CustomContainerViewを生成する時、SwiftUIのViewBuilderClosurePropertyを利用すれば可能です。
ViewBuilderはSwiftClosure形を取って、
様々な下位Viewで構成されたCustomViewを作るために使用できるし、
このViewが**Layout*宣言部*うちに使用されたまで内容を宣言する必要がない**です。
ViewBuilderのClosureはContent Viewたちを貰ってStaticに作った一つのViewでreturnします。

# 二十・拾　LableViewで作業する
## 拾・甲Shape RenderingとSF Symbol
LableViewは　iconとTextが並んで配置された形の二つのArgumentで構成されるという点で大部分の他の
SwiftUI Viewとは違います。
Imageは全てのImageと、SwiftUI Shape Rendering 他にはSFSymbolの形を取る事ができます。

## 拾・乙　SFSymbol
SFSymbolはApple　PlatFormのAppを開発するときでAppleのSanFranciscoのSystemFontを補完する為に
設計された数千個の拡張可能なVectorDrawingの集まりです。
![Screenshot 2023-10-12 at 3.44.06 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/7898ef3b-7ea0-f7d7-057e-3d2a0256d5bb.png)
## 拾・丙　Lable View
これは　IconとTextの大きさを伸びる為に、Font()Modifierと共にSFSymbolを使うLabelViewです。
![Screenshot 2023-10-12 at 4.11.45 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/bbbe6f7a-af55-237e-f9de-03a1cb819263.png)
AppのAssetCatalog Imageを表示すれば次のSyntaxを使います。
```Swift
Label("Welcome to SwiftUI", image: "myimage")
```
![Screenshot 2023-10-12 at 4.21.28 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/79bafaf6-0032-75f3-d811-a025adeb37be.png)

## 拾・丁　別のViewを使ってラベル宣言
TextとImageを指定する上に、題目とIconに掛けて別途のViewを使えてLabel宣言することもできます。
![Screenshot 2023-10-12 at 4.43.29 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/f59aeb60-b294-768f-8a4a-d8da27513a04.png)

# 二十・拾壱
SwiftUIの使用者Interfaceは**SwiftUIViewで宣言**されて、**ViewProtocolを従うComponentで構成**されます。
[What is Component? >> Apple developer site](https://developer.apple.com/documentation/realitykit/component)
![Screenshot 2023-10-12 at 4.58.02 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513806/78603821-54f2-d9a6-1db7-858a927ac141.png)
ViewProtocolを従う為には、StructureはView自身とBodyという名前のPropertyを含めるべきです。
```swift
var body: some View {
```
SwiftUIは使用者interfaceLayoutを設計すると使用される内在ComponentたちのLibraryを提供します。
Viewの模様と動作はModifierを適応して構成できし、CustomViewとSubViewを生成する為に修正されるとGroupingできます。同じ様に、CustomConatinerViewはViewBuilderのClosurePropertyを使えて生成できました。