質問編集履歴

2 文言を再修正

sgyeta

sgyeta score 23

2018/10/16 17:27  投稿

UICollectionViewで作成したカレンダーをスワイプで月の変更をしたい
### 前提・実現したいこと
[こちら](https://fussan-blog.com/swift3-simple-calendar/)と[こちら](https://qiita.com/sakuran/items/3c2c9f22cbcbf4aff731)を参考にUICollectionViewを使ってカレンダーを作成しました。
ボタンによる月の変更が実装できたので、今度はスワイプ操作での月の変更を行いたいのですが
調べても手立てがわからなかったので質問させて下さい。
具体的には、添付画像の青枠の部分をスワイプすることによって
UIScrollViewのような動きでカレンダーを先月・翌日に変更させたいです。
自分なりに調べたことを下記に記述します。
アプローチの仕方が全くわからなかったのでご教示頂けると幸いです。
### 該当のソースコード
```CalendarViewController
class CalendarViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout{
@IBOutlet weak var navigationbar: UINavigationBar!
@IBOutlet weak var calendarView: UICollectionView!
let dateManager = DateManager()
let weekArray = ["日","月","火","水","木","金","土"]
override func viewDidLoad() {
super.viewDidLoad()
navigationbar.barTintColor = UIColor.themeColor()
navigationbar.isTranslucent = false
navigationbar.titleTextAttributes = [.foregroundColor: UIColor.white]
calendarView.delegate = self
calendarView.dataSource = self
//ナビゲーションタイトルの設定
let selectedDate = self.dateManager.selectedDate
self.navigationItem.title = self.dateManager.getFormattedDay(date: selectedDate)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
//カレンダーを前の月に戻す
@IBAction func movePrevMonth(_ sender: UIButton) {
let currentDate = dateManager.selectedDate
let prevDate = dateManager.getPrevDate(currentDate: currentDate)
calendarView.reloadData()
self.navigationItem.title = dateManager.getFormattedDay(date: prevDate)
}
//カレンダーを次の月に進める
@IBAction func moveNextMonth(_ sender: UIButton) {
let currentDate = dateManager.selectedDate
let nextDate = dateManager.getNextDate(currentDate: currentDate)
calendarView.reloadData()
self.navigationItem.title = dateManager.getFormattedDay(date: nextDate)
}
//Sectionの数
internal func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
switch(section){
case 0:
return CGSize(width: self.view.frame.width, height: 0)
default:
return CGSize(width: 0, height: 0)
}
}
//Cellの総数を返す
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// Section毎にCellの総数を変える.
switch(section){
case 0:
return 7
case 1:
return dateManager.getDayCellNumber()
default:
print("error")
return 0
}
}
//Cellに値を設定する
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// Section毎にCellのプロパティを変える.
switch(indexPath.section){
case 0:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath) as! CalendarCellOne
// cell.backgroundColor = UIColor.themeColor()
// cell.dateLabel.font = UIFont.boldSystemFont(ofSize: 14)
// cell.dateLabel.textColor = UIColor.white
cell.dateLabel.text = weekArray[indexPath.row]
cell.trashIconOne.image = nil
return cell
case 1:
let ordinalityOfFirstDay = Calendar.current.ordinality(of: .day, in: .weekOfMonth, for: dateManager.getFirstDateOfMonth())
let dateRange = NSCalendar.current.range(of: .day, in: .month, for: dateManager.getFirstDateOfMonth())
var dateText = self.dateManager.conversionDateFormat(indexPath: indexPath)
if (ordinalityOfFirstDay! - 1) > indexPath.row || ((ordinalityOfFirstDay! - 1) + dateRange!.count) - 1 < indexPath.row{
dateText = ""
}
let kinds = dateManager.getTrashKind(indexPath: indexPath)
if let kinds = kinds{
switch(kinds.count){
case 0:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath) as! CalendarCellOne
cell.layer.borderColor = UIColor.lightGray.cgColor
cell.layer.borderWidth = CGFloat(0.5)
cell.dateLabel.text = dateText
return cell
case 1:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath) as! CalendarCellOne
cell.layer.borderColor = UIColor.lightGray.cgColor
cell.layer.borderWidth = CGFloat(0.5)
cell.dateLabel.text = dateText
if !(cell.dateLabel.text?.isEmpty)!{
//cell.trashIconOne.image = TrashInfoManager.getTrashIcon(kind: kinds[0])
}
return cell
case 2:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellTwo", for: indexPath as IndexPath) as! CalendarCellTwo
cell.layer.borderColor = UIColor.lightGray.cgColor
cell.layer.borderWidth = CGFloat(0.5)
cell.dateLabel.text = dateText
if !(cell.dateLabel.text?.isEmpty)!{
//cell.trashIconOne.image = TrashInfoManager.getTrashIcon(kind: kinds[0])
//cell.trashIconTwo.image = TrashInfoManager.getTrashIcon(kind: kinds[1])
}
return cell
// case 3:
// case 4:
default:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath)
cell.backgroundColor = UIColor.white
return cell
}
}
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath)
cell.backgroundColor = UIColor.white
return cell
default:
print("section error")
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath)
cell.backgroundColor = UIColor.white
return cell
}
}
//セルのサイズを設定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width: CGFloat = collectionView.frame.size.width / CGFloat(7.0)
var height:CGFloat = 0
if indexPath.section == 0{
height = width * CGFloat(0.5)
}else if indexPath.section == 1{
height = width * CGFloat(1.5)
}
return CGSize(width:width, height:height)
}
//セルの垂直方向のマージンを設定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
//セルの水平方向のマージンを設定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
}
```
### 調べたこと
[【iOS】【swift】カレンダーを作ってみる](https://qiita.com/kitanoow/items/65b1418527eabf31e45b)
こちらが参考になりそうかと思いましたが、カレンダーの実装方法が自分のものと違うため
どのようにUIScrollViewと関連付ければいいのかわかりませんでした。
### 画像
![イメージ説明](d2da981983f683eb0314e55f9132b62b.png)
  • iOS

    7185 questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

  • Swift

    14235 questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

1 文言を修正

sgyeta

sgyeta score 23

2018/10/16 09:17  投稿

UICollectionViewで作成したカレンダーをスワイプで月の変更をしたい
### 前提・実現したいこと
[こちら](https://fussan-blog.com/swift3-simple-calendar/)と[こちら](https://qiita.com/sakuran/items/3c2c9f22cbcbf4aff731)を参考にUICollectionViewを使ってカレンダーを作成しました。
ボタンによる月の変更が実装できたので、今度はスワイプ操作での月の変更を行いたいのですが
調べても手立てがわからなかったので質問させて下さい。
具体的には、添付画像の青枠の部分をスワイプすることによって
UIScrollViewのような動きでカレンダーを先月・翌日に変更させたいです。
自分なりに調べたことを下記に記述します。
アプローチの仕方が全くわからなかったのでご教示頂けると幸いです。
### 該当のソースコード
```CalendarViewController
class CalendarViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout{
@IBOutlet weak var navigationbar: UINavigationBar!
@IBOutlet weak var calendarView: UICollectionView!
let dateManager = DateManager()
let weekArray = ["日","月","火","水","木","金","土"]
override func viewDidLoad() {
super.viewDidLoad()
navigationbar.barTintColor = UIColor.themeColor()
navigationbar.isTranslucent = false
navigationbar.titleTextAttributes = [.foregroundColor: UIColor.white]
calendarView.delegate = self
calendarView.dataSource = self
//ナビゲーションタイトルの設定
let selectedDate = self.dateManager.selectedDate
self.navigationItem.title = self.dateManager.getFormattedDay(date: selectedDate)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
//カレンダーを前の月に戻す
@IBAction func movePrevMonth(_ sender: UIButton) {
let currentDate = dateManager.selectedDate
let prevDate = dateManager.getPrevDate(currentDate: currentDate)
calendarView.reloadData()
self.navigationItem.title = dateManager.getFormattedDay(date: prevDate)
}
//カレンダーを次の月に進める
@IBAction func moveNextMonth(_ sender: UIButton) {
let currentDate = dateManager.selectedDate
let nextDate = dateManager.getNextDate(currentDate: currentDate)
calendarView.reloadData()
self.navigationItem.title = dateManager.getFormattedDay(date: nextDate)
}
//Sectionの数
internal func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
switch(section){
case 0:
return CGSize(width: self.view.frame.width, height: 0)
default:
return CGSize(width: 0, height: 0)
}
}
//Cellの総数を返す
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// Section毎にCellの総数を変える.
switch(section){
case 0:
return 7
case 1:
return dateManager.getDayCellNumber()
default:
print("error")
return 0
}
}
//Cellに値を設定する
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// Section毎にCellのプロパティを変える.
switch(indexPath.section){
case 0:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath) as! CalendarCellOne
// cell.backgroundColor = UIColor.themeColor()
// cell.dateLabel.font = UIFont.boldSystemFont(ofSize: 14)
// cell.dateLabel.textColor = UIColor.white
cell.dateLabel.text = weekArray[indexPath.row]
cell.trashIconOne.image = nil
return cell
case 1:
let ordinalityOfFirstDay = Calendar.current.ordinality(of: .day, in: .weekOfMonth, for: dateManager.getFirstDateOfMonth())
let dateRange = NSCalendar.current.range(of: .day, in: .month, for: dateManager.getFirstDateOfMonth())
var dateText = self.dateManager.conversionDateFormat(indexPath: indexPath)
if (ordinalityOfFirstDay! - 1) > indexPath.row || ((ordinalityOfFirstDay! - 1) + dateRange!.count) - 1 < indexPath.row{
dateText = ""
}
let kinds = dateManager.getTrashKind(indexPath: indexPath)
if let kinds = kinds{
switch(kinds.count){
case 0:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath) as! CalendarCellOne
cell.layer.borderColor = UIColor.lightGray.cgColor
cell.layer.borderWidth = CGFloat(0.5)
cell.dateLabel.text = dateText
return cell
case 1:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath) as! CalendarCellOne
cell.layer.borderColor = UIColor.lightGray.cgColor
cell.layer.borderWidth = CGFloat(0.5)
cell.dateLabel.text = dateText
if !(cell.dateLabel.text?.isEmpty)!{
//cell.trashIconOne.image = TrashInfoManager.getTrashIcon(kind: kinds[0])
}
return cell
case 2:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellTwo", for: indexPath as IndexPath) as! CalendarCellTwo
cell.layer.borderColor = UIColor.lightGray.cgColor
cell.layer.borderWidth = CGFloat(0.5)
cell.dateLabel.text = dateText
if !(cell.dateLabel.text?.isEmpty)!{
//cell.trashIconOne.image = TrashInfoManager.getTrashIcon(kind: kinds[0])
//cell.trashIconTwo.image = TrashInfoManager.getTrashIcon(kind: kinds[1])
}
return cell
// case 3:
// case 4:
default:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath)
cell.backgroundColor = UIColor.white
return cell
}
}
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath)
cell.backgroundColor = UIColor.white
return cell
default:
print("section error")
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CalendarCellOne", for: indexPath as IndexPath)
cell.backgroundColor = UIColor.white
return cell
}
}
//セルのサイズを設定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width: CGFloat = collectionView.frame.size.width / CGFloat(7.0)
var height:CGFloat = 0
if indexPath.section == 0{
height = width * CGFloat(0.5)
}else if indexPath.section == 1{
height = width * CGFloat(1.5)
}
return CGSize(width:width, height:height)
}
//セルの垂直方向のマージンを設定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
//セルの水平方向のマージンを設定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
}
```
### 調べたこと
[【iOS】【swift】カレンダーを作ってみる](https://qiita.com/kitanoow/items/65b1418527eabf31e45b)
こちらが参考になりそうかと思いましたが、カレンダーの実装方法が自分のものと違うため
どのようにUIScrollViewと関連付ければいいのかわかりませんでした。
### 画像
![イメージ説明](d2da981983f683eb0314e55f9132b62b.png)
  • iOS

    7185 questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

  • Swift

    14235 questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る