ページビューコントローラーを使ったプログラミング

万年日めくりカレンダーを制作する

2018年01月15日 17時00分更新

文● 柴田文彦　編集●吉田ヒロ

　前回から、ページをめくるような感覚でビューコントローラーの切り替えが可能な、ページビューコントローラーを使っています。とはいえ、前回は単にそれがどんなものであるかを示し、特に意味のない、背景色だけが異なる3つのビューのコントローラーを用意して、いろいろな切り替え方法を試しただけでした。

　その前回の最後には、ページの切り替え方法（トランジションスタイル）として、実際の紙のページが端からカールするような3Dアニメーション効果を表示できるものを指定してみました。そのページめくりの様子を見ながら思いついたアプリということで、今回は簡単な日めくりカレンダーを作ってみることにします。起動すると、今日の日付を表示し、次のページにはその翌日の日付、前のページには前日の日付を表示するというものです。

　実際の日めくりカレンダーのように紙を剥がして捨てていくわけではないので、いったん先に進んでも、また後ろに戻ることができます。また、本物の日めくりカレンダーのように、あらかじめ1年単位で用意しておく必要もないので、コツコツとめくっていきさえすれば、1年以上先でも、数年前の過去でも、その日のカレンダーを表示できます。つまり、未来も過去も含めて永久に使える、一種の「万年日めくりカレンダー」ということになります。

　このようなプログラムを作るには、iOSが日時のデータを、あるいはカレンダーという日付の集合をどのように扱うのか、ということに対する基本的な理解が必要となります。しかし、今回はページビューコントローラーを使った日めくりカレンダーを動かすことに集中し、そのあたりの詳しい説明は省きます。それについては、次回移行で改めて扱うつもりです。

カレンダーの1ページを表示するビューコントローラーの基礎を作る

　ページビューコントローラーと、そのデータソースについては前回に一通り説明しました。今回はその続きということで、そのあたりの基本的な使い方についてははしょります。そこで、いきなりですが、ページビューコントローラーで表示するカレンダーの1ページを作るところから始めます。

　それをCalendarViewControllerクラスとして定義します。まずはシンプルに、カレンダーの日付そのものではなく、プログラム起動時の「今日」からの日数のズレを表示するものにしましょう。それをoffsetという名前のプロパティで表します。初期値は0（ゼロ）で、外部から変更できるようにpublicにします。

日めくりカレンダーを作るための第1歩として、カレンダーの1ページを表示するためのビューコントローラー、CalendarViewControllerを定義します。最初は「今日」からの日付のズレを数字で表示するだけのものとします

　あとは、そのoffsetの数字を画面の中央に表示するだけです。そのためにdayFieldという名前のラベルを1つ作成し、viewDidLoadメソッドの中で、そのラベルのフォントや色などを設定し、offsetの数字を文字列に変換したものをラベルのtextプロパティにセットします。

　例によってレイアウトはviewWillLayoutSubviewsメソッドで設定します。ここではoffsetの数字が画面の中央に表示されるようにしています。

　ページビューコントローラーのデータソースは、今回もPVCDataSourceクラスとして定義します。その中では、ユーザーがページめくりの操作をした際に呼び出される2つのメソッドを定義します。ユーザーが前のページを表示するような操作をした際に呼ばれるviewControllerBeforeと、逆に次のページを表示する際に呼ばれるviewControllerAfterを名前に含む2つのメソッドです。

今回もページビューコントローラーを使うので、ページめくりに対応する2つのメソッドをデータソースのクラスの中に定義します。機能は単純で、現在のビューコントローラーのoffset値から1を引いたり、逆に1を加えた値を新たなoffset値とするカレンダービューのコントローラーを返します

　前者では、現在のビューコントローラーをCalendarViewControllerとみなして、そのoffsetプロパティの値を取得し、そこから1だけ引いた値を新たなoffset値とするCalendarViewControllerのオブジェクトを作って返します。後者はまったく逆で、取得したoffset値に1を加えたoffset値を持つオブジェクトを返します。

　このプログラムを実行すると、最初は数字の「0」（ゼロ）が、画面の中央に大きく表示されます。もちろんこれがoffsetの値です。