Swiftで行こう!--CollectionViewでカレンダー!
CollectionViewを使ってカレンダーを作ってみます。
を参考に自分でやってみます。
まず基本形は、
ですね。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してみるとこんな感じになると思います。最後に全体像
この記事が気に入ったらサポートをしてみませんか?