SwiftUIでいこう! - カレンダー 1
SwiftIUIでカレンダーを作っていきます。動画を参考に自分でもコードを書いて実行してみます。
まずはカレンダーを表示させる"月"を自由に変更できるようにボタンを設置します。ボタンを押せば前の月、後ろの月の表示へ切り替えることができるようにします。以下のような感じにしていきます。
ContentViewは表示部分のコードです。起動時に最初に読み込まれ表示されます。ここにスクロールできるView、DateScrollerViewを別ファイルで作り作り入れ込みます。
ContentView
import SwiftUI
struct ContentView: View {
@EnvironmentObject var dateHolder:DateHolder
var body: some View {
DateScrollerView()
.environmentObject(dateHolder)
}
}
DateScrollerView
import SwiftUI
struct DateScrollerView: View {
@EnvironmentObject var dateHolder:DateHolder
var body: some View {
}
}
}
ここでデータの共有をしたいので" @EnvironmentObject"を使います。
@EnvironmentObjectの使い方
共有する"ObservableObject"を使ってデータを作ります。
DateHolder
class DateHolder:ObservableObject{
@Published var date = Date()
}
使えるように必要なコードを追加します。新規プロジェクトを作った時に作成される以下のファイルにも追加します。
@main
import SwiftUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
let dateHolder = DateHolder()
ContentView()
.environmentObject(dateHolder)
}
}
}
これでデータの共有部分はOKです。
HStackで横並びになるようにします。
HStack{
Button(action: previousMonth){}
Text()
Button(action: nextMonth){}
}
これに内容をつけていきます。まずボタンには画像をつけます。
Image(systemName: "arrow.left")
.imageScale(.large)
.font(Font.title.weight(.bold))
}
arrow.leftとarrow.rightを使って左、右の矢印とします。あとはカレンダーの日付等の取得が必要になってくるので別ファイルCalendarHelperを作ります。
CalendarHelper
import Foundation
class CalendarHelper{
let calendar = Calendar.current
let dateformatter = DateFormatter()
func monthYearString(_ date: Date) -> String
{
dateformatter.dateFormat = "LLL yyyy"
return dateformatter.string(from: date)
}
func plusMonth(_ date: Date) -> Date
{
return calendar.date(byAdding: .month, value: 1, to: date)!
}
func minusMonth(_ date: Date) -> Date
{
return calendar.date(byAdding: .month, value: -1, to: date)!
}
}
Calendar()とDateFormatter()を使って取得して表示方法も指定していきます。
let calendar = Calendar.current
let dateformatter = DateFormatter()
これでカレンダーの取得の準備します
月と年を表記するメソッド
func monthYearString(_ date: Date) -> String
{
dateformatter.dateFormat = "LLL yyyy"
return dateformatter.string(from: date)
}
まず、月と年を指定。
あとは現在の日付に対応します。
これで"Nov 2022"という感じで表示できるようになります。
前後の月を取得する関数を作ります。
"DateScrollerView"を完成させます。
横並びにしたいので基本構造です。
HStack{
Button(action: previousMonth){
}
Text(CalendarHelper().monthYearString(dateHolder.date))
Button(action: nextMonth){
}
}
DateScrollerView
import SwiftUI
struct DateScrollerView: View {
@EnvironmentObject var dateHolder:DateHolder
var body: some View {
HStack{
Spacer()
Button(action: previousMonth)
{
Image(systemName: "arrow.left")
.imageScale(.large)
.font(Font.title.weight(.bold))
}
Text(CalendarHelper().monthYearString(dateHolder.date))
.font(.title)
.bold()
Button(action: nextMonth)
{
Image(systemName: "arrow.right")
.imageScale(.large)
.font(Font.title.weight(.bold))
}
Spacer()
}
}
func previousMonth() {
dateHolder.date = CalendarHelper().minusMonth(dateHolder.date)
}
func nextMonth(){
dateHolder.date = CalendarHelper().plusMonth(dateHolder.date)
}
}
実行すると以下のように表示されます。
この記事が気に入ったらサポートをしてみませんか?