swiftUIではText()やButton()などさまざまなViewがあり、
コードに記載することで、スクリーン上で表示されます。
HTMLでもText()であればspanタグ、pタグ、labelタグだったり、
Button()であればbuttonタグなど
同じようなことができ、
割と画面の描写についてはSwiftUIとHTMLとで近かったりします。
そんな中で、HTML()でstyle要素だったり、styleタグ、さらにはlinkタグで外部cssファイル読み込みなどで、
指定したものに対してcssを一括適用などができたりします。
であれば、SwiftUIでも同じようなことができるのではと思います。
簡単ですが以下のようにextensionを用いることでできます。
これができると、extensionの中身を変えるだけで、
一括でデザインを適用することができて保守も楽になります。
サンプルコード
extension Text{
public func Title() -> Text{
self.font(.title)
.fontWeight(.medium)
.foregroundColor(Color.black)
}
}
extension Text{
public func SubTitle() -> Text{
self.font(.title)
.foregroundColor(Color.blue)
}
}
基本的なViewの1つであるText()についてCSSチックなことをやっていきます。
Text()に適用するので、extensionでTextクラスを拡張します。
そこで独自メソッド(モディファイア)を作成します。
モディファイアを適用しても返すのはTextオブジェクトなので、戻り値の方はTextになります。
そして、Textクラスのプロパティを見ると、さまざまな色やフォントなどのクラスを継承しているので、上記のような書き方を書くことができ、
独自モディファイアのTitle()ではfontの大きさや、黒色を指定しています。
これにより
Text().Title()
と実行することで、フォントや黒色をそのまま適用できます。
以下のようにしてViewModifierを使うこともできます。
extension View{
/**
ログイン画面でのログインボタン
*/
@ViewBuilder
public func LoginButtonStyle() -> some View{
self
.frame(maxWidth: 200, minHeight: 30)
.foregroundColor(Color.white)
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(Color(red: 0.85, green: 0.564, blue:0.12), lineWidth: 2)
)
.background(
RoundedRectangle(cornerRadius: 5, style: .continuous).fill(Color(red: 0.85, green: 0.564, blue:0.12))
)
.opacity(0.8)
}
}
struct ContentView: View{
var body: some View{
VStack(){
Button(action:{
},label:{
Text("ログインする").foregroundColor(Color.gray)
}).LoginButtonStyle()
}
}
}