「カテゴリ:Xcode」の版間の差分
| 208行目: | 208行目: | ||
) | ) | ||
|} | |} | ||
=== 図形の作成と配置方法 === | |||
2022年5月18日 (水) 13:47時点における版
Xcode(SwiftUI版)のコマンドリスト(2022/05/18更新)
徐々に画像添付していきます
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!") ) |
図形の作成と配置方法
現在このカテゴリには、ページまたはメディアがありません。