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の使い方

【SwiftUI】@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)
    }

まず、月と年を指定。

dateformatter.dateFormat = "LLL yyyy"

あとは現在の日付に対応します。

dateformatter.string(from: date)

これで"Nov 2022"という感じで表示できるようになります。

前後の月を取得する関数を作ります。

func previousMonth() {
　　　dateHolder.date = CalendarHelper().minusMonth(dateHolder.date)
}

func nextMonth(){
　　　dateHolder.date = CalendarHelper().plusMonth(dateHolder.date)
}

"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)
    }
}

実行すると以下のように表示されます。