Android自定义View：化繁为简的歌词控件，点亮你的音乐旅程

2023-09-28 04:33:36

在移动设备上享受音乐盛宴时，歌词无疑是不可或缺的元素。它们不仅让我们沉浸在旋律之中，更能深切领悟歌曲背后的故事。然而，对于Android开发者而言，歌词控件的实现却常常是一项繁琐且耗时的任务。为了简化这一过程，本文将深入探讨Android自定义View中歌词控件的打造，并分享其背后的设计理念和实现技巧，助你轻松点亮你的音乐旅程！

前言

歌词控件，作为音乐应用中必不可少的一环，其作用在于同步显示歌词，让用户在欣赏音乐的同时也能领略歌词之美。传统上，实现歌词控件需要大量的代码和繁琐的逻辑处理，这无疑增加了开发的难度和时间成本。

本教程将揭开Android歌词控件背后的秘密，提供一种简洁高效的自定义View实现方式，使开发者能够快速上手，轻松打造专业级的歌词控件。通过逐步拆解歌词控件的各个组成部分，我们将深入探讨歌词的显示、解析和同步技术，让你对歌词控件的开发有更深入的理解。

需求分析

在着手开发歌词控件之前，我们需要明确其核心需求：

歌词显示： 以可视化的方式呈现歌词，确保清晰易读。
歌词解析： 从歌词文件中提取歌词信息，包括开始时间、歌词文本等。
歌词同步： 根据当前播放时间，精准同步歌词显示，为用户提供沉浸式的歌词体验。

实现方案

1. 歌词显示

歌词显示的关键在于创建自定义的TextView，并针对歌词的特殊格式进行优化。

public class LyricTextView extends TextView {

    // 歌词颜色
    private int mLyricColor;

    // 当前歌词位置
    private int mCurrentIndex;

    // 歌词列表
    private List<Lyric> mLyrics;

    public LyricTextView(Context context) {
        super(context);
        init();
    }

    public LyricTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mLyricColor = ContextCompat.getColor(getContext(), R.color.lyric_color);
        mLyrics = new ArrayList<>();
    }

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

        // 绘制歌词
        for (int i = 0; i < mLyrics.size(); i++) {
            Lyric lyric = mLyrics.get(i);

            if (lyric.startTime <= mCurrentTime && lyric.endTime >= mCurrentTime) {
                // 当前歌词
                setTextColor(mLyricColor);
            } else {
                // 其他歌词
                setTextColor(Color.GRAY);
            }

            // 绘制歌词文本
            canvas.drawText(lyric.text, 0, i * lineHeight, paint);
        }
    }

    public void setLyrics(List<Lyric> lyrics) {
        this.mLyrics = lyrics;
        invalidate();
    }
}

2. 歌词解析

歌词解析的任务是将歌词文件中的歌词信息提取出来。歌词文件通常采用LRC格式，其中包含了歌词文本和对应的开始时间。

public class LyricParser {

    public static List<Lyric> parse(String lyricText) {
        List<Lyric> lyrics = new ArrayList<>();

        String[] lines = lyricText.split("\n");
        for (String line : lines) {
            if (line.startsWith("[") && line.endsWith("]")) {
                // 时间标签
                String timeStr = line.substring(1, line.length() - 1);
                String[] timeArr = timeStr.split(":");
                long startTime = Long.parseLong(timeArr[0]) * 60 * 1000 + Long.parseLong(timeArr[1]) * 1000 + Long.parseLong(timeArr[2]);

                // 歌词文本
                String text = line.substring(line.indexOf("]") + 1);

                // 添加歌词信息
                lyrics.add(new Lyric(startTime, text));
            }
        }

        return lyrics;
    }
}

3. 歌词同步

歌词同步是歌词控件的关键环节，它需要根据当前播放时间精准定位到对应的歌词，并进行显示。

public class LyricSynchronizer implements MediaPlayer.OnSeekCompleteListener {

    private LyricTextView mLyricTextView;
    private MediaPlayer mMediaPlayer;

    public LyricSynchronizer(LyricTextView lyricTextView, MediaPlayer mediaPlayer) {
        this.mLyricTextView = lyricTextView;
        this.mMediaPlayer = mediaPlayer;
        mMediaPlayer.setOnSeekCompleteListener(this);
    }

    @Override
    public void onSeekComplete(MediaPlayer mp) {
        // 更新当前歌词位置
        int index = findCurrentLyricIndex();

        // 设置当前歌词
        mLyricTextView.setCurrentIndex(index);

        // 重新绘制歌词
        mLyricTextView.invalidate();
    }

    private int findCurrentLyricIndex() {
        for (int i = 0; i < mLyrics.size(); i++) {
            Lyric lyric = mLyrics.get(i);

            if (lyric.startTime <= mMediaPlayer.getCurrentPosition() && lyric.endTime >= mMediaPlayer.getCurrentPosition()) {
                return i;
            }
        }

        return -1;
    }
}