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

最新推荐文章于 2024-07-15 16:46:51 发布

山楂树之恋

最新推荐文章于 2024-07-15 16:46:51 发布

阅读量2k

点赞数 1

分类专栏： android 界面特效

android 界面特效专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

http://blog.csdn.net/u013278099/article/details/50881431

标签：机器人

2016年3月14日00:03 1634阅读人评论（4）收藏举报

分类：

机器人（71）

目录（？）[+]

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

的LinearGradient的参数解释

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

它有两个构造函数

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">LinearGradient</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> x0, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> y0, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> x1, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> y1, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> color0, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> color1, Shader.TileMode tile)<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">LinearGradient</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> x0, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> y0, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> x1, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> y1, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>[] colors, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span>[] positions, Shader.TileMode tile);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li></ul>

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

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

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

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

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

的LinearGradient的简单使用

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

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Shader shader_horizontal= new LinearGradient(btWidth/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, btWidth, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.RED</span>, Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.GREEN</span>, Shader<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.TileMode</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.CLAMP</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
                tv_text_horizontal<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getPaint</span>()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setShader</span>(shader_horizontal)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li></ul>

这里写图片描述
再实现文字的垂直渐变效果：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Shader shader_vertical=new LinearGradient(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, btHeight/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, btHeight, Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.RED</span>, Color<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.GREEN</span>, Shader<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.TileMode</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.CLAMP</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
                tv_text_vertical<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getPaint</span>()<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setShader</span>(shader_vertical)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li></ul>

这里写图片描述
接下来来实现文字的颜色动态渐变效果：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.content.Context;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Canvas;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.LinearGradient;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Matrix;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Paint;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Shader;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.util.AttributeSet;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.TextView;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
 * Created on 2016/3/13.
 */</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">GradientHorizontalTextView</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">TextView</span> {</span><span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> LinearGradient mLinearGradient;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Matrix mGradientMatrix;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//渐变矩阵</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Paint mPaint;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//画笔</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mViewWidth = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//textView的宽</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mTranslate = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//平移量</span><span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> mAnimating = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//是否动画</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> delta = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//移动增量</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">GradientHorizontalTextView</span>(Context ctx)<span style="box-sizing: border-box;"></span>
    {<span style="box-sizing: border-box;"></span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>(ctx,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">GradientHorizontalTextView</span>(Context context, AttributeSet attrs) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(context, attrs);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onSizeChanged</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> w, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> h, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> oldw, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> oldh) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onSizeChanged(w, h, oldw, oldh);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (mViewWidth == <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) {<span style="box-sizing: border-box;"></span>
            mViewWidth = getMeasuredWidth();<span style="box-sizing: border-box;"></span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (mViewWidth > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) {<span style="box-sizing: border-box;"></span>
                mPaint = getPaint();<span style="box-sizing: border-box;"></span>
                String text = getText().toString();<span style="box-sizing: border-box;"></span>
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> size;
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(text.length()><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>)<span style="box-sizing: border-box;"></span>
                {<span style="box-sizing: border-box;"></span>
                    size = mViewWidth*<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>/text.length();<span style="box-sizing: border-box;"></span>
                }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{<span style="box-sizing: border-box;"></span>
                    size = mViewWidth;<span style="box-sizing: border-box;"></span>
                }<span style="box-sizing: border-box;"></span>
                mLinearGradient = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LinearGradient(-size, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>[] { <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0x33ffffff</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0xffffffff</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0x33ffffff</span> },
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span>[] { <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>f, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> }, Shader.TileMode.CLAMP); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//边缘融合</span>
                mPaint.setShader(mLinearGradient);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置渐变</span>
                mGradientMatrix = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Matrix();<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        }<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onDraw</span>(Canvas canvas) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onDraw(canvas);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (mAnimating && mGradientMatrix != <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>) {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> mTextWidth = getPaint().measureText(getText().toString());<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获得文字宽</span>
            mTranslate += delta;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//默认向右移动</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (mTranslate > mTextWidth+<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> || mTranslate<<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>) {<span style="box-sizing: border-box;"></span>
                delta  = -delta;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//向左移动</span><span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
            mGradientMatrix.setTranslate(mTranslate, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span style="box-sizing: border-box;"></span>
            mLinearGradient.setLocalMatrix(mGradientMatrix);<span style="box-sizing: border-box;"></span>
            postInvalidateDelayed(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//刷新</span><span style="box-sizing: border-box;"></span>
        }<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
}<span style="box-sizing: border-box;"></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">58</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">59</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">60</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">61</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">62</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">63</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">64</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">65</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">66</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">67</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">68</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">69</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">70</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">71</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">58</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">59</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">60</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">61</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">62</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">63</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">64</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">65</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">66</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">67</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">68</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">69</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">70</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">71</span></li></ul>

这里写图片描述

实现歌词进度效果

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

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

这里写图片描述

<code class="hljs mel has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// FontMetrics对象</span><span style="box-sizing: border-box;"></span>
  FontMetrics fontMetrics = textPaint.getFontMetrics();  <span style="box-sizing: border-box;"></span>
  String <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span> = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"abcdefghijklmnopqrstu"</span>;  
  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 计算每一个坐标</span>
  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> baseX = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;  
  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> baseY = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>;  
  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> topY = baseY + fontMetrics.top;  
  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> ascentY = baseY + fontMetrics.ascent;  
  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> descentY = baseY + fontMetrics.descent;  
  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> bottomY = baseY + fontMetrics.bottom;  </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li></ul>

下面是具体实现代码：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.content.Context;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Bitmap;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Canvas;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Color;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.Paint;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.PorterDuff;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.PorterDuffXfermode;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.graphics.RectF;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.util.AttributeSet;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.View;<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
<span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
 * Created  on 2016/3/13.
 */</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">SongTextView</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> postIndex;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Paint mPaint;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> delta = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> mTextHeight;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> mTextWidth;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> String mText=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"梦 里 面 看 我 七 十 二 变"</span>;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> PorterDuffXfermode xformode;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">SongTextView</span>(Context ctx)<span style="box-sizing: border-box;"></span>
    {<span style="box-sizing: border-box;"></span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>(ctx,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">SongTextView</span>(Context context, AttributeSet attrs) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>(context, attrs, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">SongTextView</span>(Context context,  AttributeSet attrs, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> defStyleAttr) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(context, attrs, defStyleAttr);<span style="box-sizing: border-box;"></span>
        init();<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">init</span>()<span style="box-sizing: border-box;"></span>
    {<span style="box-sizing: border-box;"></span>
        mPaint = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Paint(Paint.ANTI_ALIAS_FLAG);<span style="box-sizing: border-box;"></span>
        xformode = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> PorterDuffXfermode(PorterDuff.Mode.SRC_IN);<span style="box-sizing: border-box;"></span>
        mPaint.setColor(Color.CYAN);<span style="box-sizing: border-box;"></span>
        mPaint.setTextSize(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60.0</span>f);<span style="box-sizing: border-box;"></span>
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);<span style="box-sizing: border-box;"></span>
        mPaint.setXfermode(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span style="box-sizing: border-box;"></span>
        mPaint.setTextAlign(Paint.Align.LEFT);<span style="box-sizing: border-box;"></span>
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//文字精确高度</span><span style="box-sizing: border-box;"></span>
        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();<span style="box-sizing: border-box;"></span>
        mTextHeight = fontMetrics.bottom-fontMetrics.descent-fontMetrics.ascent;<span style="box-sizing: border-box;"></span>
        mTextWidth  = mPaint.measureText(mText);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
      *计算 控件的宽高
      */</span>
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onMeasure</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> widthMeasureSpec, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> heightMeasureSpec) {
      <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span>  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mWidth;
      <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span>  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mHeight;
        <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
         * 设置宽度
         */</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> widthMode = MeasureSpec.getMode(widthMeasureSpec);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> widthSize = MeasureSpec.getSize(widthMeasureSpec);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (widthMode == MeasureSpec.EXACTLY)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// match_parent , accurate</span><span style="box-sizing: border-box;"></span>
            mWidth = widthSize;<span style="box-sizing: border-box;"></span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span><span style="box-sizing: border-box;"></span>
        {<span style="box-sizing: border-box;"></span>
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 由图片决定的宽</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> desireByImg = getPaddingLeft() + getPaddingRight()<span style="box-sizing: border-box;"></span>
                    + getMeasuredWidth();<span style="box-sizing: border-box;"></span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (widthMode == MeasureSpec.AT_MOST)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// wrap_content</span><span style="box-sizing: border-box;"></span>
                mWidth = Math.min(desireByImg, widthSize);<span style="box-sizing: border-box;"></span>
             <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span><span style="box-sizing: border-box;"></span>
                mWidth = desireByImg;<span style="box-sizing: border-box;"></span>
        }<span style="box-sizing: border-box;"></span>
        <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/***
         * 设置高度
         */</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>   heightMode = MeasureSpec.getMode(heightMeasureSpec);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span>   heightSize = MeasureSpec.getSize(heightMeasureSpec);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (heightMode == MeasureSpec.EXACTLY)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// match_parent , accurate</span><span style="box-sizing: border-box;"></span>
            mHeight = heightSize;<span style="box-sizing: border-box;"></span>
         <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span><span style="box-sizing: border-box;"></span>
        {<span style="box-sizing: border-box;"></span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> desire = getPaddingTop() + getPaddingBottom()<span style="box-sizing: border-box;"></span>
                    + getMeasuredHeight();<span style="box-sizing: border-box;"></span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (heightMode == MeasureSpec.AT_MOST)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// wrap_content</span><span style="box-sizing: border-box;"></span>
                mHeight = Math.min(desire, heightSize);<span style="box-sizing: border-box;"></span>
             <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span><span style="box-sizing: border-box;"></span>
                mHeight = desire;<span style="box-sizing: border-box;"></span>
        }<span style="box-sizing: border-box;"></span>
        setMeasuredDimension( mWidth,  mHeight);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onDraw</span>(Canvas canvas) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onDraw(canvas);<span style="box-sizing: border-box;"></span>
        Bitmap srcBitmap = Bitmap.createBitmap(getMeasuredWidth(),getMeasuredHeight(), Bitmap.Config.ARGB_8888);<span style="box-sizing: border-box;"></span>
        Canvas srcCanvas = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Canvas(srcBitmap);<span style="box-sizing: border-box;"></span>
        srcCanvas.drawText(mText, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, mTextHeight, mPaint);<span style="box-sizing: border-box;"></span>
        mPaint.setXfermode(xformode);<span style="box-sizing: border-box;"></span>
        mPaint.setColor(Color.RED);<span style="box-sizing: border-box;"></span>
        RectF rectF = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> RectF(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,postIndex,getMeasuredHeight());<span style="box-sizing: border-box;"></span>
        srcCanvas.drawRect(rectF, mPaint);<span style="box-sizing: border-box;"></span>
        canvas.drawBitmap(srcBitmap, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span style="box-sizing: border-box;"></span>
        init();<span style="box-sizing: border-box;"></span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(postIndex<mTextWidth)<span style="box-sizing: border-box;"></span>
        {<span style="box-sizing: border-box;"></span>
            postIndex+=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>;<span style="box-sizing: border-box;"></span>
        }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{<span style="box-sizing: border-box;"></span>
            postIndex=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span style="box-sizing: border-box;"></span>
        }<span style="box-sizing: border-box;"></span>
        postInvalidateDelayed(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">58</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">59</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">60</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">61</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">62</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">63</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">64</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">65</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">66</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">67</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">68</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">69</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">70</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">71</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">72</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">73</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">74</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">75</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">76</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">77</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">78</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">79</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">80</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">81</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">82</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">83</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">84</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">85</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">86</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">87</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">88</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">89</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">90</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">91</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">92</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">93</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">94</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">95</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">96</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">97</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">98</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">99</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">100</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">101</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">102</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">103</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">104</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">105</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">106</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">107</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">108</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">109</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">110</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">111</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">112</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">17</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">18</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">19</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">20</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">21</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">22</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">23</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">24</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">25</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">26</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">27</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">28</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">29</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">三十</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">31</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">32</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">33</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">34</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">35</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">36</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">37</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">38</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">39</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">40</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">41</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">42</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">43</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">44</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">45</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">46</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">47</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">48</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">49</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">50</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">51</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">52</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">53</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">54</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">55</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">56</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">57</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">58</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">59</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">60</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">61</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">62</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">63</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">64</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">65</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">66</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">67</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">68</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">69</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">70</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">71</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">72</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">73</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">74</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">75</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">76</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">77</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">78</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">79</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">80</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">81</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">82</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">83</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">84</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">85</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">86</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">87</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">88</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">89</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">90</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">91</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">92</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">93</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">94</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">95</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">96</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">97</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">98</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">99</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">100</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">101</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">102</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">103</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">104</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">105</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">106</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">107</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">108</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">109</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">110</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">111</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">112</span></li></ul>

这里写图片描述

进度实现歌词播放效果

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

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><layer-<span class="hljs-type" style="box-sizing: border-box;">list</span> xmlns:android=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res/android"</span>><span style="box-sizing: border-box;"></span>
    <<span class="hljs-property" style="box-sizing: border-box;">item</span>
        android:<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@android:id/background"</span>
        android:drawable=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@drawable/normal"</span> /><span style="box-sizing: border-box;"></span>
    <<span class="hljs-property" style="box-sizing: border-box;">item</span>
        android:<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@android:id/progress"</span>
        android:drawable=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@drawable/grandient"</span> /><span style="box-sizing: border-box;"></span>
</layer-<span class="hljs-type" style="box-sizing: border-box;">list</span>></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li></ul>

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

<code class="hljs perl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span style="box-sizing: border-box;"></span>
  <ProgressBar<span style="box-sizing: border-box;"></span>
        android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@+</span>id/pb1"</span>
        style=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@android</span>:style/Widget.ProgressBar.Horizontal"</span>
        android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"300dp"</span>
        android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"40dp"</span>
        android:max=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"100"</span>
        android:maxHeight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"2dp"</span>
        android:minHeight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"2dp"</span>
        android:progress=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"20"</span>
     android:progressDrawable=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@drawable</span>/m_progress_horizontal"</span>
        android:secondaryProgress=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"30"</span>
      android:visibility=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"gone"</span>/></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li></ul>

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

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> ProgressBar pb1= (ProgressBar) findViewById(R.id.pb1);
          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置滚动条可见</span>
        setProgressBarIndeterminateVisibility(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);<span style="box-sizing: border-box;"></span>
        progress=pb1.getProgress();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取初始进度</span>
        timer=<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Timer();<span style="box-sizing: border-box;"></span>
        task=<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> TimerTask() {
            <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">run</span>() {<span style="box-sizing: border-box;"></span>
                progress+=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>;
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(progress><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>){<span style="box-sizing: border-box;"></span>
                    progress=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;<span style="box-sizing: border-box;"></span>
                }<span style="box-sizing: border-box;"></span>
                handler.sendEmptyMessage(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span style="box-sizing: border-box;"></span>
            }<span style="box-sizing: border-box;"></span>
        };<span style="box-sizing: border-box;"></span>
        timer.schedule(task,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1000</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">16</span></li></ul>

实现及进度的改变：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Handler handler=<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Handler(){
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">handleMessage</span>(Message msg) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.handleMessage(msg);<span style="box-sizing: border-box;"></span>
        pb1.setProgress(progress);<span style="box-sizing: border-box;"></span>
    }<span style="box-sizing: border-box;"></span>
};<span style="box-sizing: border-box;"></span>
<span style="box-sizing: border-box;"></span>
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onDestroy</span>() {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onDestroy();<span style="box-sizing: border-box;"></span>
        timer=<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>;<span style="box-sizing: border-box;"></span>
        task=<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>;<span style="box-sizing: border-box;"></span>
        handler.removeCallbacksAndMessages(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);<span style="box-sizing: border-box;"></span>
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">1</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">2</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">3</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">4</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">五</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">6</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">7</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">8</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">9</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">10</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">11</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">12</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">13</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">14</span></li><li style="box-sizing: border-box; padding: 0px 5px;"><span style="box-sizing: border-box;">15</span></li></ul>

效果也是不错的：
这里写图片描述