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で追加できる。

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を生成することになります。

名前からも分かるように、含まれたViewを垂直配置する。
SwiftViewは本的に親Viewと息子Viewが階層構造になります。これは様々な階層のViewが複雑なInterfaceを生成できるようになります。例え、

は

ここでContainerwで含まれる様々なViewを共に繋げば一つのView様に見なされます。

前の例題にはBodyPropertyのClosureはReturnSyntaxは無い。
なぜなら、たった一つの表現式になっている為です。だが、次の例題と一緒にClosureで別途の表現式が追加されば return syntaxを追加するべきだ。

二十・肆 SubViewで作業する

Appleは最大にViewを小さくて、軽くなる様にお進めています。

此れは再利用ができるComponentを生成を進めて、
view宣言部を最も優しく管理できる様にし、Layoutが効果的にRenderingされる様にする。
もし自分が作ったCustomViewの宣言部が大きくて複雑なら、
Subviewで割ることができる部分を探するべきだ。前のViewを参照して...

二十・伍　PropertyとりてのView

伍・甲　複雑なViewHirachy

SubView 生成以外にも、複雑なViewHirachyを作る方法Viewで割り当う

伍・乙　Hstackの名前変更

宣言部の一部はProperty　Valueで移動して名前でreferenceられる
SubViewにくらへてreference時に()が必要ない様です。

二十・淕　View変更する

淕・甲 ModifierをViewで適応される

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

このmodifierたちはViewのinstanceで呼ばれるMethod形をとりながら、
元々のViewを他のViewで　包み込む方法で必要な変更をします。
この言葉は同日なViewで、色んな変更を為にModiferがつながるという意味です。

CarView()の下で使うこともできます

二十・柒　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と関係ないし固定された大きさで表示される。
  

柒・丙　Modifier順序

１番目は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が呼ばれる。

action functionを指定する上に、Buttonがclickされたときで、行うコードをClosureで指定することもできる。

他の一般的な要件はImage ViewをButtonで作らなきゃいけない場合もあります。

二十・玖 Custom Container View作る

SubViewは　View宣言部に小さく軽くて在りいよう再利用できるBlockで分ける有用な方法。
でも、下位ViewはContent:が Staticというものです。
言い換えばLayout(Body?)に含まれる時にSubViewに含まれるViewを動的に指定できない、
下位Viewで含まれるView は最初の宣言部に指定された下位View だけです

この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の集まりです。

拾・丙　Lable View

これは　IconとTextの大きさを伸びる為に、Font()Modifierと共にSFSymbolを使うLabelViewです。

AppのAssetCatalog Imageを表示すれば次のSyntaxを使います。

Label("Welcome to SwiftUI", image: "myimage")

拾・丁　別のViewを使ってラベル宣言

TextとImageを指定する上に、題目とIconに掛けて別途のViewを使えてLabel宣言することもできます。

二十・拾壱

SwiftUIの使用者InterfaceはSwiftUIViewで宣言されて、ViewProtocolを従うComponentで構成されます。
What is Component? >> Apple developer site

ViewProtocolを従う為には、StructureはView自身とBodyという名前のPropertyを含めるべきです。

var body: some View {

SwiftUIは使用者interfaceLayoutを設計すると使用される内在ComponentたちのLibraryを提供します。
Viewの模様と動作はModifierを適応して構成できし、CustomViewとSubViewを生成する為に修正されるとGroupingできます。同じ様に、CustomConatinerViewはViewBuilderのClosurePropertyを使えて生成できました。