高畑 匡秀

2014.12.04

文字がウェーブするTextViewっぽいものを作る(Advent Calendar4日目)

アドベントカレンダー4日目担当の高畑です。
最近ぷよぷよは休業して、モンスターを狩って素材を集めたり、モンスターを捕まえて育てたりと
モンスターに囲まれた生活をしています。
お腹周りのおじゃまぷよは以前より減って来ました。

最近は社内でネイティブアプリを作る時に、動きがある部分に関しては
デザイナーの方にkeynoteでサンプルのアニメーションを見せて頂くことが多いです。
口答だけではどうにもイメージがわかないですし、いざ作って見ても「想像してたのと違う」となる可能性が高いので、最初にアニメーションの完成系が共有できるのは良いことです。
たまに容赦ないアニメーションのサンプルを見せられそれを見ては頭を抱え込むことが多くなってきました……

波打つTextViewっぽいもの

今回のテーマです。
keynoteのアニメーションの表現を擦り合せていたら出て来ました
よく見かける文字がウェーブしながら表示されるアレです。
とりあえず外部ライブラリーに助けを求めて探してみたがやはりテキストのウェーブなんてものはなく(もしかしたらあるかもしれない)
そもそもアニメーションってViewそのもののα値変えたり、移動させたり、大きさ変えたり、回転させたりで
TextViewの文字1つ1つに対して都合良くアニメーションなんて出来ないでしょ……

ならば、一文字一文字をTextViewにしてやればいいじゃん!という単純な発想で作りました。

完成系はこんな感じになります。

WaveするTextViewっぽいものの作り方

手順はざっとこんな感じです

  1. 1. 親となるLinearLayout(vertical)の中にLinearLayout(horizontal)を追加する
  2. 2. 1で作成したLinearLayout(horizontal)に一文字ずつTextViewを追加して行く
  3. 3. 改行が見つかれば1に戻る

というような具合でTextViewを追加していきます。
完成すると以下の図のようなView構成が出来上がります

アニメーションを実行するときは
内包されているTextViewに対してループを回して実行します。

必要なソースコード

LinearLayoutを継承したカスタムViewクラスを作る。
さんざんTextViewと良いながら大枠はLinearLayoutです。
なのでTextViewっぽいものと呼んでいます。

TextViewっぽいもののLayoutクラス

anim配下にpopup.xml追加

1つのTextViewにどういうアニメーションをさせるかの定義です。
今回は画面下から跳ねるように出て来る感じにしました。

values配下にattrs.xml追加

layout.xmlで文字色や文字サイズをを設定できるように
attrs.xmlを追加します。

使い方

layout.xmlのファイルにWaveAnimationLayoutを追加します

後はActivityでこのViewを取得し「startWaveAnimation」を呼ぶだけ

これを実行すれば動画に上がっていたような動きになります。

最後に

アニメーションのファイル(今回でいう所のpopup.xml)を取り替えると、他に色々な動きが可能です。
注意点としてテキストの文字が長すぎると自動で改行はされずに画面外に行ってしまうため
サイズの調整に失敗すると、端末によってはすべてのテキストが画面内に収まらないです。
ご利用は計画的にお願いします。
同じ動きができるライブラリがあれば教えてください。参考にしたいです。
明日は しゃかまる の番です