Android仿今日头条文字渐变效果

共 8483字,需浏览 17分钟

 ·

2021-09-12 12:29

概述

本文主要分享仿今日头条文字渐变效果,效果图如下:


实现要点:
  • 绘制水平垂直居中的文本

  • 采用画布裁剪实现渐变效果


绘制水平垂直居中的文本


文本水平居中


文本水平居中有两种方式:
  • 调用Paint的setTextAlign(Paint.Align.CENTER)方法

  • 控件宽度 / 2 - 文字宽度 / 2计算文本的x轴坐标


文本垂直居中


文本垂直居中重点在于计算基准线,大致过程如下:
  • 获取View的中心位置

  • 中心位置下移半个字体的高度

  • 上移descent,达到文字的最终位置即BaseLine的位置


代码实现如下:

  Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();  float baseLine = (getHeight() + fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent;


为了方便理解,baseLine的计算,可参考下图:


画布裁剪实现渐变效果


文字渐变主要是通过画布裁剪实现的,裁剪渐变部分与不变部分再进行叠加,从而达到渐变的效果,这种实现方式有一个好处是防止过度绘制。

关键代码如下:
//渐变部分 private void drawGradientText(Canvas canvas) {        //保存当前画布        canvas.save();        //文字水平居中方案二:x = getWidth() / 2 - 文字宽度 / 2        float textWidth = mTextPaint.measureText(mText, 0, mText.length());        float x = (getWidth() - textWidth) / 2;
//文字垂直居中:BaseLine的计算 = getHeight() / 2 + 文字高度 / 2 - descent
Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics(); float textHeight = fontMetrics.descent - fontMetrics.ascent; float y = (getHeight() + textHeight) / 2 - fontMetrics.descent;
mTextPaint.setColor(Color.RED);
//先裁剪渐变区域文字要显示的区域 float right = x + textWidth * mPercent; canvas.clipRect(x, 0, right, getHeight());
//裁剪完成后再绘制文字 canvas.drawText(mText, x, y, mTextPaint);
//恢复画布 canvas.restore(); } //不变部分 private void drawNormalText(Canvas canvas) { canvas.save(); float textWidth = mTextPaint.measureText(mText, 0, mText.length()); float x = (getWidth() - textWidth) / 2;
Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics(); float textHeight = fontMetrics.descent - fontMetrics.ascent; float y = (getHeight() + textHeight) / 2 - fontMetrics.descent;
mTextPaint.setColor(Color.BLACK);
//对不变区域文字进行裁剪,防止过度绘制(这个很重要) float left = x + textWidth * mPercent; canvas.clipRect(left, 0, x + textWidth, getHeight());
canvas.drawText(mText, x, y, mTextPaint);
canvas.restore(); }


仿今日头条文字渐变效果实现思路


知道了文本绘制居中与画布裁剪后,实现仿今日头条文字渐变效果就很简单了,大致思路是通过监听ViewPager的滚动获取滚动的百分比,再通过滚动百分比计算出渐变区域与不变区域并分别进行裁剪,最后通过图层叠效果就出来了。

渐变控件关键代码:
public class ColorChangeTextView extends AppCompatTextView {
private int mTextSize = sp2px(30); private int mTextColor = Color.BLACK; private int mTextColorChange = Color.RED;
private TextPaint mTextPaint;
private int mDirection = LEFT;//文件渐变方向
protected static final int LEFT = 0; protected static final int RIGHT = 1; @IntDef(value = {LEFT, RIGHT}) @Retention(RetentionPolicy.SOURCE) public @interface Direction { }
private float mProgress;//文字渐变的进度
public float getProgress() { return mProgress; }
public void setProgress(float mProgress) { this.mProgress = mProgress; invalidate(); }
public void setDirection(@Direction int direction) { this.mDirection = direction; }
public ColorChangeTextView(Context context) { this(context, null); }
public ColorChangeTextView(Context context, AttributeSet attrs) { this(context, attrs, 0); }
public ColorChangeTextView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initAttr(context, attrs); init(); }
private void initAttr(final Context context, @Nullable final AttributeSet attrs) { TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ColorChangeTextView); mTextSize = ta.getDimensionPixelSize( R.styleable.ColorChangeTextView_text_size, mTextSize); mTextColor = ta.getColor( R.styleable.ColorChangeTextView_text_color, mTextColor); mTextColorChange = ta.getColor( R.styleable.ColorChangeTextView_text_color_change, mTextColorChange); mProgress = ta.getFloat(R.styleable.ColorChangeTextView_progress, 0);
ta.recycle(); }
private void init() { mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG); mTextPaint.setColor(mTextColor); mTextPaint.setTextSize(mTextSize); }
@Override protected void onDraw(Canvas canvas) { switch (mDirection){ case LEFT: drawLeft(canvas); break; case RIGHT: drawRight(canvas); break; } }
private void drawLeft(Canvas canvas){ //绘制底部不变部分 canvas.save();
String text = getText().toString(); float textWidth = mTextPaint.measureText(text); Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics(); float textHeight = fontMetrics.descent - fontMetrics.ascent;
float x = (getWidth() - textWidth) / 2; float baseLine = (getHeight() + textHeight) / 2 - fontMetrics.descent;
float left = x + textWidth * mProgress; canvas.clipRect(left,0,x + textWidth,getHeight()); mTextPaint.setColor(mTextColor); canvas.drawText(text,x,baseLine,mTextPaint);
canvas.restore();
//绘制顶部渐变部分 canvas.save();
float right = x + textWidth * mProgress; canvas.clipRect(x,0,right,getHeight()); mTextPaint.setColor(mTextColorChange); canvas.drawText(text,x,baseLine,mTextPaint);
canvas.restore(); }
private void drawRight(Canvas canvas) {
//绘制顶部渐变部分 canvas.save();
String text = getText().toString(); float textWidth = mTextPaint.measureText(text); Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics(); float textHeight = fontMetrics.descent - fontMetrics.ascent; float baseLine = (getHeight() + textHeight) / 2 - fontMetrics.descent; float x = (getWidth() - textWidth) / 2;
float left = x + textWidth * (1 - mProgress); float right = x + textWidth; canvas.clipRect(left,0,right,getHeight()); mTextPaint.setColor(mTextColorChange); canvas.drawText(text,x,baseLine,mTextPaint);
canvas.restore();
//绘制底部不变部分 canvas.save();
right = x + textWidth * (1 - mProgress); canvas.clipRect(0,0,right,getHeight()); mTextPaint.setColor(mTextColor); canvas.drawText(text,x,baseLine,mTextPaint);
canvas.restore(); }
static int sp2px(float sp) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, Resources.getSystem().getDisplayMetrics()); }}


ViewPager滚动的关键代码:
 mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                if(positionOffset > 0){                    ColorChangeTextView left = mTabs.get(position);                    ColorChangeTextView right = mTabs.get(position + 1);
left.setDirection(ColorChangeTextView.RIGHT); right.setDirection(ColorChangeTextView.LEFT);
left.setProgress(1- positionOffset); right.setProgress(positionOffset); } } });


需要源码的童鞋公众号回复:"TextDraw"即可获取哦.


到这里就结束啦。
浏览 28
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报