[安卓开发] 带滚动条的多屏滑动-IndicatorFragmentActivity 修改优化版|添加底部图片变化

本文在/article/1603784.html 基础上修改。使用和代码请看原文。







添加页面切换图片变化

这个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);