【Swift】Picker Viewを使って、秒も設定できるカウントダウンタイマーを作る。(Swift 2.1、XCode 7.2)

2020年6月16日

秒も設定できるカウントダウンタイマー

前回までの記事で、ホイールを回してデータを選択するDate Picker(以下、デートピッカー)やPicker View(以下、ピッカービュー)の使い方について説明してきた。

Date Picker と Picker View

 

デートピッカーにはカウントダウンの時間を設定するためのモードがあるが、時分までの設定で、秒を設定することができない。秒を含めて設定をしたい人もいると思うので、本記事ではピッカービューを使ってカウントダウンの時分秒を設定するピッカーを作ることにする。

なお、以降の手順は前回記事の続きからなので、実装を試してみる人はそちらを先に読んでおくことをお勧めする。⇒「前回記事

 

部品を配置する

デバイス画面にボタンを配置する(下図赤矢印)。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Titleに「カウントダウン開始」、Text Colorを白、Backgroundに青を設定する。

次に、紫枠のアシスタントエディタボタンを押してViewController.swiftを開く。Ctrlを押しながらボタンをドラッグ&ドロップでソースコードに運んで吹き出しの設定画面を表示する(水色矢印)。

Connectionに「Action」、Nameに「startContDown」、Typeに「UIButton」、Eventに「Touch Up Inside」を設定し、Connectボタンを押す。これでボタンを押したイベントをコードで受けれるようになった。

デバイス画面にボタンを配置する

 

次に、Ctrlキーを押しながらピッカービューをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。Connectionに「Outlet」、Nameに「testPickerView」を入力し、Connectボタンを押す。これで、ソースコードからピッカービューを操作できるようになった。

ついでにピッカービューの領域を把握しやすくするために背景色を変えておこう。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Backgroundをオレンジ色に設定する。

Picker Viewとソースコードのコネクションを確立する

コンポーネントのサイズを指定する。

ホイールの間に「時間、分、秒」のラベルを表示して、何を指定するホイールなのかを分かりやすくしようと思うが、そのままでは下図のように真ん中のゼロを中心に数字が均等に並ぶためバランスが悪い。

通常のホイール

 

そこで、ホイールのサイズを指定してバランスを整えることにする。サイズを指定するには以下のメソッドを用いる。

コンポーネントごとに下のメソッドが呼ばれるので、コンポーネントごとのホイールの幅を返す。

 

上記コードのように幅を100、50、30にした場合、下図のように配置される。具体的には、100ピクセル、50ピクセル、30ピクセルのコンポーネントが5ピクセルの隙間を開けながら並び、その塊がピッカービューの左右端から同じ距離になるように配置される。なお、赤青緑の色は分りやすいように色付けしただけである。

ホイールの配置

 

コンポーネントの幅と隙間の合計がピッカービューの幅を超える場合は、ピッカービューの左端から配置されて右側のコンポーネントが見切れることになる。

下図は、ピッカービューの幅288に対して、コンポーネントの幅を150、100、100に指定した結果。

コンポーネントの幅がピッカービューの幅を超える場合

 

上記を考慮して、今回の検証では全てのコンポーネントの幅をピッカービューの幅の4分の1にし、文字列を左揃えにする。そして、ラベル「時間」はピッカービュー幅の4分の1のX座標、「分」はピッカービュー幅の2分の1のX座標、「秒」はピッカービュー幅の4分の3のX座標に配置する。

Componentの幅をPickerViewの幅の4分の1に指定

 

ViewController.swiftを開き、以下のコードのように変更する。

カウントダウンの作りはデートビューの記事で作ったものとほぼ同じで、ボタンが押されたらピッカービューの設定値を「残り秒数」としてクラス変数に保持し、1秒周期で残り秒数を減らしながらラベルに表示する。

 

以下は実際のプレイ動画