今回から、個人アプリ（習慣アプリ）の制作日記を投稿していこうと思います。
なんとなく今日から始めちゃったので制作に入る前の企画とか設計とか何もないですが、それはまた今度まとめてvol.0 としてあげていきますー。
swiftUI初心者でわからないことだらけですが、同じようにこれからアプリ作ってみたい方の参考になれば嬉しいです！
Welcomeページを作成
今回は最初のページであるwelcomeページを作成しました！
完成したものがこちら↓
シンプルですが、画像リサイズしたりボタンの浮き立たせたりグラデーションを取り入れたりしています。
コードはこちら
struct WelcomeView: View {
let gradientOrange = LinearGradient(gradient: Gradient(colors: [Color.yellow, Color.orange]), startPoint: .leading, endPoint: .trailing)
var body: some View {
NavigationView{
ZStack{
//background picture
ZStack{
Image("start1")
.resizable()
.scaledToFill()
Rectangle()
.fill(Color.black)
.opacity(0.3)
}
.edgesIgnoringSafeArea(.all)
VStack{
//title
Text("Welcome to Habital")
.foregroundColor(Color.MyTheme.Orange)
.font(.largeTitle)
.fontWeight(.bold)
.frame(maxWidth: .infinity, alignment: .center)
.padding(.bottom, 10)
Text("Today's action makes your LIFE")
.foregroundColor(.white)
.font(.footnote)
Spacer()
//start button
NavigationLink(
destination: WishView(),
label: {
Text("start".uppercased())
.foregroundColor(Color.MyTheme.DarkGray)
.font(.title2)
.fontWeight(.bold)
.frame(maxWidth:.infinity)
.frame(height: 60)
}
)
.background(gradientOrange)
.cornerRadius(60)
.shadow(radius: 12)
.padding(.horizontal,50)
}
}
}
}
少し解説します。
背景いっぱいに画像を広げる・暗くする
ZStack{
Image("start1")
.resizable()
.scaledToFill()
Rectangle()
.fill(Color.black)
.opacity(0.3)
}
.edgesIgnoringSafeArea(.all)
resizable と scaledToFill で画像をめいっぱい広げるのですが、この時点ではあくまでセーフエリア内で広げることになるので、edgesIgnoringSafeAreaをつけます。
画像を暗くする方法はいくつか方法があるのですが、画像の上に黒の四角をおいて透過する方法をとりました。
opacityで透過させることができます。
今後は画像が秒ごとに切り替わるようにしたいなあと思いながら、今は一旦おいておきます。
ボタンをかっこよく見せる
NavigationLink(
destination: WishView(),
label: {
Text("start".uppercased())
.foregroundColor(Color.MyTheme.DarkGray)
.font(.title2)
.fontWeight(.bold)
.frame(maxWidth:.infinity)
.frame(height: 60)
}
)
.background(gradientOrange)
.cornerRadius(60)
.shadow(radius: 12)
.padding(.horizontal,50)
}まずちょっとつまづいたのは、ボタンの幅を端末によっていい感じに可変する方法。
frame(maxWidth:.infinity)とすることで画面いっぱいに広げてから、画面からのpaddingをとることで解決したかなと。
あとボタンはグラデーションと影をつけることでだいたいかっこよくなります（笑）
グラデーションはLinearGradientを使用することによって簡単に使用できました！
let gradientOrange = LinearGradient(gradient: Gradient(colors: [Color.yellow, Color.orange]), startPoint: .leading, endPoint: .trailing)
まとめ
swiftUIはCSSのように直感的にデザインをつくることができたり、リアルタイムで修正が反映されたりと、すごく楽しいです。
これからもデザインのひきだし増やしていきたいなー。
それでは。
コメント