自定义控件 — ViewPagerIndicator (二)
本文的学习文参考自鸿洋的博客
http://blog.csdn.net/lmj623565791/article/details/42160391
有兴趣的朋友可以去仔细的阅读下
本片文章是在
自定义控件-ViewPagerIndicator（一）基础上逐步完善的，文章参考出自 鸿洋 大神的博客 仅练习 、积累 、学习。
首先看下效果图：
tab下面很简单就是ViewPager+FragmentAdapter 的组合。
主要的代码还是在indicator这里，这里主要有这么三点功能：
上面的tab能够跟随viewpage的滑动而滚动。
下面的indicator滚动到倒数第二个的时候会停留
滑动的时候文字的颜色会随着page的变化而改变
那么这么这三点功能也就是这篇文章的相对来上一篇文章来说的重点了。
要自己写的 ViewPagerIndicator 绑定 ViewPage 首先给 ViewPagerIndicator 开放一个入口 setViewPager（ViewPager mViewPager）；在viewpage的linstener中的
onPageScrolled（int position, float positionOffset, int positionOffsetPixels）关联到tab。position：是当前所显示的界面，positionOffset：是偏移量 取值为 0 ~ 1之间 可以理解成偏移当前page的百分比positionOffsetPixels 是偏移的像素，我们可以利用前两个参数来动态设置linearlayout和下划线的位置。代码如下：
public void setViewPager(ViewPager mViewPager){
this.mViewPager=mViewPager;
this.mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
scroll(position,positionOffset);
}
@Override
public void onPageSelected(int position) {
TextView textView= viewMap.get(true);
textView.setTextColor(tabColor);
TextView textView1=(TextView) getChildAt(position);
textView1.setTextColor(tabColorChecked);
viewMap.put(true,textView1);
}
@Override
public void onPageScrollStateChanged(int state) {
Log.e("TEST","onPageScrollStateChanged:"+state);
}
});
} /**
* 指示符滚动
*
* @param position 现在的位置
* @param offset 偏移量 0 ~ 1
*/
public void scroll(int position, float offset) {
/**
* 当item的个数大于 屏幕可见的个数的 并且 当前的posion >= 倒数第二个table的时候
* 触发
*/
if(mChildCount> mItemVisibleCount && position>=(mItemVisibleCount-2)){
//移动到倒数第二个的时候让Linearlayout 停止移动
if(position>=mChildCount-2){
}else{
this.scrollTo((position-(mItemVisibleCount-2))*mWidth+(int)(mWidth*offset),0);
}
}
mLeft = (int) ((position + offset) * mWidth);
invalidate();
}在onPageSelected（）方法中我们简单的使用了TextView 一个控件创建了tab 利用map存储上次所改变的值 因为map的key是唯一的所以每次改变前一个的值之后，再用新的数据把map中的数据覆盖下。如果tab的样式复杂一些自己还可以把这里的布局改变下。
public void onPageSelected(int position) {
TextView textView= viewMap.get(true);
textView.setTextColor(tabColor);
TextView textView1=(TextView) getChildAt(position);
textView1.setTextColor(tabColorChecked);
viewMap.put(true,textView1);
}这里是设置tab数据的方法
public void setTabTitle(List<String> tabList,int currentPage){
this.tabList = tabList;
mChildCount=tabList.size();
for(int i =0;i<tabList.size();i++){
final int j=i;
TextView textView= generateTextView(tabList.get(i));
textView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mViewPager.setCurrentItem(j);
}
});
addView(textView);
}
this.mViewPager.setCurrentItem(currentPage);
viewMap.put(true,(TextView) getChildAt(currentPage));
}创建textView的方法
public TextView generateTextView(String text){
TextView textView=new TextView(getContext());
LinearLayout.LayoutParams layoutParams=new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
layoutParams.width=mWidth;
textView.setText(text);
textView.setTextColor(tabColor);
textView.setGravity(Gravity.CENTER);
textView.setLayoutParams(layoutParams);
return textView;
}最后呢可以添加一些回调的方法来把viewpage的监听数据传给下一级。
interface OnIndicatorChangeListener{
public abstract void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
public abstract void onPageSelected(int position);
public abstract void onPageScrollStateChanged(int state);
}
public void addIndicatorChangeListener(OnIndicatorChangeListener mIndicatorListener){
this.mIndicatorListener=mIndicatorListener;
}代码已上传
地址