本文在http://blog.csdn.net/singwhatiwanna/article/details/17201587 基础上修改。使用和代码请看原文。

添加页面切换图片变化
这个IndicatorFragmentActivity 是可以添加图片的，看他的TabIndo方法就可以知道

public TabInfo(int id, String name, int iconid, Class clazz) {
            super();

            this.name = name;
            this.id = id;
            icon = iconid;
            fragmentClass = clazz;
        }

iconid 就是接收图片的id，但是这是固定的，我们在切换的时候无法变化图片(一般当前选择都会变色)，现在来添加这个功能，图片添加不是放ImageView的，是在TextView上 setCompoundDrawablesWithIntrinsicBounds

首先：TabInfo类添加多一个变量为当前选择的图片，还有get和set方法。

private int iconselect;
public int getIconselect() {
            return iconselect;
        }

        public void setIconselect(int iconselect) {
            this.iconselect = iconselect;
        }

再加一个方法，主要就是传多一个当前选择的图片的Id的参数进来。
在主Activity时候tabs.add(new TabInfo(Fragment序号, 底部的文字,未选择时候的图片id,当前选择的图片id, Fragment类));

//带旧图标和新图标
        public TabInfo(int id, String name, int iconidnormal,int iconidselect, Class clazz) {
            super();

            this.name = name;
            this.id = id;
            icon = iconidnormal;
            iconselect = iconidselect;
            fragmentClass = clazz;
        }

然后我们在TitleIndicator类里面写一个方法变化图标

/**
     *
     * 切换图标
     * @parm pos 当前的选择的位置
     * **/
    private void repraceIcon(int pos){
    //循环设置每个图标
        for(int i=0; i<mTabs.size(); i++){
            if(i!=pos){  //没选择的
                View view = getChildAt(i);
                TextView tv = (TextView) view.findViewById(R.id.tab_title);
                Drawable myImage =getResources().getDrawable(mTabs.get(i).getIcon());
                myImage.setBounds(0, 0, dip2px(22), dip2px(23));
                tv.setCompoundDrawables(null, myImage, null, null);
                //tv.setCompoundDrawablesWithIntrinsicBounds(0, mTabs.get(i).getIcon(), 0, 0);
            }else{ //当前选择
                View view = getChildAt(pos);
                TextView tv = (TextView) view.findViewById(R.id.tab_title);
                Drawable myImage =getResources().getDrawable(mTabs.get(pos).getIconselect());
                myImage.setBounds(0, 0, dip2px(22), dip2px(23));
                tv.setCompoundDrawables(null, myImage, null, null);

                //tv.setCompoundDrawablesWithIntrinsicBounds(0, mTabs.get(pos).getIconselect(), 0, 0);
            }

        }
    }

然后我们找到设置选项卡这个方法：
//设置当前选项卡

        //设置当前选项卡
    public synchronized void setCurrentTab(int index) {
        if (index < 0 || index >= getTabCount()) {
            return;
        }
        View oldTab = getChildAt(mSelectedTab);
        oldTab.setSelected(false);
        setTabTextSize(oldTab, false);

        mSelectedTab = index;
        View newTab = getChildAt(mSelectedTab);
        newTab.setSelected(true);
        setTabTextSize(newTab, true);

        repraceIcon(index);  //切换当前选择的图片，我们改图标就是在这里添加

        ((ImageView) newTab.findViewById(R.id.tab_title_tips)).setVisibility(View.GONE);

        mViewPager.setCurrentItem(mSelectedTab);
        invalidate(); //触发onDraw

    }

当然还有一个dp转为px的方法

    //dp=专为px
    public int dip2px(float dipValue){
        float scale=getResources().getDisplayMetrics().density;
        return (int) (scale*dipValue+0.5f);
    }

其他
把滚动条放在标题的顶部位置
titled_fragment_tab_activity里面的footerLineHeight改变就知道了

textColor是文字和滚动条的颜色

footerTriangleHeight 是滚动条的高度

在OnCreate里面有
//设置viewpager内部页面之间的间距，改为0 就可以无缝隙了
mPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin_width));
//设置viewpager内部页面间距的drawable
mPager.setPageMarginDrawable(R.color.page_viewer_margin_color);