このページの本文へ

Swift Playgroundsで学ぶiOSプログラミング第72回

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

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

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の値です。

定義したクラスからオブジェクトを作り、ページビューコントローラーのオブジェクトをプレイグラウンドに設定する最後の部分を確かめながら、プログラムを起動しましょう。最初は「0」が表示されるだけです

 ここから次のページをめくって表示すると、今度は「1」が表示されますが、これはoffset値が1つ増えたページが見えるからです。

ページを先(下)にめくっていくと、1つずつ数字が大きくなります。これは「今日」からのoffsetの値が増えていくからです。逆にページを前(上)にめくっていくと、表示される数字は減っていき、「0」より前はマイナスになります

 逆方向にめくっていくと、offset値が減るので、「0」の前は「-1」になります。これは「今日」の前日を意味しています。

この連載の記事
ASCII倶楽部にて、週刊アスキーの人気ルポ漫画『カオスだもんね!PLUS』が、まとめて読める新コンテンツがついに配信開始!

週間ランキングTOP5

ASCII倶楽部会員によく見られてる記事はコレだ!

ASCII倶楽部の新着記事

会員専用動画の紹介も!