カテゴリ:Xcodeのソースを表示

= Xcode(SwiftUI版)のコマンドリスト(2022/06/09更新) =
徐々に画像添付していきます

=VStack・HStack・ZStack=
{| class="wikitable"
!コード
!説明
!備考
|-
|VStack(alignment: .値, spacing: 数値){}
|垂直に要素を並べる
|（アトリビュートインスペクタで変更可能）
|-
|HStack(alignment: .値, spacing: 数値){}
|水平に要素を並べる
|（アトリビュートインスペクタで変更可能）
|-
|ZStack(){}
|画像などを同じ位置の上に重ねる
|（アトリビュートインスペクタで変更可能？）
|}
[[ファイル:VStack.png|サムネイル|VStackコード例|なし]]
[[ファイル:HStack.png|サムネイル|HStackコード例|なし]]
[[ファイル:VSHS.png|なし|サムネイル|VStack HStack主な使い方]]

=フォント・縦横サイズ・余白の変更=

=== フォント ===
{| class="wikitable"
!コード
!説明
!備考
|-
|'''.font(.値)　'''
|文字の大きさ
|'''発展１'''（アトリビュートインスペクタで変更可能）
|-
|'''.fontWeight(.値)'''
|文字の太さ
|（アトリビュートインスペクタで変更可能）
|-
|'''.foregroundColor(Color.色)'''
|文字の色
|（アトリビュートインスペクタで変更可能）
|-
|'''.frame(width: 数値,height: 数値, alignment: .値)'''
|テキストフレームの縦横サイズの変更およびフレーム内での表示位置変更
|（アトリビュートインスペクタで変更可能）
|-
|'''.lineLimit(数値)'''
|テキストの行数制限をする
|（アトリビュートインスペクタで変更可能）
|-
|'''.multilineTextAlignment(.値)'''
|位置揃えを指定
|（アトリビュートインスペクタで変更可能）
|-
|'''.border(Color.色, width:数値)'''
|枠線の色と太さの指定
|※１（アトリビュートインスペクタで変更可能）
|}
◎発展１'''◎'''　'''.font(.system(size: 数値))'''にすると文字サイズを数値で指定することが可能。

※１　指定コードを入力するとアトリビュートインスペクタで変更が可能。デフォルトの状態では表示されない。

=== .の意味 ===
.は「〜の」の意味

ドットシンタックスと呼ばれる

'''Text("Hello XCode!!").font(Font.title)'''のように繋げて１行に書くことが可能

=== 文字列連結 ===
例）Text("Hello") '''+''' Test("XCode")

『＋』で文字列連結を行う

⚠️単純に文字列が連結したわけではなく、個々に属性を指定した文字列を続けて表示している


=== 余白 ===
'''''.padding()''''' を使った余白調整（アトリビュートインスペクタで変更可能）

'''''Spacer()''''' を使った余白調整

'''''.offset''''' を使った余白調整
{| class="wikitable"
!コード
!説明
|-
|'''.padding()'''
|全体の余白（値をマイナスにすると余白が狭まる）
|-
|'''.padding(.top, 値)'''
|上の余白（　、、　）
|-
|'''.padding(.bottom, 値)'''
|下の余白（　、、　）
|-
|'''.padding(.leading, 値)'''
|左の余白（　、、　）
|-
|'''.padding(.trailing, 値)'''
|右の余白（　、、　）
|-
|'''.padding(.vartical, 値)'''
|上下の余白（　、、　）
|-
|'''.padding(.horizontal, 値)'''
|左右の余白（　、、　）
|-
|'''.padding(.all, 値)'''
|全体の余白（　、、　）
|-
|'''Spacer()'''
|VStackまたはHStackを使用した際にオブジェクトを効率よく自動調整
|-
|'''.offset(x:値, y:値)'''
|xまたはyの値分ずらす
|}

=== テキストの背景色と余白の背景色 ===
例１（テキストに背景色をつける）

Text("Hello XCode")

'''.background(Color.色)'''

.padding()


例２（余白に背景色をつける）

Text("Hello XCode")

.padding()

'''.background(Color.色)'''

=イメージ画像と図形の表示=

=== 写真を表示する方法 ===
①ナビゲータエリアで『Assets』を選択

[[ファイル:Assets.png|フレームなし]]



②Finderから写真をドラック&ドロップ

[[ファイル:Assets2.png|フレームなし]]

③ナビゲータエリアで『ContentView』を選択

[[ファイル:Assets3.png|フレームなし]]


④『Resume』ボタンをクリックしてプレビューを表示

[[ファイル:Assets4.png|フレームなし]]


⑤『＋』をクリックし『メディアライブラリ』からイメージのアイコンをプレビューにドロップ

[[ファイル:Assets5.png|フレームなし]]

=== 写真設定コード ===
{| class="wikitable"
!コード
!説明
!備考
|-
|'''.resizable(resizingMode: .値)'''
|添付画像リサイズ
|（アトリビュートインスペクタで変更可能）
|-
|'''.aspectRatio(contentMode: .値)'''
|画像伸縮変更
|'''.fit'''　→frameで指定した領域内に収まるように伸縮

'''.fill'''　→領域を埋めるように縦横サイズの長い辺に合わせて伸縮

（アトリビュートインスペクタで変更可能）
|-
|'''.frame(width: 数値, height: 数値)'''
|縦横サイズ指定
|（アトリビュートインスペクタで変更可能）
|-
|'''.scaleEffect(数値)'''
|イメージ拡大倍率変更
|⚠️'''.offset'''と実行する順番を変更すると実行結果が異なる
|-
|'''.offset(x: 数値, y: 数値)'''
|表示ずらし
|⚠️'''.scaleEffect'''と実行する順番を変更すると実行結果が異なる
|-
|'''.clipped()'''
|画像切り取り
|'''Imageコードの最後に実行する'''
|-
|'''.overlay(実行するプログラム)'''
|画像と文字を重ねる
|例 Image("swift")
.overlay(

Text("Hello XCode!")

)
|}

=== 図形の作成方法 ===
①『＋』をクリック

②Viewsに『Circle』と入力（円）

[[ファイル:Circle1.png|フレームなし]]

=== 図形種類コード ===
{| class="wikitable"
!コード
!説明
!備考
|-
|Circle()
|円形
|『＋』でCircleと調べるとある
|-
|Ellipse()
|楕円形
|『＋』でEllipseと調べるとある
|-
|Rectangle()
|四角形
|『＋』でRectangleと調べるとある
|-
|RoundedRectangle(cornerRadius: 数値)
|角丸四角形
|『＋』でRoundedRectangleと調べるとある
|-
|Capsule()
|カプセル型
|『＋』でCapsuleと調べるとある
|}

=== Color Set（自分の好きな色）作成方法 ===
①ナビゲータエリアでAssetsに移動する

[[ファイル:Assets.png|フレームなし]]



②エディタエリアの'''左下の『＋』'''をクリックして『'''Color Set'''』をクリック

[[ファイル:Color Set1.png|フレームなし]]


③カラーネームは自分で決めて『'''Any Appearance'''』を選択しRGBカラーを決める

[[ファイル:Color Set2.png|フレームなし]]


④ナビゲータエリアでContentViewを選択しResumeをクリック

[[ファイル:Assets3.png|フレームなし]]


⑤＋をクリックして一番右のパレットマークをクリックすると自分の作った色が表示される

⑥それを.foregroundColor()の『'''（）'''』の中にドラック&ドロップ

[[ファイル:Color Set3.png|フレームなし]]

=== 図形設定コード ===
{| class="wikitable"
!コード
!説明
!備考
|-
|'''.foregroundColor(.色)'''
|図形色変更
|
|-
|'''.frame(width: 数値, height: 数値)'''
|縦横サイズ変更
|（アトリビュートインスペクタで変更可能）
|-
|'''.rotationEffect(.degrees(数値))'''
|回転・傾き変更
|
|-
|'''.clipped()'''
|領域からはみ出た部分の削除
|
|-
|'''.stroke()'''
|線で描いた（塗りつぶさない）図形
|
|-
|'''.position(x: 数値, y: 数値)'''
|表示位置指定
|
|-
|}

=== 画像効果設定コード ===
⚠️画像（写真）を以下のコードを指定する際には


Image("Test_Image")

'''.resizable()  //伸縮可能にする'''

'''.aspectRatio(contentMode: .fill) //縦横比と保ちながら領域を埋めるように表示する'''


のコードを打つこと（打たないと表示がおかしくなる可能性あり）
{| class="wikitable"
!コード
!説明
!備考
|-
|.clipShape(図形コード())
|画像を好きな図形にクリッピングを行う
|例： .clipShape(Circle())
|-
|.shadow(radius: 数値)
|影をつける
|例： .shadow(radius: 10)
|-
|.rotationEffect(.degrees(数値), anchor: .値)
|回転する
|⚠️必ずこのコードを使う前に'''.clipped()'''で先にクリッピングしてから回転させること
|-
|.cornerRadius(数値)
|角を丸める
|
|-
|.background(背景ビュー)
|あらかじめ作った背景を使う
|別途背景にするviewを作成する必要がある
|-
|.rotation3DEffect(.degrees(数値), axis: (x:数値, y:数値, z:数値))
|3D回転を行う
|スタック全体を回転させることも可能 
例　

ZStack() {

実行するプログラム

}

.rotation3DEffect(.degrees(10), axis: (x:1, y:0, z:0))
|}


=リスト表示・ナビゲーションリンク=

=== リスト表示方法 ===
コマンド：'''List {実行する処理}'''
[[ファイル:List1.png|なし|サムネイル|Listを使用したテキスト及び画像の表示]]


=== リストにタイトルを付ける ===
コマンド：'''NavigetionView {'''

'''List {'''

'''実行したい処理'''

'''}'''

'''.navigetionTitle("タイトル名")'''

'''}'''

[[ファイル:List2.png|フレームなし]]


=== 配列をリスト表示 ===
'''リストの繰り返し処理'''

コマンド：'''List(繰り返したい処理回数) { item in'''

'''実行したい処理'''

'''}'''

{| class="wikitable"
!演算子
!説明
!例
|-
|'''...'''
|closed範囲演算子。演算子の左側の値から右側の値の範囲内かを判定
|1...5（１以上５以下）
|-
|'''..<'''
|half-open範囲演算子。演算子の左側の値から右側の値未満までの範囲内かを判定
|1..<5（１以上５未満）
|-
|}
[[ファイル:List3.png|フレームなし]]



'''リストにitemの値も並べて表示'''

1.'''『HStack{}』'''で囲む

2.HStack{]の中に'''『Text(String(item))』'''を挿入

[[ファイル:List4.png|フレームなし]]


=== 配列から要素を取り出しリストを表示 (個数指定ver) ===
1.『'''let リスト名 = ["りんご","オレンジ"]'''』のように配列を定義する

2. 『'''Text(リスト名[item])』'''を入力

[[ファイル:List5.png|フレームなし]]


=== 配列から要素を取り出しリストを表示 (個数指定しないver) ===
1.『'''let リスト名 = ["りんご","オレンジ"]'''』のように配列を定義する

2. '''List(0 ..< リスト名.count, id: \.self)'''{}と入力すると個数に影響されずにリスト表示が出来る

[[ファイル:List6.png|フレームなし]]


=== 配列を順に要素を取り出して表示 ===
1.『'''let リスト名 = ["りんご","オレンジ"]'''』のように配列を定義する

2.  '''List(リスト名.indices, id: \.self)'''{}と入力する

[[ファイル:List7.png|フレームなし]]


=== 配列のフィルタリング（検索機能）を利用する ===
[[ファイル:List8.png|フレームなし]]