歌词字级同步——ProgressText

天天动听里的歌词是字级同步的,在Android中如何实现呢?首先它的字有一层不同颜色的描边,另一方面随着时间推进一种颜色会逐渐代替另一种颜色。

对于第一个问题把 TextView 中的 Paint 改成 getPaint().setStyle(Paint.Style.FILL_AND_STROKE) 是没有用的,因为使用的是和字体相同的颜色来描边。所以这里采用了一个笨办法,真是笨办法,但比用阴影、设置一大一小叠字要好:-)

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    setTextColor(strokeColor);
    getPaint().setStrokeWidth(strokeWidth);
    getPaint().setStyle(Paint.Style.STROKE);
    super.onDraw(canvas);
}

先把字画出来,然后用不同的颜色描下边就可以了。

对于第二个问题要使用到 BitmapShader ,它继承自 Shader,文档里这样描述的:

A subclass of Shader is installed in a Paint calling paint.setShader(shader). After that any object (other than a bitmap) that is drawn with that paint will get its color(s) from the shader.

Paint 绑定 Shader 后,用它画出来的东西颜色都是从 Shader 中来取,Shader 的大小可能比所要画的物体要小,就如铺地板一样,地板总比地面要小,所以 Shader 中引入三种铺砖模式:

  1. CLAMP——用Shader边上的颜色来画超出的范围,原地板是[l,M,r],铺出来是…[l][l][l,M,r][r][r]…
  2. REPEAT——按正常情况下重复,原地板是[L,R],铺出来是[L,R][L,R][L,R]…
  3. MIRROR——边镜像边重复,原地板是[L,R],铺出来是[L,R][R,L][L,R]…

这里设置一个2个像素的BitmapShader,左边和右边像素颜色不一样,设置x方向的铺砖模式为CLAMP,y方向的铺砖模式为REPEAT,然后移动 Shader ,移动可以通过设置 Matrix 实现:

shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, 
                                  Shader.TileMode.REPEAT);
matrix.setTranslate(pixels, 0);//左右移动pixels
shader.setLocalMatrix(matrix);

最后在先画 Shader,然后去掉 Shader 给字描边:

@Override
protected void onDraw(Canvas canvas) {
    getPaint().setStyle(Paint.Style.FILL);
    getPaint().setShader(shader);
    super.onDraw(canvas);

    getPaint().setShader(null);
    setTextColor(strokeColor);
    getPaint().setStrokeWidth(strokeWidth);
    getPaint().setStyle(Paint.Style.STROKE);
    super.onDraw(canvas);
}

具体实现见https://github.com/withparadox2/ProgressText,首先添加dependencies。
在Layout里声明:

在头部添加:xmlns:custom="http://schemas.android.com/apk/res-auto"
<com.withparadox2.progresstext.ProgressText
    android:id="@+id/progress_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="50sp"
    custom:after_progress_color="@android:color/holo_purple"
    custom:before_progress_color="#FFFF00"
    custom:stroke_color="@android:color/black"
    custom:stroke_width="1px"/>

然后就可以设置进度了:

textView = (ProgressText) findViewById(R.id.progress_text);
textView.setText("绿岛小夜曲");
textView.setProgressBypercentage(0.68f);
//textView.setProgressBypixels(150);

效果如下:



发表评论