ViewFlipperでページめくり ～ページ作成編

ホーム画面やらiPhoneやらでおなじみ横フリックでページめくり.
これを利用して, 数ページに分割したランキングを作りたい! と調べてみたら, ViewFlipperなんて便利そうなViewを見つけたヽ(･ω･)/.

ViewFlipperで簡単ページめくり

必要なものは
A. <ViewFlipper>タグを用意
B. コード上で動きを指定

まずはxml

A. <ViewFlipper>タグを用意

使いたいActivityのレイアウトに

<ViewFlipper
       android:id="@+id/flipper"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" >
</ViewFlipper>

これだけ. 実に簡単. ちなみにこの外にボタンやらなにやら置いてもOK. Layout内で<ViewFlipper>タグが陣取ったエリアだけでページめくりしてくれます.

ただしこのままだとめくる「ページ」が無いので, 中に子ビューを入れる.
入れる方法は2通り.

①. このままxmlに突っ込むぜ！
② いやコード上で動的に作りたいんで

①はまた楽. <ListView>なんかと同じようにタグの間に宣言するだけ.
例えば…

<ViewFlipper
       android:id="@+id/flipper"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" >
       <include android:id="@+id/flipper_child" layout="@layout/flipper_child"/>
</ViewFlipper>

<include>を使うと見やすくまとまってよろしいかと.flipper_child.xmlはまた別にLayoutを作って用意しておけばOK. ただ<include>は2個以上入れないとページめくりになりません. まぁ当たり前だけど('A`)
ページ数が決まっているならばこっちがオススメ.

②はちょっとめんどい. 追加自体は

ViewFlipper flipper = (ViewFlipper) findViewById(R.id.flipper);
flipper.addView(childLayout)

問題はこのchildLayout.すでにLayout自体ができているならひたすらViewを作成→addViewで良いのだが, それなら<include>使ったほうが誤爆は少ない.
また今回は順位表のように決まったLayoutを使いまわして作りたかったうえに, 何ページになるかが決まっていない始末.仕方が無いので子ビューのLayout.xmlを一枚テンプレート的に用意して動的に内容を作って addしていく.

View childLayout = this.getLayoutInflater().inflate(FLIPPER_CHILD_LAYOUT_ID, null);
ListView list = (ListView) childLayout.findViewById(R.id.list);
list.setAdapter(listAdapter);
list.setScrollingCacheEnabled(false);
list.setOnItemClickListener(itemListener);

完璧今回使ったもののコピペ. 手抜きではありません. ええ決して.
1行目で子ビューを新規生成. FLIPPER_CHILD_LAYOUT_IDは子ビューのLayout.xmlのid. 第二引数は今回は特に親のViewGroupをとらないのでnull…で良いのかな(・ω・`)
2行目は子ビューのLayout.xml内に自分で設置したListViewを取得. childLayoutからfindViewByIdしている点には注意.
3行目はそのListに値をぶち込む処理. Adapterに関しては今回はノータッチ. ただ何ページも作る際はAdapterを毎回新しく作るなどちゃんとしておかないと同じ内容のデータが延々と並ぶ苦行のFlipperが完成するので注意.
4行目は完全にListViewの設定. これをしておくとListViewスクロール時, 背景の色が変わるアレを無くすことができます. 背景色を指定しているときなんかに合わせてどうぞ. Flipper関係ねー.
5行目もListの OnItemClickListener のセット. ここで毎回ちゃんとしておくとどのページのListViewもイベントが取れるようになります. ただListenerの中でgetitemする際は,

ListView list = (ListView) parent;
Object item = (Object) list.getItemAtPosition(position);

しておかないとうまく取れないかも…
ともあれこれでFlipperにページを収められたはず.

…長くなっちゃったのでページを動かす処理は次回…