Home

Awesome

lrcview

系列文章

前言

上一节我们仿照云音乐实现了黑胶唱片专辑封面,这节我们该实现歌词显示了。当然,歌词不仅仅是显示就完了,作为一个有素质的音乐播放器,我们当然还需要根据歌曲进度自动滚动歌词,并且要支持上下拖动。

简介

Android歌词控件,支持上下拖动歌词,歌词自动换行,自定义属性,支持双语歌词。

更新说明

v 2.2

v 2.1.0

v 2.0

v 1.4

v 1.3

v 1.2

v 1.1

v 1.0

使用

Gradle

// root project build.gradle
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

// module build.gradle
// "latestVersion"改为文首徽章后对应的数值
implementation 'me.wcy:lrcview:latestVersion'

属性

属性描述
lrcTextSize当前歌词文本字体大小
lrcNormalTextSize普通歌词文本字体大小
lrcNormalTextColor非当前行歌词字体颜色
lrcCurrentTextColor当前行歌词字体颜色
lrcTimelineTextColor拖动歌词时选中歌词的字体颜色
lrcTextGravity歌词对齐方向,center:居中对齐,left:靠左对齐,right:靠右对齐,默认为 center
lrcDividerHeight歌词间距
lrcAnimationDuration歌词滚动动画时长
lrcLabel没有歌词时屏幕中央显示的文字,如“暂无歌词”
lrcPadding歌词文字的左右边距
lrcTimelineColor拖动歌词时时间线的颜色
lrcTimelineHeight拖动歌词时时间线的高度
lrcPlayDrawable拖动歌词时左侧播放按钮图片
lrcTimeTextColor拖动歌词时右侧时间字体颜色
lrcTimeTextSize拖动歌词时右侧时间字体大小

方法

方法描述
loadLrc(File lrcFile)加载歌词文件
loadLrc(File mainLrcFile, File secondLrcFile)加载双语歌词文件,两种语言的歌词时间戳需要一致
loadLrc(String lrcText)加载歌词文本
loadLrc(String mainLrcText, String secondLrcText)加载双语歌词文本,两种语言的歌词时间戳需要一致
loadLrcByUrl(String lrcUrl)加载在线歌词文本,默认使用 utf-8 编码
loadLrcByUrl(String lrcUrl, String charset)加载在线歌词文本
hasLrc()歌词是否有效
setLabel(String label)设置歌词为空时视图中央显示的文字,如“暂无歌词”
updateTime(long time)刷新歌词
onDrag(long time)将歌词滚动到指定时间。已弃用,请使用 updateTime(long) 代替
setOnPlayClickListener(OnPlayClickListener onPlayClickListener)设置拖动歌词时,播放按钮点击监听器。如果为非 null ,则激活歌词拖动功能,否则将将禁用歌词拖动功能。已弃用,请使用 setDraggable 代替
setDraggable(Boolean draggable, OnPlayClickListener onPlayClickListener)设置歌词是否允许拖动。如果允许拖动,则 OnPlayClickListener 不能为 null
setOnTapListener(LrcView view, float x, float y)设置歌词控件点击监听器
setNormalColor设置非当前行歌词字体颜色
setCurrentColor设置当前行歌词字体颜色
setTimelineTextColor设置拖动歌词时选中歌词的字体颜色
setTimelineColor设置拖动歌词时时间线的颜色
setTimeTextColor设置拖动歌词时右侧时间字体颜色
setCurrentTextSize当前歌词文本字体大小
setNormalTextSize普通歌词文本字体大小

思路分析

正常播放时,当前播放的那一行应该在视图中央,首先计算出每一行位于中央时画布应该滚动的距离。<br> 将所有歌词按顺序画出,然后将画布滚动的相应的距离,将正在播放的歌词置于屏幕中央。<br> 歌词滚动时要有动画,使用属性动画即可,我们可以使用当前行和上一行的滚动距离作为动画的起止值。<br> 多行歌词绘制采用StaticLayout。

上下拖动时,歌词跟随手指滚动,绘制时间线。<br> 手指离开屏幕时,一段时间内,如果没有下一步操作,则隐藏时间线,同时将歌词滚动到实际位置,回到正常播放状态;<br> 如果点击播放按钮,则跳转到指定位置,回到正常播放状态。

代码实现

onDraw 中将歌词文本绘出,mOffset 是当前应该滚动的距离

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

    int centerY = getHeight() / 2;

    // 无歌词文件
    if (!hasLrc()) {
        mLrcPaint.setColor(mCurrentTextColor);
        @SuppressLint("DrawAllocation")
        StaticLayout staticLayout = new StaticLayout(mDefaultLabel, mLrcPaint, (int) getLrcWidth(),
                Layout.Alignment.ALIGN_CENTER, 1f, 0f, false);
        drawText(canvas, staticLayout, centerY);
        return;
    }

    int centerLine = getCenterLine();

    if (isShowTimeline) {
        mPlayDrawable.draw(canvas);

        mTimePaint.setColor(mTimelineColor);
        canvas.drawLine(mTimeTextWidth, centerY, getWidth() - mTimeTextWidth, centerY, mTimePaint);

        mTimePaint.setColor(mTimeTextColor);
        String timeText = LrcUtils.formatTime(mLrcEntryList.get(centerLine).getTime());
        float timeX = getWidth() - mTimeTextWidth / 2;
        float timeY = centerY - (mTimeFontMetrics.descent + mTimeFontMetrics.ascent) / 2;
        canvas.drawText(timeText, timeX, timeY, mTimePaint);
    }

    canvas.translate(0, mOffset);

    float y = 0;
    for (int i = 0; i < mLrcEntryList.size(); i++) {
        if (i > 0) {
            y += (mLrcEntryList.get(i - 1).getHeight() + mLrcEntryList.get(i).getHeight()) / 2 + mDividerHeight;
        }
        if (i == mCurrentLine) {
            mLrcPaint.setColor(mCurrentTextColor);
        } else if (isShowTimeline && i == centerLine) {
            mLrcPaint.setColor(mTimelineTextColor);
        } else {
            mLrcPaint.setColor(mNormalTextColor);
        }
        drawText(canvas, mLrcEntryList.get(i).getStaticLayout(), y);
    }
}

手势监听器

private GestureDetector.SimpleOnGestureListener mSimpleOnGestureListener = new GestureDetector.SimpleOnGestureListener() {
    @Override
    public boolean onDown(MotionEvent e) {
        if (hasLrc() && mOnPlayClickListener != null) {
            mScroller.forceFinished(true);
            removeCallbacks(hideTimelineRunnable);
            isTouching = true;
            isShowTimeline = true;
            invalidate();
            return true;
        }
        return super.onDown(e);
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        if (hasLrc()) {
            mOffset += -distanceY;
            mOffset = Math.min(mOffset, getOffset(0));
            mOffset = Math.max(mOffset, getOffset(mLrcEntryList.size() - 1));
            invalidate();
            return true;
        }
        return super.onScroll(e1, e2, distanceX, distanceY);
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        if (hasLrc()) {
            mScroller.fling(0, (int) mOffset, 0, (int) velocityY, 0, 0, (int) getOffset(mLrcEntryList.size() - 1), (int) getOffset(0));
            isFling = true;
            return true;
        }
        return super.onFling(e1, e2, velocityX, velocityY);
    }

    @Override
    public boolean onSingleTapConfirmed(MotionEvent e) {
        if (hasLrc() && isShowTimeline && mPlayDrawable.getBounds().contains((int) e.getX(), (int) e.getY())) {
            int centerLine = getCenterLine();
            long centerLineTime = mLrcEntryList.get(centerLine).getTime();
            // onPlayClick 消费了才更新 UI
            if (mOnPlayClickListener != null && mOnPlayClickListener.onPlayClick(centerLineTime)) {
                isShowTimeline = false;
                removeCallbacks(hideTimelineRunnable);
                mCurrentLine = centerLine;
                invalidate();
                return true;
            }
        }
        return super.onSingleTapConfirmed(e);
    }
};

滚动动画

private void scrollTo(int line, long duration) {
    float offset = getOffset(line);
    endAnimation();

    mAnimator = ValueAnimator.ofFloat(mOffset, offset);
    mAnimator.setDuration(duration);
    mAnimator.setInterpolator(new LinearInterpolator());
    mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mOffset = (float) animation.getAnimatedValue();
            invalidate();
        }
    });
    mAnimator.start();
}

代码比较简单,大家根据源码和注释很容易就能看懂。到这里,我们已经实现了可拖动的歌词控件了。<br> 截图看比较简单,大家可以运行源码或下载波尼音乐查看详细效果。

Liked it?

如果你觉得该项目对你有帮助,欢迎给它一个 star⭐️ Stargazers over time

关于作者

掘金:https://juejin.cn/user/2313028193754168<br> 微博:https://weibo.com/wangchenyan1993

License

Copyright 2017 wangchenyan

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.