Pocket

端末の音量調節をするスライダーを表示して、数秒後に非表示にするには

こんにちは、プログラマのLFです。

めっきり寒くなってきました。
帰宅すると膝の上から猫がどいてくれず
それを言い訳にだらだら過ごしてしまいがちです。

さて。
いま担当している案件で
「端末の音量調節をするスライダーを表示して、数秒後に非表示にする」
という仕様がありました。
わりとよくみかける処理なのですぐできると思いきや
意外と手間だったので備忘録として記事にしようと思います。

iOSで音量調節をするにはいくつかの方法があるのですが
今回の仕様は「端末自体の音量調節を行う」というものでしたので
MediaPlayer.framewarkのMPVolumeViewクラスを使用することにしました。

MPVolumeViewはUIViewのようにStoryboardでオブジェクトを配置することができず
あらかじめ用意したUIViewにaddSubviewする形で生成します。

サンプルコードはこちら。

これでmpVolumeViewの座標位置に音量調節用のスライダーが表示させるはずです。
ちょっと面倒ですね。
サンプルではUIViewをソースコードから生成していますが
Storyboardに配置したUIViewをアウトレットととして登録して
そのUIViewをMPVolumeViewとして利用することも可能です。
先駆者の方々のサンプルコード、この辺りの記述が曖昧で、初学者にはなかなか解読が難しいんですよね。 (こっそり)
 
さて、これで音量調節用のスライダーは生成できたわけですが
仕様は「数秒後に非表示にする」とありますので
操作をせずに数秒経ったら非表示になるように実装する必要があります。
ここにひとつトラップというか、注意が必要な点がありました。

UIViewなどはあらかじめタッチイベントを登録しておき
「タップして指が離れた」という動作を検知できるのですが
どうやらMPVolumeViewではタッチイベントを検知してくれないようです。

ちなみにUIViewのタッチイベントに関するサンプルコードはこちら。

これは困ったぞといろいろググった結果、
stackoverflowで似たようなことを質問している方がいて
MPVolumeViewの場合はパンジェスチャーを登録する必要があるそうです。

サンプルコードはこちら。

こんな感じで実装するとスライダーを操作したときに
ログが吐き出されると思います。

あとはアニメーションとタイマーで表示、非表示を表現するだけでOKです。
その辺りはググれば結構でてくるので、サンプルコードは省きます。

View周りはやっぱり奥が深くて、分かりづらいなぁと思いました。

Pocket