Support Package revision 9 から追加されたクラスです。
PagerTitleStripを使うと、ViewPagerのページごとにタイトルを表示させることができます。Google Plaｙのアプリ一覧画面のようなレイアウトです（「カテゴリ」とかのところ）。
PagerTitleStripのタイトル部分は、(Fragment)PagerAdapter#getPageTitle(int)で設定しますが、戻り値がCharSequenceなので文字列しか指定できません。
これをViewを指定できるように変更します。
ソース
ViewTitlePagerAdapter.java
package android.support.v4.view;
import android.view.View;
public abstract class ViewTitlePagerAdapter extends PagerAdapter {
public abstract View getPageTitleView(int position);
}
PagerAdapterにViewを返すメソッドを追加したものです。
PagerViewTitleStrip.java
PagerTitleStripのソース（revision 12現在）を元に作成したクラスです。
以下は変更部分です。
// TextView mPrevText;
// TextView mCurrText;
// TextView mNextText;
View mPrevView;
View mCurrView;
View mNextView;
public PagerViewTitleStrip(Context context, AttributeSet attrs) {
super(context, attrs);
// addView(mPrevText = new TextView(context));
// addView(mCurrText = new TextView(context));
// addView(mNextText = new TextView(context));
addView(mPrevView = new View(context));
addView(mCurrView = new View(context));
addView(mNextView = new View(context));
}
TextViewの部分をViewに置き換えてます。 void updateText(int currentItem, PagerAdapter adapter) {
final int itemCount = adapter != null ? adapter.getCount() : 0;
mUpdatingText = true;
// CharSequence text = null;
// if (currentItem >= 1 && adapter != null) {
// text = adapter.getPageTitle(currentItem - 1);
// }
// mPrevText.setText(text);
//
// mCurrText.setText(adapter != null && currentItem < itemCount ?
// adapter.getPageTitle(currentItem) : null);
//
// text = null;
// if (currentItem + 1 < itemCount && adapter != null) {
// text = adapter.getPageTitle(currentItem + 1);
// }
// mNextText.setText(text);
removeView(mPrevView);
if (currentItem >= 1 && adapter != null) {
mPrevView = ((ViewTitlePagerAdapter) adapter).getPageTitleView(currentItem - 1);
} else {
mPrevView = new View(getContext());
}
addView(mPrevView);
removeView(mCurrView);
if (currentItem < itemCount && adapter != null) {
mCurrView = ((ViewTitlePagerAdapter) adapter).getPageTitleView(currentItem);
} else {
mCurrView = new View(getContext());
}
addView(mCurrView);
removeView(mNextView);
if (currentItem + 1 < itemCount && adapter != null) {
mNextView = ((ViewTitlePagerAdapter) adapter).getPageTitleView(currentItem + 1);
} else {
mNextView = new View(getContext());
}
addView(mNextView);
}
}
PagerAdapter#getPageTitle()の代わりに、ViewTitlePagerAdapter#getPageTitleView()を呼ぶようにします。
以上がライブラリ側の変更です。
使用例
MainActivity.java
public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ViewPager vp = (ViewPager) findViewById(R.id.view_pager);
vp.setAdapter(new TextPagerAdapter(this));
}
private static class TextPagerAdapter extends ViewTitlePagerAdapter {
int[] mImages = {
R.drawable.emo_im_angel,
R.drawable.emo_im_cool,
R.drawable.emo_im_crying,
R.drawable.emo_im_embarrassed,
R.drawable.emo_im_foot_in_mouth,
R.drawable.emo_im_happy,
R.drawable.emo_im_kissing,
R.drawable.emo_im_laughing,
R.drawable.emo_im_lips_are_sealed,
R.drawable.emo_im_money_mouth,
R.drawable.emo_im_sad,
R.drawable.emo_im_surprised,
R.drawable.emo_im_tongue_sticking_out,
R.drawable.emo_im_undecided,
R.drawable.emo_im_winking,
R.drawable.emo_im_wtf,
R.drawable.emo_im_yelling,
};
Context mContext;
public TextPagerAdapter(Context context) {
mContext = context;
}
@Override
public int getCount() {
return mImages.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == ((View) object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
TextView tv = (TextView) View.inflate(mContext, R.layout.view_item, null);
tv.setText(Integer.toString(position));
((ViewPager) container).addView(tv);
return tv;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((View) object);
}
@Override
public View getPageTitleView(int position) {
TextView tv = (TextView) View.inflate(mContext, R.layout.view_title, null);
tv.setText("Page:" + position);
tv.setCompoundDrawablesWithIntrinsicBounds(
null, mContext.getResources().getDrawable(mImages[position]), null, null);
return tv;
}
}
}
PagerAdapterをViewTitlePagerAdapterに置き換えて、getPageTitleView()でタイトル部分に表示したいViewを返します。main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.PagerViewTitleStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" >
</android.support.v4.view.PagerViewTitleStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>
レイアウトはPagerViewTitleStripと同じ使い方でOKです。これで実行すると以下のようになります。
わかりにくいですが、画面をスワイプすると上の画像＆テキスト部分も一緒に切り替わります。
全ソース
https://github.com/lilylight/PagerViewTitleStrip
