1. 实现效果:
大体上的效果如上,因为是项目中的一部分,所以只截取了部分。
2. 思路
其实最开始,我是想通过动态的移动一个控件去实现的,但是试了试scrollBy和scrollTo好像没什么卵用,我就忧伤了,这尼玛怎么实现?
因为开始就没有想过用动画去实现移动,而且用动画实现的效果网上有现成的代码了,所以再写没什么意思啊。
我有篇文章专门谈到过关于OnPageChangeListener中的几个方法,各有什么用,大家可以移步去看看。其实今天这个东西没什么很玄的东西,自己想通了之后就觉得这也太简单了,如果我写篇博客,在技术大牛们面前估计毛线都不值一提啊,但是我还是想写。。。
好了,啰嗦了那么多,其实最后我的实现方式就是通过自定义View来实现的,代码很简单。
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class RedCursorView extends View {
private int cursorColor = Color.RED; // 线的颜色
private int counts = 2; // 被分成了几块
private float posX = 0f; // 当前X坐标的位置
private Paint paint;
public RedCursorView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public RedCursorView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public RedCursorView(Context context) {
super(context);
init();
}
private void init() {
// 初始化画笔
paint = new Paint();
paint.setAntiAlias(true);
paint.setDither(true);
paint.setColor(cursorColor);
}
/**
* 设置ViewPager有几块
* @param counts
*/
public void setCounts(int counts) {
this.counts = counts;
}
/**
* 设置坐标
* @param pos 当前的item
* @param rate 变化率
*/
public void setXY(int pos, float rate) {
int single = getMeasuredWidth() / counts;
posX = pos * single + single * rate;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setStrokeWidth(getMeasuredHeight());
int width = getMeasuredWidth() / counts - 2;
canvas.drawLine(posX, 0, posX + width, 0, paint);
}
}
一看就懂,调用的时候只用调用:
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
cursor.setXY(position, positionOffset);
}