Android -- [SelfView] 自定义多行歌词滚动显示器

Android – [SelfView] 自定义多行歌词滚动显示器

流畅、丝滑的滚动歌词控件
 * 1. 背景透明；
 * 2. 外部可控制进度变化；
 * 3. 支持屏幕拖动调节进度（回调给外部）；

效果
在这里插入图片描述

歌词文件（.lrc）
在这里插入图片描述

一. 使用

<com.nepalese.harinetest.player.lrc.VirgoLrcView
	android:id="@+id/lrcView"
	android:layout_width="match_parent"
	android:layout_height="match_parent"/>

private VirgoLrcView lrcView;

lrcView = findViewById(R.id.lrcView);
initLrc();

//==================================
private void initLrc(){
//设置歌词文件 .lrc
//lrcView.setLrc(FileUtils.readTxtResource(getApplicationContext(), R.raw.shaonian, "utf-8"));
	lrcView.setLrc(R.raw.shaonian);
	lrcView.seekTo(0);

	lrcView.setCallback(new VirgoLrcView.LrcCallback() {
		@Override
		public void onUpdateTime(long time) {
        	//拖动歌词返回的时间点
		}

		@Override
		public void onFinish() {
			stopTask();
		}
	});
}

public void onStartPlay(View view) {
	startTask();
}

public void onStopPlay(View view) {
	stopTask();
}

//使用计时器模拟歌曲播放时进度刷新
private long curTime = 0;
private final Runnable timeTisk = new Runnable() {
	@Override
	public void run() {
		curTime += INTERVAL_FLASH;
		lrcView.seekTo(curTime);
	}
};

private void startTask() {
    stopTask();
    handler.post(timeTisk);
}

private void stopTask() {
    handler.removeCallbacks(timeTisk);
}

private final long INTERVAL_FLASH = 400L;
private final Handler handler = new Handler(Looper.myLooper()) {
	@Override
	public void handleMessage(@NonNull Message msg) {
		super.handleMessage(msg);
	}
};

二. 码源

attr.xml

<declare-styleable name="VirgoLrcView">
	<attr name="vlTextColorM" format="color|reference" />
	<attr name="vlTextColorS" format="color|reference" />
	<attr name="vlTextSize" format="dimension|reference" />
	<attr name="vlLineSpace" format="dimension|reference" />
</declare-styleable>

VirgoLrcView.java

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;

import androidx.annotation.Nullable;
import androidx.annotation.RawRes;

import com.nepalese.harinetest.R;
import com.nepalese.harinetest.utils.CommonUtil;

import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

/**
 * Created by Administrator on 2024/11/26.
 * Usage:更流畅、丝滑的滚动歌词控件
 * 1. 背景透明；
 * 2. 外部可控制进度变化；
 * 3. 支持屏幕拖动调节进度（回调给外部）；
 */

public class VirgoLrcView extends View {
    private static final String TAG = "VirgoLrcView";
    private static final float PADD_VALUE = 25f;//时间线两边缩进值
    private static final float TEXT_RATE = 1.25f;//当前行字体放大比例
    private static final long INTERVAL_ANIMATION = 400L;//动画时长
    private static final String DEFAULT_TEXT = "暂无歌词，快去下载吧！";

    private final Context context;
    private Paint paint;//画笔, 仅一个
    private ValueAnimator animator;//动画
    private List<LrcBean> lineList;//歌词行
    private LrcCallback callback;//手动滑动进度刷新回调

    //可设置变量
    private int textColorMain;//选中字体颜色
    private int textColorSec;//其他字体颜色
    private float textSize;//字体大小
    private float lineSpace;//行间距
    private float selectTextSize;//当前选中行字体大小

    private int width, height;//控件宽高
    private int curLine;//当前行数
    private int locateLine;//滑动时居中行数
    private int underRows;//中分下需显示行数
    private float itemHeight;//一行字+行间距
    private float centerY;//居中y
    private float startY;//首行y
    private float oldY;//划屏时起始按压点y
    private float offsetY;//动画已偏移量
    private float offsetY2;//每次手动滑动偏移量
    private long maxTime;//歌词显示最大时间
    private boolean isDown;//按压界面
    private boolean isReverse;//往回滚动？

    public VirgoLrcView(Context context) {
        this(context, null);
    }

    public VirgoLrcView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public VirgoLrcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        init(attrs);
    }

    private void init(AttributeSet attrs) {
        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.VirgoLrcView);
        textColorMain = ta.getColor(R.styleable.VirgoLrcView_vlTextColorM, Color.CYAN);
        textColorSec = ta.getColor(R.styleable.VirgoLrcView_vlTextColorS, Color.GRAY);
        textSize = ta.getDimension(R.styleable.VirgoLrcView_vlTextSize, 45f);
        lineSpace = ta.getDimension(R.styleable.VirgoLrcView_vlLineSpace, 28f);
        ta.recycle();

        selectTextSize = textSize * TEXT_RATE;
        curLine = 0;
        maxTime = 0;
        isDown = false;
        isReverse = false;
        lineList = new ArrayList<>();

        paint = new Paint();
        paint.setTextSize(textSize);
        paint.setAntiAlias(true);

        calculateItem();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (width == 0 || height == 0) {
            initLayout();
        }
    }

    //控件大小变化时需重置计算
    private void initLayout() {
        width = getWidth();
        height = getHeight();
        centerY = (height - itemHeight) / 2.0f;
        startY = centerY;
        underRows = (int) Math.ceil(height / itemHeight / 3);
        Log.d(TAG, "itemHeight: " + itemHeight + ", underRows: " + underRows);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //提示无歌词
        if (lineList.isEmpty()) {
            paint.setColor(textColorMain);
            paint.setTextSize(selectTextSize);
            canvas.drawText(DEFAULT_TEXT, getStartX(DEFAULT_TEXT, paint), centerY, paint);
            return;
        }

        if (isDown) {
            paint.setTextSize(textSize);
            paint.setColor(textColorSec);
            //画时间
            if (locateLine >= 0) {
                canvas.drawText(lineList.get(locateLine).getStrTime(), PADD_VALUE, centerY, paint);
            }
            //画选择线
            canvas.drawLine(PADD_VALUE, centerY, width - PADD_VALUE, centerY, paint);

            //手动滑动
            drawTexts(canvas, startY - offsetY2);
        } else {
            //自动滚动
            if (isReverse) {
                drawTexts(canvas, startY + offsetY);
            } else {
                drawTexts(canvas, startY - offsetY);
            }
        }
    }

    private void drawTexts(Canvas canvas, float tempY) {
        for (int i = 0; i < lineList.size(); i++) {
            float y = tempY + i * itemHeight;

            if (y < 0 || y > height) {
                continue;
            }

            if (curLine == i) {
                paint.setTextSize(selectTextSize);
                paint.setColor(textColorMain);
            } else {
                paint.setTextSize(textSize);
                paint.setColor(textColorSec);
            }

            canvas.drawText(lineList.get(i).getLrc(), getStartX(lineList.get(i).getLrc(), paint), y, paint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                isDown = true;
                if (animator != null) {
                    if (animator.isRunning()) {
                        //停止动画
                        animator.end();
                    }
                }
                locateLine = -1;
                oldY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                offsetY2 = oldY - event.getY();
                calculateCurLine(oldY - event.getY());//定位时间啊
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                isDown = false;
                postNewLine();
                break;
        }

        return true;
    }

    //计算滑动后当前居中的行
    private void calculateCurLine(float y) {
        int offLine = (int) Math.floor(y / itemHeight);
        if (offLine == 0) {
            return;
        }

        locateLine = curLine + offLine;
        if (locateLine > lineList.size() - 1) {
            //最后一行
            locateLine = lineList.size() - 1;
        } else if (locateLine < 0) {
            //第一行
            locateLine = 0;
        }
    }

    //回调通知，自身不跳转进度
    private void postNewLine() {
        //返回当前行对应的时间线
        if (callback == null) {
            return;
        }
        if (locateLine >= 0) {
            callback.onUpdateTime(lineList.get(locateLine).getTime());
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        releaseBase();
        super.onDetachedFromWindow();
    }

    /**
     * 移除控件，注销资源
     */
    private void releaseBase() {
        cancelAnim();

        if (lineList != null) {
            lineList.clear();
            lineList = null;
        }

        if (callback != null) {
            callback = null;
        }
    }

    private void calculateItem() {
        itemHeight = getTextHeight() + lineSpace;
    }

    //计算使文字水平居中
    private float getStartX(String str, Paint paint) {
        return (width - paint.measureText(str)) / 2.0f;
    }

    //获取文字高度
    private float getTextHeight() {
        Paint.FontMetrics fm = paint.getFontMetrics();
        return fm.descent - fm.ascent;
    }

    //解析歌词
    private void parseLrc(InputStreamReader inputStreamReader) {
        BufferedReader reader = new BufferedReader(inputStreamReader);
        String line;
        try {
            while ((line = reader.readLine()) != null) {
                parseLine(line);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }

        try {
            inputStreamReader.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        try {
            reader.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

        maxTime = lineList.get(lineList.size() - 1).getTime() + 1000;//多加一秒
    }

    private long parseTime(String time) {
        // 00:01.10
        String[] min = time.split(":");
        String[] sec = min[1].split("\\.");

        long minInt = Long.parseLong(min[0].replaceAll("\\D+", "")
                .replaceAll("\r", "").replaceAll("\n", "").trim());
        long secInt = Long.parseLong(sec[0].replaceAll("\\D+", "")
                .replaceAll("\r", "").replaceAll("\n", "").trim());
        long milInt = Long.parseLong(sec[1].replaceAll("\\D+", "")
                .replaceAll("\r", "").replaceAll("\n", "").trim());

        return minInt * 60 * 1000 + secInt * 1000 + milInt;// * 10;
    }

    private void parseLine(String line) {
        Matcher matcher = Pattern.compile("\\[\\d.+].+").matcher(line);
        // 如果形如：[xxx]后面啥也没有的，则return空
        if (!matcher.matches()) {
            long time;
            String str;
            String con = line.replace("\\[", "").replace("\\]", "");
            if (con.matches("^\\d.+")) {//time
                time = parseTime(con);
                str = " ";
            } else {
                return;
            }
            lineList.add(new LrcBean(time, str, con));
            return;
        }

        //[00:23.24]让自己变得快乐
        line = line.replaceAll("\\[", "");
        String[] result = line.split("]");
        lineList.add(new LrcBean(parseTime(result[0]), result[1], result[0]));
    }

    private void reset() {
        lineList.clear();
        curLine = 0;
        maxTime = 0;
        isReverse = false;
        cancelAnim();
    }

    ///动画/

    /**
     * 更新动画
     *
     * @param lineNum 需跳转行数
     */
    private void updateAnim(int lineNum) {
        if (lineNum == 0) {
            return;
        } else if (lineNum == 1) {
            //自然变化
            if (curLine >= lineList.size() - underRows) {
                //停止动画 仅变更颜色
                cancelAnim();
                invalidate();
                return;
            }
        }
        isReverse = lineNum < 0;
        cancelAnim();
        setAnimator(Math.abs(lineNum));
        doAnimation();
    }

    /**
     * 注销已有动画
     */
    protected void cancelAnim() {
        if (animator != null) {
            animator.removeAllListeners();
            animator.end();
            animator = null;
        }
    }


    /**
     * 动态创建动画
     *
     * @param lineNum 需跳转行数
     */
    private void setAnimator(int lineNum) {
        animator = ValueAnimator.ofFloat(0, itemHeight * lineNum);//一行
        animator.setDuration(INTERVAL_ANIMATION);
        animator.setInterpolator(new LinearInterpolator());//插值器设为线性
    }

    /**
     * 监听动画
     */
    private void doAnimation() {
        if (animator == null) {
            return;
        }

        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                offsetY = 0;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                if (isReverse) {
                    startY += offsetY;
                } else {
                    startY -= offsetY;
                }
                offsetY = 0;
                invalidate();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        animator.addUpdateListener(animation -> {
            float av = (float) animation.getAnimatedValue();
            if (av == 0) {
                return;
            }
            offsetY = av;
            invalidate();
        });

        animator.start();
    }

    public interface LrcCallback {
        void onUpdateTime(long time);

        void onFinish();
    }

    

    /**
     * 滑动监听
     *
     * @param callback LrcCallback
     */
    public void setCallback(LrcCallback callback) {
        this.callback = callback;
    }

    public void setTextColorMain(int textColorMain) {
        this.textColorMain = textColorMain;
    }

    public void setTextColorSec(int textColorSec) {
        this.textColorSec = textColorSec;
    }

    public void setTextSize(float textSize) {
        this.textSize = textSize;
        this.selectTextSize = textSize * TEXT_RATE;
        paint.setTextSize(textSize);
        calculateItem();
    }

    public void setLineSpace(float lineSpace) {
        this.lineSpace = lineSpace;
        calculateItem();
    }

    /**
     * 设置歌词
     *
     * @param lrc 解析后的string
     */
    public void setLrc(String lrc) {
        if (TextUtils.isEmpty(lrc)) {
            return;
        }
        reset();
        parseLrc(new InputStreamReader(new ByteArrayInputStream(lrc.getBytes())));
    }

    /**
     * 设置歌词
     *
     * @param resId 资源文件id
     */
    public void setLrc(@RawRes int resId) {
        reset();
        parseLrc(new InputStreamReader(context.getResources().openRawResource(resId), StandardCharsets.UTF_8));
    }

    /**
     * 设置歌词
     *
     * @param path lrc文件路径
     */
    public void setLrcFile(String path) {
        File file = new File(path);
        if (file.exists()) {
            reset();
            String format;
            if (CommonUtil.isUtf8(file)) {
                format = "UTF-8";
            } else {
                format = "GBK";
            }

            FileInputStream inputStream = null;
            try {
                inputStream = new FileInputStream(file);
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }

            InputStreamReader inputStreamReader = null;//'utf-8' 'GBK'
            try {
                inputStreamReader = new InputStreamReader(inputStream, format);
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }

            parseLrc(inputStreamReader);
        }
    }

    /**
     * 调整播放位置
     *
     * @param time ms
     */
    public void seekTo(long time) {
        if (isDown) {
            //拖动歌词时暂不处理
            return;
        }

        if (time == 0) {
            //刷新
            invalidate();
            return;
        } else if (time > maxTime) {
            //超最大时间：通知结束
            if (callback != null) {
                callback.onFinish();
            }
            return;
        }

        for (int i = 0; i < lineList.size(); i++) {
            if (i < lineList.size() - 1) {
                if (time >= lineList.get(i).getTime() && time < lineList.get(i + 1).getTime()) {
                    int temp = i - curLine;
                    curLine = i;

                    updateAnim(temp);
                    break;
                }
            } else {//last line
                int temp = i - curLine;
                curLine = i;

                updateAnim(temp);
                break;
            }
        }
    }
}