カテゴリ:Xcode
Xcode(SwiftUI版)のコマンドリスト(2022/06/09更新)
徐々に画像添付していきます
VStack・HStack・ZStack
| コード | 説明 | 備考 |
|---|---|---|
| VStack(alignment: .値, spacing: 数値){} | 垂直に要素を並べる | （アトリビュートインスペクタで変更可能） |
| HStack(alignment: .値, spacing: 数値){} | 水平に要素を並べる | （アトリビュートインスペクタで変更可能） |
| ZStack(){} | 画像などを同じ位置の上に重ねる | （アトリビュートインスペクタで変更可能？） |
フォント・縦横サイズ・余白の変更
フォント
| コード | 説明 | 備考 |
|---|---|---|
| .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 を使った余白調整
| コード | 説明 |
|---|---|
| .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』を選択
②Finderから写真をドラック&ドロップ
③ナビゲータエリアで『ContentView』を選択
④『Resume』ボタンをクリックしてプレビューを表示
⑤『＋』をクリックし『メディアライブラリ』からイメージのアイコンをプレビューにドロップ
写真設定コード
| コード | 説明 | 備考 |
|---|---|---|
| .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』と入力（円）
図形種類コード
| コード | 説明 | 備考 |
|---|---|---|
| Circle() | 円形 | 『＋』でCircleと調べるとある |
| Ellipse() | 楕円形 | 『＋』でEllipseと調べるとある |
| Rectangle() | 四角形 | 『＋』でRectangleと調べるとある |
| RoundedRectangle(cornerRadius: 数値) | 角丸四角形 | 『＋』でRoundedRectangleと調べるとある |
| Capsule() | カプセル型 | 『＋』でCapsuleと調べるとある |
Color Set（自分の好きな色）作成方法
①ナビゲータエリアでAssetsに移動する
②エディタエリアの左下の『＋』をクリックして『Color Set』をクリック
③カラーネームは自分で決めて『Any Appearance』を選択しRGBカラーを決める
④ナビゲータエリアでContentViewを選択しResumeをクリック
⑤＋をクリックして一番右のパレットマークをクリックすると自分の作った色が表示される
⑥それを.foregroundColor()の『（）』の中にドラック&ドロップ
図形設定コード
| コード | 説明 | 備考 |
|---|---|---|
| .foregroundColor(.色) | 図形色変更 | |
| .frame(width: 数値, height: 数値) | 縦横サイズ変更 | （アトリビュートインスペクタで変更可能） |
| .rotationEffect(.degrees(数値)) | 回転・傾き変更 | |
| .clipped() | 領域からはみ出た部分の削除 | |
| .stroke() | 線で描いた（塗りつぶさない）図形 | |
| .position(x: 数値, y: 数値) | 表示位置指定 |
画像効果設定コード
⚠️画像（写真）を以下のコードを指定する際には
Image("Test_Image")
.resizable() //伸縮可能にする
.aspectRatio(contentMode: .fill) //縦横比と保ちながら領域を埋めるように表示する
のコードを打つこと（打たないと表示がおかしくなる可能性あり）
| コード | 説明 | 備考 |
|---|---|---|
| .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 {実行する処理}
リストにタイトルを付ける
コマンド：NavigetionView {
List {
実行したい処理
}
.navigetionTitle("タイトル名")
}
配列をリスト表示
リストの繰り返し処理
コマンド：List(繰り返したい処理回数) { item in
実行したい処理
}
| 演算子 | 説明 | 例 |
|---|---|---|
| ... | closed範囲演算子。演算子の左側の値から右側の値の範囲内かを判定 | 1...5（１以上５以下） |
| ..< | half-open範囲演算子。演算子の左側の値から右側の値未満までの範囲内かを判定 | 1..<5（１以上５未満） |
リストにitemの値も並べて表示
1.『HStack{}』で囲む
2.HStack{]の中に『Text(String(item))』を挿入
配列から要素を取り出しリストを表示 (個数指定ver)
1.『let リスト名 = ["りんご","オレンジ"]』のように配列を定義する
2. 『Text(リスト名[item])』を入力
配列から要素を取り出しリストを表示 (個数指定しないver)
1.『let リスト名 = ["りんご","オレンジ"]』のように配列を定義する
2. List(0 ..< リスト名.count, id: \.self){}と入力すると個数に影響されずにリスト表示が出来る
配列を順に要素を取り出して表示
1.『let リスト名 = ["りんご","オレンジ"]』のように配列を定義する
2. List(リスト名.indices, id: \.self){}と入力する
配列のフィルタリング（検索機能）を利用する
現在このカテゴリには、ページまたはメディアがありません。