【SwiftUI】コピペで使える！SwiftUIでボタンを実装しよう
この記事の概要
この記事では、SwiftUIでボタンの実装をする方法と、SwiftUIでボタンの色を変更したり、角を丸くする方法などをまとめました。また、余白を設定する方法なども以下に併記しています。SwiftUIの初心者の方でも簡単にコピペで実装できるように、コードサンプルを設けているので、ぜひご自由に使ってみてください。
数字などのプロパティを自分オリジナルのものに変更することで、無限にカスタマイズをすることもできます。
目次
- この記事の概要
- 目次
- ボタンを作るには
- 今回実装するボタン
- コード
ボタンを作るには
 |
| [図1]XCode上部のメニュー |
 |
| [図1-2] Buttonを選択 |
今回実装するボタン
今回はこの4つのボタンを実装します。
早速ですが、使うコードはこの4つ。
//ボタンその1
Button(action: {}) {
Text("ボタンその1")
}
//ボタンその2
Button(action: {}) {
Text("ボタンその2")
.foregroundColor(Color.white)
.padding()
.background(Color.red)
}
//ボタンその3
Button(action: {} ) {
Text("ボタンその3")
.foregroundColor(Color.white)
.padding()
.background(Color.red)
.cornerRadius(10)
}
//ボタンその4
Button(action: {} ) {
Text("ボタンその4")
.foregroundColor(Color.white)
.padding()
.background(Color.red)
.cornerRadius(100)
}.frame(width: 300, height: 300, alignment: .center)
コードの説明
・Text("hogehoge(任意の文字)") ：ボタン文字の指定
Button(action: {} ) {
Text("ボタンその3") //ボタンの中に入れる文字を指定する。
}
・foregroundColor(Color.hogehoge) ：文字色の指定
Button(action: {} ) {
Text("ボタンその3")
.foregroundColor(Color.white) //文字色を指定する。今回は白色。
}
・background(Color.hogehoge) ：背景色の指定
Button(action: {} ) {
Text("ボタンその3")
.background(Color.red) //文字背景色を指定する。今回は赤色。
}
・padding() ：余白の設定
Button(action: {} ) {
Text("ボタンその3")
.padding() //余白を設定してくれる
.background(Color.red) //backgroundを記述する場合は、それより上に
}
・cornerRadius(hogehoge)：角をhogehoge px分、丸くする。
Button(action: {} ) {
Text("ボタンその3")
.cornerRadius(10) //10px角丸にする
}
・.frame(width:hoge, height:hoge, alignment:hoge)
Button(action: {} ) {
Text("ボタンその4")
}.frame(width: 300, height: 300, alignment: .center)//幅、高さ、文字の揃えを指定する
コメント
コメントを投稿