[Android] PagerTitleStripを改造する

PagerTitleStripとは

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