2012年7月8日日曜日

PagerTabStripで日めくりカレンダー

Support Package rev.9で追加されたというPagerTabStripを使って日めくりカレンダーぽいことをして見ます。
目的は「あにすと」のスケジュール画面をスワイプで日めくりできる方法の勉強です。

■今の実装

今の画面はこんなの。
image
LinerLayoutで日付、曜日、リストビューを縦に並べて、リストビューの上にFrameLayoutでボタンを透過で配置。
ボタンイベントで透過度を下げて、Listviewのデータを入れ替えて、再表示。
日付情報をShakeアニメーションさせてなんとなく日が変わったよと伝えてます。
ださいですね。

■PagerTitleStripのスケルトン作成

「あにすと」向けにやりたいことができるか、とりあえずシンプルなPagerTabStrip画面を作成してみようと思います。(このあとの手順はあくまで、2.1向けに作成している「あにすと」を意識した作業です。)
ネタ帳 A.B.C: PagerTabStripの使い方
http://neta-abc.blogspot.jp/2012/07/pagertabstrip.html
で、参考は例によって@kojiokbさんのサイトなんですが、いまのADTはプロジェクトの新規作成でPagerTitleStrip画面のスケルトン作ってくれるみたいですので、それをまずは利用しましょう。
image
デフォルト指定が
 BuildSDK 4.1=API16
 Minimum Required SDK=API 8(Android 2.2 Froyo)
になってます。
「あにすと」はXperia SO-01Bで動作させたいので
 BuildSDK 2.1=API7
 Minimum Required SDK=API 7(Android 2.1 Eclair)
としたいのですが、このあとのスケルトン作成に影響するのでとりあえず最大指定で
 BuildSDK 4.1=API16
 Minimum Required SDK=API 16(Android 4.1)
image
として作成した後で設定で変えます。(ここを下限に落とすとスケルトン作成してくれない)
image
最近のはこんなことまでしてくれるんですねーとか言いながら次へ。
image
BlankActivtyを選択して次へ。
image
NavigationTypeをSwipeViews+TitleStripとします。(あとでTabStripに変更する。)
作成すると、libsにsupport-v4がいますね。(最大指定にしても必要っつーのはどういうことだろう??)
image
ここからは「あにすと」を意識した変更ですが、Properties>AndroidのTargetを2.1
image
にした上で、AndroidManifest.xmlの指定を
    <uses-sdk
        android:minSdkVersion="7" />

としておきます。

MainActivity.javaにエラーが出ているので見てみると

image

となってますね。さっきTargetを変えたせいですが。
その下のほうでsupport.v4をimportしているのでこれら2行は不要のため削除しましょう。

res>values-v11、v14もとりあえず削除です。

image

layout\activity_main.xmlにあるmatch_parentなんかもとりあえずfill_parentにしておきます。

image

menu\activity_main.xmlのshowAsAction属性も怒られてるので削除します。

image

大体エラーがとれたら起動してみます。

image

ActionBarがないですけど、とりあえずPagerTitleStrip版のスワイプ画面ができました。

■作成したPagerTitleStripをPagerTabStripに


layout\activity_main.xmlのPagerTitleStripをPagerTabStripに変更します。
(さっきついでにやっとけよって話ですが。)
IDはあとで直しましょう。

image

できました!
image

■日めくりカレンダーとしての機能を考える


「あにすと」のスケジュール機能から次のような機能が必要です。

・初期表示が真ん中(前日、翌日方向にスワイプ可能)
・タブ表示に日付情報を表示
・任意のタイミングでコンテンツの差し替え

そのためにやること

・PagerAdapterのgetCountを現実的な大き目の値にしておく(1000?)
・onCreateでmViewPager.setCurrentItem(500, false);とかして真ん中あたりに初期位置設定
・onCreateでCalendar.getInstance();した値をPagerAdapterのgetPageTitleで編集して返却
・PagerAdapterのgetItemPositionをOverrideしてPOSITION_NONE返却(DummySectionFragmentのonCreateViewがmViewPager.getAdapter().notifyDataSetChanged();のたびに発生するように?DummySectionFragmentはStaticをはずす)
・onMenuItemSelectedで擬似任意の更新発生イベントでnotifyDataSetChanged呼び出し


/*------20130515 追記------
上記の内容に地雷埋め込んだままにもかかわらず、意外とアクセスがあって心苦しいので追記しておきます。
Android Fragmentでハマった事
http://bkiwad.wordpress.com/2011/05/10/android-fragment/
>Fragment(を継承したクラス)はstatic classでないと駄目
にあるように、PagerAdapterに利用するFragmentはstatic classでないと復帰時に死にます。
気をつけてください。

------20130515 追記ここまで------*/

参考にしたサイトとか


無限Swipeを実装してみる(ViewPager編) | satohu20xx's diary
http://blog.choilabo.com/20120529/121

無数の画面を左右フリックで切り替えるには? - Google Groups
https://groups.google.com/forum/?fromgroups#!topic/android-group-japan/Q9T59dyNL5U

ViewPagerでViewを強制的に更新する方法 - みっかぼログ
http://d.hatena.ne.jp/mikkabo/20120622/1340375461

ViewPagerで表示ページが変わったことを検知する方法 : 未整理ブログ
http://blog.livedoor.jp/potivip/archives/51355401.html

結果。

image

できたかも?
コンテンツ部分にListviewが設定できたらこのまま使えるかな?

■作成したプロジェクト


githubにあげときましたよ


AndroidTips/Tips01 at master · miquniqu/AndroidTips
https://github.com/miquniqu/AndroidTips/tree/master/Tips01

3 件のコメント:

  1. PagerTitleStrip を android 2.2 向けに利用したく参考にさせていただきました。こちらでは BuildTargetやファイルの変更・削除をせずに minSdkVersion=8 にするだけでandroid端末(v2.3.5)で動作しました。 PagerTabStrip に変更しても同様に動作するみたいです。ありがとうございました。

    返信削除
    返信
    1. 追加情報ありがうです。
      お役に立てたようでブログ書いた甲斐がありました^^

      削除
  2. 誤字ってた。「+と」

    返信削除