今天做的是一個簡單支持文字部分漸變效果的控件,還是先放上成果：
loading
tab
如上圖牧氮，這個控件可以做特殊的loading動畫郭赐，比如下載更振、上傳、等斯嚎，也可以用在viewpager切換時的tab利虫，實現(xiàn)文字部分變色等。
-
實現(xiàn)原理：
拿到文字堡僻，先把它渲染在畫布上糠惫，作為底色
然后對畫布進行矩形裁剪clipRect()，paint換一種顏色钉疫，再把文字繪制一遍硼讽，即可
-
裁剪的尺寸是根據(jù)外部傳入的progress、漸變方向牲阁、以及文字的寬高確定
-
先鋪代碼：
-
attrs.xml 比較簡單固阁，定義兩種對比的顏色、文字大小和文字內(nèi)容 :
<declare-styleable name="ShadeTextView">
<attr name="text" format="string"/>
<attr name="firstColor" format="color"/>
<attr name="secondColor" format="color"/>
<attr name="textSize" format="dimension"/>
</declare-styleable>
- 寫一個view的子類城菊，（其實繼承TextView更方便一點）
全局變量
private int mDirection ; //漸變的方向
public static final int DIRECTION_LEFT = 0;
public static final int DIRECTION_RIGHT = 1;
public static final int DIRECTION_TOP = 2;
public static final int DIRECTION_BOTTOM = 3;
public void setDirection(int direction) {
mDirection = direction;
postInvalidate();
}
private Paint mPaint;
private String mText;//顯示的文字
private int mTextSize;//文字大小
private float mProgress;//漸變位置
private int mFirstColor;//base文字顏色
private int mSecondColor;//變化的文字顏色
public void setmProgress(float mProgress) {
this.mProgress = mProgress;
postInvalidate();
}
構(gòu)造器,我的千篇一律的寫法~~
public ShadeTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ShadeTextView, 0, defStyleAttr);
for (int i = 0; i < typedArray.length(); i++) {
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.ShadeTextView_text:
mText = typedArray.getString(attr);
break;
case R.styleable.ShadeTextView_firstColor:
mFirstColor = typedArray.getColor(attr, Color.BLACK);
break;
case R.styleable.ShadeTextView_secondColor:
mSecondColor = typedArray.getColor(attr, Color.BLUE);
break;
case R.styleable.ShadeTextView_textSize:
mTextSize = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;
/*case R.styleable.ShadeTextView_progress:
mProgress = typedArray.getInteger(attr, 30);
break;*/
}
}
typedArray.recycle();
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setTextSize(mTextSize);
}
onMeasure()的處理,如果繼承TextView的話可以省略很多代碼备燃。。凌唬。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int specMode = MeasureSpec.getMode(widthMeasureSpec);
int specSize = MeasureSpec.getSize(widthMeasureSpec);
int width = 0, height = 0;
switch (specMode) {
case MeasureSpec.EXACTLY:
width = specSize + getPaddingRight() + getPaddingLeft();
break;
case MeasureSpec.AT_MOST:
width = (int) (mPaint.measureText(mText) + getPaddingLeft() + getPaddingRight());//先確定mPaint是否已經(jīng)設置textsize
break;
}
specMode = MeasureSpec.getMode(heightMeasureSpec);
specSize = MeasureSpec.getSize(heightMeasureSpec);
switch (specMode) {
case MeasureSpec.EXACTLY:
height = specSize + getPaddingTop() + getPaddingBottom();
break;
case MeasureSpec.AT_MOST:
height = (int) (Math.abs(mPaint.getFontMetrics().bottom - mPaint.getFontMetrics().top) + getPaddingTop() + getPaddingBottom());
break;
}
setMeasuredDimension(width, height);
}
重頭戲 onDraw()赚爵，本篇的思想精華所在。
@Override
protected void onDraw(Canvas canvas) {
float textWidth = mPaint.measureText(mText);
float mLeft = (getMeasuredWidth() - textWidth) / 2;
float textHeight = Math.abs(mPaint.getFontMetrics().bottom - mPaint.getFontMetrics().top);
float mTop = (getMeasuredHeight() - textHeight) /2 ;
//先畫底層的文字
mPaint.setColor(mFirstColor);
canvas.drawText(mText, mLeft, getY(), mPaint);
mPaint.setColor(mSecondColor);
// 接著根據(jù)傳入的漸變方向、顏色等來裁剪冀膝，接著在同樣的位置重新渲染文字
if (mDirection == DIRECTION_LEFT) {
canvas.save(Canvas.CLIP_SAVE_FLAG);
canvas.clipRect(mLeft, 0, textWidth * mProgress + mLeft, getMeasuredHeight());
canvas.drawText(mText, mLeft, getY(), mPaint);
canvas.restore();
} else if (mDirection == DIRECTION_RIGHT){
canvas.save(Canvas.CLIP_SAVE_FLAG);
canvas.clipRect(textWidth - textWidth * mProgress + mLeft , 0 , textWidth + mLeft, getMeasuredHeight());
canvas.drawText(mText, + mLeft, getY(), mPaint);
canvas.restore();
} else if (mDirection == DIRECTION_TOP){
canvas.save(Canvas.CLIP_SAVE_FLAG);
canvas.clipRect(0, mTop , getWidth(), textHeight * mProgress + mTop);
canvas.drawText(mText, + mLeft, getY(), mPaint);
canvas.restore();
}else if (mDirection == DIRECTION_BOTTOM){
canvas.save(Canvas.CLIP_SAVE_FLAG);
canvas.clipRect(0, textHeight - textHeight * mProgress + mTop, getWidth(), textHeight + mTop );
canvas.drawText(mText, + mLeft, getY(), mPaint);
canvas.restore();
}
}
public float getY() {
Paint.FontMetricsInt fm = mPaint.getFontMetricsInt();
return (getHeight() + fm.descent - fm.ascent) / 2 - fm.descent;
}
值得說明的是，
float textHeight = Math.abs(mPaint.getFontMetrics().bottom - mPaint.getFontMetrics().top);
return (getHeight() + fm.descent - fm.ascent) / 2 - fm.descent;
這里借鑒了Android 自定義View-怎么繪制居中文本霎挟？的研究成果窝剖，怒學。
-
View基本寫完酥夭，可以先測試了赐纱，先用seekbar測試四個方向的漸變效果，代碼比較簡單熬北，只貼一段根據(jù)seekbar的progress值設置我們自定義View的漸變方向和漸變位置的代碼：
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
shadeTextView.setDirection(ShadeTextView.DIRECTION_TOP);
shadeTextView.setmProgress(progress * 1.0f / 100);
}
運行測試疙描，基本OK
運用到viewpager中的代碼也比較簡單，只貼核心調(diào)用部分讶隐，其他大家都很熟悉了起胰。
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (positionOffset > 0){
ShadeTextView left = shadeTextViews.get(position);
ShadeTextView right = shadeTextViews.get(position + 1);
left.setDirection(1);
right.setDirection(0);
left.setmProgress(1-positionOffset);
right.setmProgress(positionOffset);
}
}
然后效果就是文首的viewpager切換效果了。
