滑动变色指示器
仿今日头条滑动指示器变色
先上图,没图说个毛线
这篇先再来回顾一下自定义View的套路:
1、分析效果;
2、确定自定义属性,编写attrs.xml
3、在布局中使用
4、在自定义View中获取自定义属性
5、onMeasure()(如果继承自系统控件,一般情况不需要重写此方法)
6、onDrow画文字
7、其他
1、分析效果:
1、从上图我们可以看出这个效果分为两个部分,上面是我们所需要自定义的控件。只是需要把ViewPager所滑动的距离传递给我们自定义控件
2、自定义控件部分有两种思路可以实现,一种是先把黑色字体画出来,然后通过红色字体覆盖实现,另外一种是两把一块画布裁剪成两块,左边画黑色字体,右边画红色字体实现。两种方式大同小异。只是实现思路不同而已。
2、确定自定义属性,编写attrs.xml
1、我们使用到的无非就是两种颜色而已,一种是默认字体颜色,一种是滑动变色字体的颜色。
<declare-styleable name="SlideTextView">
<attr name="originColor" format="color"/>
<attr name="changeColor" format="color"/>
</declare-styleable>
3、在布局中使用
这里只是一个简单的使用,我们后边为了通过性,会做一定的修改
<com.wn.view02.SlideTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:changeColor="#f00"
app:originColor="#020202"/>
4、在自定义View中获取自定义属性
这里我们只需要继承自TextView即可,因为不用重写onMeasure()方法。但是onDrow方法是需要重新写的。因为默认的TextView只能是一种字体颜色。
private void initPaint(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SlideTextView);
int originColor = array.getColor(R.styleable.SlideTextView_originColor,getTextColors()
.getDefaultColor());
int changeColor = array.getColor(R.styleable.SlideTextView_changeColor,getTextColors()
.getDefaultColor());
originColorPaint = getPaintByColor(originColor);
changeColorPaint = getPaintByColor(changeColor);
array.recycle();
}
5、onDrow画文字
分析:
1、拆分画布,画布的一般为红色,另一半为黑色。我们需要通过手指滑动的距离的百分比,来动态修改红色画布的的范围。
2、确定ViewPager移动的方向,通过方向来动态修改画布的范围。
3、并且需要把ViewPager滑动范围的百分比,传递给自定义控件
@Override
protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);
// 根据进度把中间值算出来
int middle = (int) (mCurrentProgress * getWidth());
//
if(mDirection == Direction.LEFT_TO_RIGHT){
drawText(canvas ,changeColorPaint,0, middle);
drawText(canvas ,originColorPaint,middle, getWidth());
}else{
// 右边是红色左边是黑色
drawText(canvas, changeColorPaint, getWidth()-middle, getWidth());
// 绘制变色
drawText(canvas, originColorPaint, 0, getWidth()-middle);
}
}
private void drawText(Canvas canvas,Paint paint,int start,int end) {
// 裁剪画布
canvas.save();
Rect rect = new Rect(start,0,end,getHeight());
canvas.clipRect(rect);
Rect bounds = new Rect();
String text = getText().toString();
paint.getTextBounds(text, 0, text.length(), bounds);
int x = getWidth()/2 - bounds.width()/2;
canvas.drawText(getText().toString(),x,getBaseline(),paint);
canvas.restore();
}
private Paint getPaintByColor(int color) {
Paint paint = new Paint();
// 设置抗锯齿
paint.setAntiAlias(true);
// 防抖动
paint.setDither(true);
paint.setColor(color);
paint.setTextSize(getTextSize());
return paint;
}
6、其他
动态设置滑动方向以及滑动范围的百分比
public void setDirection(Direction direction){
this.mDirection = direction;
}
public void setCurrentProgress(float currentProgress){
this.mCurrentProgress = currentProgress;
invalidate();
}
public void setChangeColor(int changeColor) {
this.changeColorPaint.setColor(changeColor);
}
public void setOriginColor(int originColor) {
this.originColorPaint.setColor(originColor);
}
终极使用
1、 初始化ViewPager,动态设置滑动距离以及百分比
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.e("TAG","position -> "+position +" positionOffset -> "+positionOffset);
// position 代表当前的位置
// positionOffset 代表滚动的 0 - 1 百分比
// 1.左边 位置 position
ColorTrackTextView left = mIndicators.get(position);
left.setDirection(ColorTrackTextView.Direction.RIGHT_TO_LEFT);
left.setCurrentProgress(1-positionOffset);
try {
ColorTrackTextView right = mIndicators.get(position + 1);
right.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT);
right.setCurrentProgress(positionOffset);
}catch (Exception e){
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
2、为了使用更加灵活,这里也动态添加了Tab的个数
private void initIndicator() {
for (int i = 0; i < items.length; i++) {
// 动态添加颜色跟踪的TextView
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.weight = 1;
ColorTrackTextView colorTrackTextView = new ColorTrackTextView(this);
// 设置颜色
colorTrackTextView.setTextSize(20);
colorTrackTextView.setChangeColor(Color.RED);
colorTrackTextView.setText(items[i]);
colorTrackTextView.setLayoutParams(params);
// 把新的加入LinearLayout容器
mIndicatorContainer.addView(colorTrackTextView);
// 加入集合
mIndicators.add(colorTrackTextView);
}
}