Swiftで行こう！--CollectionViewでカレンダー！

CollectionViewを使ってカレンダーを作ってみます。

【swift 4】 UICollectionViewを使ったCalendarアプリ - Qiita

を参考に自分でやってみます。

まず基本形は、

ですね。StoryBoardはこんな感じにしています。

それぞれコードと紐ずけておきます。

@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var label: UILabel!

まずlabelに日付を表示するようにします。

 let now = Date()
 var cal = Calendar.current
 let dateFormatter = DateFormatter()
 var components = DateComponents()

で今日の日付を取得して、Calendar,DateFormatter(),DateComponents()のインスタンスを変数に代入しておきます。

override func viewDidLoad() {
       super.viewDidLoad()
       
       cal.locale = Locale(identifier: "ja")
       dateFormatter.locale = Locale(identifier: "ja_JP")
       dateFormatter.dateFormat = "yyyy年M月"
       components.year = cal.component(.year, from: now)
       components.month = cal.component(.month, from: now)
       components.day = 1
   }

そしてアプリ起動時に読み込ませるコードを書き、次にlabelに日付けを表示させるコードを書いて起動時に読み込ませます。

　 let now = Date()
   var cal = Calendar.current
   let dateFormatter = DateFormatter()
   var components = DateComponents()
   
   override func viewDidLoad() {
       super.viewDidLoad()
       
       cal.locale = Locale(identifier: "ja")
       dateFormatter.locale = Locale(identifier: "ja_JP")
       dateFormatter.dateFormat = "yyyy年M月"
       components.year = cal.component(.year, from: now)
       components.month = cal.component(.month, from: now)
       components.day = 1
       calculation()
   }
   
   func calculation(){
       let firstDayOfMonth = cal.date(from: components)
       label.text = dateFormatter.string(from: firstDayOfMonth!)
   }

あとはカレンダーで一番重要な数字、日付けを入れるコードを書いていきます。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
       let firstDayOfMonth = cal.date(from: components)
       let firstWeekday = cal.component(.weekday, from: firstDayOfMonth!)
       //weekdayAdding: 1日が何曜日かで変わるindexPath.rowに加える値
       let weekdayAdding = 2 - firstWeekday
       for subview in cell.contentView.subviews {
           subview.removeFromSuperview()
       }
       
       let daysCountInMonth = cal.range(of: .day, in: .month, for: firstDayOfMonth!)?.count
       //1日〜月末まで表示し、余ったCellは空白にする
       if (indexPath.row + weekdayAdding) >= 1 && (indexPath.row + weekdayAdding) <= daysCountInMonth! {
           cell.backgroundColor = #colorLiteral(red: 0.937254902, green: 0.937254902, blue: 0.9568627451, alpha: 1)
           let label = UILabel()
           label.font = UIFont(name: "Arial", size: 17)
           label.text = "\(indexPath.row + weekdayAdding)"
           label.sizeToFit()
           label.center = cell.contentView.center
           cell.contentView.addSubview(label)
       }
       else{
           cell.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
       }
       return cell

これを書いてやると、日にちが入りカレンダーらしくなります。さらに、日付けの上にはlabelで曜日を直接書いてやると、もっとカレンダーらしくなりいい感じです。

RUNしてみるとこんな感じになると思います。最後に全体像