質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

UICollectionViewで作成したカレンダーをスワイプで月の変更をしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 660

sgyeta

score 19

 前提・実現したいこと

こちらこちらを参考にUICollectionViewを使ってカレンダーを作成しました。

ボタンによる月の変更が実装できたので、今度はスワイプ操作での月の変更を行いたいのですが
調べても手立てがわからなかったので質問させて下さい。

具体的には、添付画像の青枠の部分をスワイプすることによって
UIScrollViewのような動きでカレンダーを先月・翌日に変更させたいです。

自分なりに調べたことを下記に記述します。
アプローチの仕方が全くわからなかったのでご教示頂けると幸いです。

 該当のソースコード

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】カレンダーを作ってみる
こちらが参考になりそうかと思いましたが、カレンダーの実装方法が自分のものと違うため
どのようにUIScrollViewと関連付ければいいのかわかりませんでした。

 画像

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

5つ思いつきました
1.スワイプというジェスチャーを取得して、CollectionViewの中身のcellを入れ替える
2.横向きのUICollectionViewを作って、セルの中に1月のUICollectionViewを入れてしまう
3.1月をUICollectioinViewの1つのsectionと捉えて、横ページングする
4.1月をUICollectioinViewの1つのsectionと捉えて、縦ページングする(Apple公式アプリと同様)
5.ライブラリを使う
 
1は簡単ですが、切り替わりが一瞬です
Swipe Gesture Recognizeを使います
2,3,4は初学者には高難度です
(ページングさえできれば3,4は可能ですが)
ライブラリは最も良い結果になります(学習のためなら使えませんが)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/25 16:24 編集

    AutoLayoutで最もハマるポイントの一つです

    ViewControllerやViewの子Viewがきちんとレイアウトが終わっているかどうか検知しなければなりません
    でないと変な値が返ってきます
    今ほしいのは、MonthCalendarCollectionViewCellの子Viewのレイアウト情報なので
    UIView内でレイアウトがされたのを検知する必要があります

    ```swift
    override func layoutSubviews() {
    super.layoutSubviews()
    setupLayout()
    }
    ```
    をMonthCalendarCollectionViewCellに入れてください

    なお詳しくは「UIVIewのライフサイクル」や「UIViewControllerのライフサイクル」を調べてください
    AutoLayoutが完了するのはそれぞれlayoutSubviews()と、viewDidLayoutSubviews()です

    キャンセル

  • 2018/10/25 16:41

    ご回答ありがとうございます。

    確かに変な値が返ってきていました。
    実装自体は上記のコードを追加したら出来ました!

    ライフサイクル調べてみます!
    非常に勉強になりましたありがとうございました!

    キャンセル

  • 2018/11/12 22:22

    >kosanai様
    お世話になっております。

    こちらでお聞きした実装方法で作成したカレンダーについて
    お伺いしたいことがありコメントさせて頂きました。

    DayCollectionViewCellのタップ時の処理を実装したく
    タップ時にアラートを表示するようにしたいのですが
    Use of unresolved identifier 'present'とエラーが出てしまいます。
    MonthCalendarSourceクラス内にタップ時の処理を記述しており
    MonthCalendarSourceはUIViewControllerを継承していないので
    上記のエラーが出る原因は理解出来るのですが
    解決方法がわからなかったので追加でお伺いした次第です。

    本来であれば別スレを立てなければいけないかと思うのですが
    上記の一連の流れを説明するのが難しいと思いこちらに記載してしまいました。
    恐らくマナーとして宜しくないため、お気付きになり次第
    別スレでご教示頂ければと思います。宜しくお願い致します。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる