読者です 読者をやめる 読者になる 読者になる

techium

このブログは何かに追われないと頑張れない人たちが週一更新をノルマに技術情報を発信するブログです。もし何か調査して欲しい内容がありましたら、@kobashinG or @muchiki0226 までいただけますと気が向いたら調査するかもしれません。

ViewPagerにIndicatorをつける

Motivation

Indicatorつけたいやん!!と思い立ち、これでイケる! と思った後に「あ、ライブラリありそう」とググったら見つけて
「あっ。。。」ってなりました。

実装は参考程度に、下記ライブラリを使うのが良いのではないでしょうか。

github.com

indicatorの用意

まずはじめに、indicatorの絵を準備する。
円とか棒とか四角とかであれば、shapeタグを使って作ってしまうのが楽そう。
今回は円を選択中のもの(ちょい大きい)と非選択中のものを用意した。

特にこれといった解説は必要ないように思う。

indicatorの入れ物を作る

indicator自体は先に作ったものをImageView経由で描画する。
横に並べて表示することになるので、LinearLayoutをXMLに用意しておき、表示の数に合わせてソース上からAddすることにする。
サンプルコードのベースは新規プロジェクト作成時にTabbed Activityを選択し、ViewPager部分の実装はおサボりしている。

まず、LinearLayoutの挿入箇所。

RootのCoordinatorLayoutの中に実装する。
ViewPagerの中に入れてしまうと面倒すぎるので、外側に持つように。

onPageChangeListenerを拾って画像を差し替える

後は、ViewPager.OnPagechangeListenerを拾って画像を入れ替えるだけ。
Indicatorの作成と入れ替え処理をまとめたManagerクラスを作った。

内部では、コンストラクタでのImageViewの生成とLinearLayoutへの追加、
onPageSelectedの呼び出し時に選択/非選択のViewの差し替えを行っている。

このManagerをViewPagerにセットすればOK.

サンプルコード

github.com

あ−。先にライブラリ見つけてれば。
後で実装の違いを確認しておこう。