Android实现歌词渐变色和进度的效果

概述要用TextView使用渐变色，那我们就必须要了解LinearGradient（线性渐变）的用法。

要用TextVIEw使用渐变色，那我们就必须要了解linearGradIEnt（线性渐变）的用法。

linearGradIEnt的参数解释

linearGradIEnt也称作线性渲染，linearGradIEnt的作用是实现某一区域内颜色的线性渐变效果，看源码你就知道他是shader的子类。

它有两个构造函数

public linearGradIEnt(float x0,float y0,float x1,float y1,int color0,int color1,Shader.TileMode tile)public linearGradIEnt (float x0,int[] colors,float[] positions,Shader.TileMode tile);

其中，参数x0表示渐变的起始点x坐标；参数y0表示渐变的起始点y坐标；参数x1表示渐变的终点x坐标；参数y1表示渐变的终点y坐标　；color0表示渐变开始颜色；color1表示渐变结束颜色；参数tile表示平铺方式。

Shader.TileMode有3种参数可供选择，分别为CLAMP、REPEAT和MIRROR：

CLAMP的作用是如果渲染器超出原始边界范围，则会复制边缘颜色对超出范围的区域进行着色

REPEAT的作用是在横向和纵向上以平铺的形式重复渲染位图

MIRROR的作用是在横向和纵向上以镜像的方式重复渲染位图

linearGradIEnt的简单使用

先实现文字效果的水平渐变：

Shader shader_horizontal= new linearGradIEnt(btWIDth/4,btWIDth,color.RED,color.GREEN,Shader.TileMode.CLAMP);tv_text_horizontal.getPaint().setShader(shader_horizontal);

 

再实现文字的垂直渐变效果：

Shader shader_vertical=new linearGradIEnt(0,btHeight/4,btHeight,Shader.TileMode.CLAMP);tv_text_vertical.getPaint().setShader(shader_vertical);

 

接下来来实现文字的颜色动态渐变效果：

import androID.content.Context;import androID.graphics.Canvas;import androID.graphics.linearGradIEnt;import androID.graphics.Matrix;import androID.graphics.Paint;import androID.graphics.Shader;import androID.util.AttributeSet;import androID.Widget.TextVIEw;/*** Created on 2016/3/13.*/public class GradIEntHorizontalTextVIEw extends TextVIEw {private linearGradIEnt mlinearGradIEnt;private Matrix mGradIEntMatrix;//渐变矩阵private Paint mPaint;//画笔private int mVIEwWIDth = 0;//textVIEw的宽private int mTranslate = 0;//平移量private boolean mAnimating = true;//是否动画private int delta = 15;//移动增量public GradIEntHorizontalTextVIEw(Context ctx){this(ctx,null);}public GradIEntHorizontalTextVIEw(Context context,AttributeSet attrs) {super(context,attrs);}@OverrIDeprotected voID onSizeChanged(int w,int h,int olDW,int oldh) {super.onSizeChanged(w,h,olDW,oldh);if (mVIEwWIDth == 0) {mVIEwWIDth = getMeasureDWIDth();if (mVIEwWIDth > 0) {mPaint = getPaint();String text = getText().toString();int size;if(text.length()>0){size = mVIEwWIDth*2/text.length();}else{size = mVIEwWIDth;}mlinearGradIEnt = new linearGradIEnt(-size,new int[] { 0x33ffffff,0xffffffff,0x33ffffff },new float[] { 0,0.5f,1 },Shader.TileMode.CLAMP); //边缘融合mPaint.setShader(mlinearGradIEnt);//设置渐变mGradIEntMatrix = new Matrix();}}}@OverrIDeprotected voID onDraw(Canvas canvas) {super.onDraw(canvas);if (mAnimating && mGradIEntMatrix != null) {float mTextWIDth = getPaint().measureText(getText().toString());//获得文字宽mTranslate += delta;//默认向右移动if (mTranslate > mTextWIDth+1 || mTranslate<1) {delta = -delta;//向左移动}mGradIEntMatrix.setTranslate(mTranslate,0);mlinearGradIEnt.setLocalMatrix(mGradIEntMatrix);postInvalIDateDelayed(30);//刷新}}}

实现歌词进度效果

Canvas 作为绘制文本时，使用FontMetrics对象，计算位置的坐标。它的思路和java.awt.FontMetrics的基本相同。
FontMetrics对象它以四个基本坐标为基准，分别为：

FontMetrics.top
FontMetrics.ascent
FontMetrics.descent
FontMetrics.bottom

// FontMetrics对象FontMetrics FontMetrics = textPaint.getFontMetrics(); String text = "abcdefghijklmnopqrstu"; // 计算每一个坐标float baseX = 0; float baseY = 100; float topY = baseY + FontMetrics.top; float ascentY = baseY + FontMetrics.ascent; float descentY = baseY + FontMetrics.descent; float bottomY = baseY + FontMetrics.bottom; 

下面是具体实现代码：

import androID.content.Context;import androID.graphics.Bitmap;import androID.graphics.Canvas;import androID.graphics.color;import androID.graphics.Paint;import androID.graphics.PorterDuff;import androID.graphics.PorterDuffXfermode;import androID.graphics.RectF;import androID.util.AttributeSet;import androID.vIEw.VIEw;/*** Created on 2016/3/13.*/public class SongTextVIEw extends VIEw {private int postIndex;private Paint mPaint;private int delta = 15;private float mTextHeight;private float mTextWIDth;private String mText="梦 里 面 看 我 七 十 二 变";private PorterDuffXfermode xformode;public SongTextVIEw(Context ctx){this(ctx,null);}public SongTextVIEw(Context context,AttributeSet attrs) {this(context,attrs,0);}public SongTextVIEw(Context context,AttributeSet attrs,int defStyleAttr) {super(context,defStyleAttr);init();}public voID init(){mPaint = new Paint(Paint.ANTI_AliAS_FLAG);xformode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);mPaint.setcolor(color.CYAN);mPaint.setTextSize(60.0f);mPaint.setStyle(Paint.Style.FILL_AND_stroke);mPaint.setXfermode(null);mPaint.setTextAlign(Paint.Align.left);//文字精确高度Paint.FontMetrics FontMetrics = mPaint.getFontMetrics();mTextHeight = FontMetrics.bottom-FontMetrics.descent-FontMetrics.ascent;mTextWIDth = mPaint.measureText(mText);}/***计算 控件的宽高*/@OverrIDeprotected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) {final int mWIDth;final int mHeight;/*** 设置宽度*/int wIDthMode = MeasureSpec.getMode(wIDthMeasureSpec);int wIDthSize = MeasureSpec.getSize(wIDthMeasureSpec);if (wIDthMode == MeasureSpec.EXACTLY)// match_parent,accuratemWIDth = wIDthSize;else{// 由图片决定的宽int desireByimg = getpaddingleft() + getpaddingRight()+ getMeasureDWIDth();if (wIDthMode == MeasureSpec.AT_MOST)// wrap_contentmWIDth = Math.min(desireByimg,wIDthSize);elsemWIDth = desireByimg;}/**** 设置高度*/int heightmode = MeasureSpec.getMode(heightmeasureSpec);int heightSize = MeasureSpec.getSize(heightmeasureSpec);if (heightmode == MeasureSpec.EXACTLY)// match_parent,accuratemHeight = heightSize;else{int desire = getpaddingtop() + getpaddingBottom()+ getMeasuredHeight();if (heightmode == MeasureSpec.AT_MOST)// wrap_contentmHeight = Math.min(desire,heightSize);elsemHeight = desire;}setMeasuredDimension( mWIDth,mHeight);}@OverrIDeprotected voID onDraw(Canvas canvas) {super.onDraw(canvas);Bitmap srcBitmap = Bitmap.createBitmap(getMeasureDWIDth(),getMeasuredHeight(),Bitmap.Config.ARGB_8888);Canvas srcCanvas = new Canvas(srcBitmap);srcCanvas.drawText(mText,mTextHeight,mPaint);mPaint.setXfermode(xformode);mPaint.setcolor(color.RED);RectF rectF = new RectF(0,postIndex,getMeasuredHeight());srcCanvas.drawRect(rectF,mPaint);canvas.drawBitmap(srcBitmap,null);init();if(postIndex<mTextWIDth){postIndex+=10;}else{postIndex=0;}postInvalIDateDelayed(30);}}

Progressbar实现歌词播放效果

然后接下来的这种歌词播放进度效果是2张图片实现的，忘记是哪个那里看来的，压根以前也没有想过还可以这么样的实现。
只需要准备2张图即可：

<@R_524_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID"><itemandroID:ID="@androID:ID/background"androID:drawable="@drawable/normal" /><itemandroID:ID="@androID:ID/progress"androID:drawable="@drawable/grandIEnt" /></@R_524_3419@>

看见没就是2张图片，一张作为背景图一张作为进度图，是不是感觉很神奇，然后放入Progressbar

<ProgressbarandroID:ID="@+ID/pb1"androID:layout_wIDth="300dp"androID:layout_height="40dp"androID:max="100"androID:maxHeight="2dp"androID:minHeight="2dp"androID:progress="20"androID:progressDrawable="@drawable/m_progress_horizontal"androID:secondaryProgress="30"androID:visibility="gone"/>

再加上代码动态改变progress就能实现进度的变化了：

Progressbar pb1= (Progressbar) findVIEwByID(R.ID.pb1);//设置滚动条可见setProgressbarIndeterminateVisibility(true);progress=pb1.getProgress();//获取初始进度timer=new Timer();task=new TimerTask() {@OverrIDepublic voID run() {progress+=10;if(progress>100){progress=0;}handler.sendEmptyMessage(0);}};timer.schedule(task,1000,300);

实现及进度的改变：

Handler handler=new Handler(){@OverrIDepublic voID handleMessage(Message msg) {super.handleMessage(msg);pb1.setProgress(progress);}};@OverrIDeprotected voID onDestroy() {super.onDestroy();timer=null;task=null;handler.removeCallbacksAndMessages(null);}

效果也是不错的：

能力有限，感觉写一篇博客要弄好久，网速卡的一笔，就写到这了，其实项目里面也没有用到，休息2天了也写点东西，就觉得还是要学一点东西作为备用知识。

以上内容是小编给大家介绍的AndroID实现歌词渐变色和进度的效果，希望对大家有所帮助！

总结

以上是内存溢出为你收集整理的Android实现歌词渐变色和进度的效果全部内容，希望文章能够帮你解决Android实现歌词渐变色和进度的效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。