package com.wm.remusic.lrc; import android.animation.ValueAnimator; import android.animation.ValueAnimator.AnimatorUpdateListener; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; import android.view.ViewConfiguration; import android.widget.Scroller; import com.wm.remusic.MainApplication; import com.wm.remusic.R; import com.wm.remusic.uitl.CommonUtils; import java.util.List; /*** * 须知: * 在ViewGroup里面 scrollTo,scrollBy方法移动的是子View * 在View里面scrollTo,scrollBy方法移动的是View里面绘制的内容 * 要点: * 1:歌词的上下平移用什么实现? * 用Scroller实现,Scroller只是一个工具而已, * 真正实现滚动效果的还是View的scrollTo方法 * 2:歌词的水平滚动怎么实现? * 通过属性动画ValueAnimator控制高亮歌词绘制的x轴起始坐标 * * @author Ligang 2014/8/19 */ public class LrcView extends View implements ILrcView { /** * 所有的歌词 ***/ private List<LrcRow> mLrcRows; /** * 无歌词数据的时候 显示的默认文字 **/ private static final String DEFAULT_TEXT = "暂时没有歌词"; /** * 默认文字的字体大小 **/ private static final float SIZE_FOR_DEFAULT_TEXT = CommonUtils.dip2px(MainApplication.context,17); /** * 画高亮歌词的画笔 ***/ private Paint mPaintForHighLightLrc; /** * 高亮歌词的默认字体大小 ***/ private static final float DEFAULT_SIZE_FOR_HIGHT_LIGHT_LRC = CommonUtils.dip2px(MainApplication.context,15); /** * 高亮歌词当前的字体大小 ***/ private float mCurSizeForHightLightLrc = DEFAULT_SIZE_FOR_HIGHT_LIGHT_LRC; /** * 高亮歌词的默认字体颜色 **/ private static final int DEFAULT_COLOR_FOR_HIGHT_LIGHT_LRC = 0xffffffff; /** * 高亮歌词当前的字体颜色 **/ private int mCurColorForHightLightLrc = DEFAULT_COLOR_FOR_HIGHT_LIGHT_LRC; /** * 画其他歌词的画笔 ***/ private Paint mPaintForOtherLrc; /** * 其他歌词的默认字体大小 ***/ private static final float DEFAULT_SIZE_FOR_OTHER_LRC = CommonUtils.dip2px(MainApplication.context,15); /** * 其他歌词当前的字体大小 ***/ private float mCurSizeForOtherLrc = DEFAULT_SIZE_FOR_OTHER_LRC; /** * 其他歌词的默认字体颜色 **/ private static final int DEFAULT_COLOR_FOR_OTHER_LRC = 0x80ffffff; /** * 其他歌词当前的字体颜色 **/ private int mCurColorForOtherLrc = DEFAULT_COLOR_FOR_OTHER_LRC; /** * 画时间线的画笔 ***/ private Paint mPaintForTimeLine; /*** * 时间线的颜色 **/ private static final int COLOR_FOR_TIME_LINE = 0xff999999; /** * 时间文字大小 **/ private static final int SIZE_FOR_TIME = CommonUtils.dip2px(MainApplication.context,12); /** * 是否画时间线 **/ private boolean mIsDrawTimeLine = false; /** * 歌词间默认的行距 **/ private static final float DEFAULT_PADDING = CommonUtils.dip2px(MainApplication.context,17); /** * 歌词当前的行距 **/ private float mCurPadding = DEFAULT_PADDING; /** * 歌词的最大缩放比例 **/ public static final float MAX_SCALING_FACTOR = 1.5f; /** * 歌词的最小缩放比例 **/ public static final float MIN_SCALING_FACTOR = 0.5f; /** * 默认缩放比例 **/ private static final float DEFAULT_SCALING_FACTOR = 1.0f; /** * 歌词的当前缩放比例 **/ private float mCurScalingFactor = DEFAULT_SCALING_FACTOR; /** * 实现歌词竖直方向平滑滚动的辅助对象 **/ private Scroller mScroller; /*** * 移动一句歌词的持续时间 **/ private static final int DURATION_FOR_LRC_SCROLL = 1500; /*** * 停止触摸时 如果View需要滚动 时的持续时间 **/ private static final int DURATION_FOR_ACTION_UP = 400; /** * 控制文字缩放的因子 **/ private float mCurFraction = 0; private int mTouchSlop; private Bitmap arrowBitmap; public LrcView(Context context) { super(context); init(context); } public LrcView(Context context, AttributeSet attrs) { super(context, attrs); init(context); } /** * 初始化画笔等 */ @Override public void init(Context context) { mScroller = new Scroller(getContext()); mPaintForHighLightLrc = new Paint(); mPaintForHighLightLrc.setColor(mCurColorForHightLightLrc); mPaintForHighLightLrc.setTextSize(mCurSizeForHightLightLrc); mPaintForHighLightLrc.setAntiAlias(true); mPaintForOtherLrc = new Paint(); mPaintForOtherLrc.setColor(mCurColorForOtherLrc); mPaintForOtherLrc.setTextSize(mCurSizeForOtherLrc); mPaintForOtherLrc.setAntiAlias(true); mPaintForTimeLine = new Paint(); mPaintForTimeLine.setColor(COLOR_FOR_TIME_LINE); mPaintForTimeLine.setTextSize(SIZE_FOR_TIME); mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); BitmapFactory.Options options = new BitmapFactory.Options(); options.inDensity = 30; options.inTargetDensity = 30; arrowBitmap = BitmapFactory.decodeResource(context.getResources(), R.raw.lrc_arrow, options); } private int mTotleDrawRow; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mLrcRows == null || mLrcRows.size() == 0) { //画默认的显示文字 mPaintForOtherLrc.setTextSize(SIZE_FOR_DEFAULT_TEXT); float textWidth = mPaintForOtherLrc.measureText(DEFAULT_TEXT); float textX = (getWidth() - textWidth) / 2; canvas.drawText(DEFAULT_TEXT, textX, getHeight() / 2, mPaintForOtherLrc); return; } if (mTotleDrawRow == 0) { //初始化将要绘制的歌词行数 mTotleDrawRow = (int) (getHeight() / (mCurSizeForOtherLrc + mCurPadding)) + 4; } //因为不需要将所有歌词画出来 int minRaw = mCurRow - (mTotleDrawRow - 1) / 2; int maxRaw = mCurRow + (mTotleDrawRow - 1) / 2; minRaw = Math.max(minRaw, 0); //处理上边界 maxRaw = Math.min(maxRaw, mLrcRows.size() - 1); //处理下边界 //实现渐变的最大歌词行数 int count = Math.max(maxRaw - mCurRow, mCurRow - minRaw); if (count == 0) { return; } //两行歌词间字体颜色变化的透明度 int alpha = (0xFF - 0x11) / count; //画出来的第一行歌词的y坐标 float rowY = getHeight() / 2 + minRaw * (mCurSizeForOtherLrc + mCurPadding); for (int i = minRaw; i <= maxRaw; i++) { if (i == mCurRow) {//画高亮歌词 //因为有缩放效果,所有需要动态设置歌词的字体大小 float textSize = mCurSizeForOtherLrc + (mCurSizeForHightLightLrc - mCurSizeForOtherLrc) * mCurFraction; mPaintForHighLightLrc.setTextSize(textSize); String text = mLrcRows.get(i).getContent();//获取到高亮歌词 float textWidth = mPaintForHighLightLrc.measureText(text);//用画笔测量歌词的宽度 if (textWidth > getWidth()) { //如果歌词宽度大于view的宽,则需要动态设置歌词的起始x坐标,以实现水平滚动 canvas.drawText(text, mCurTextXForHighLightLrc, rowY, mPaintForHighLightLrc); } else { //如果歌词宽度小于view的宽,则让歌词居中显示 float textX = (getWidth() - textWidth) / 2; canvas.drawText(text, textX, rowY, mPaintForHighLightLrc); } } else { if (i == mLastRow) {//画高亮歌词的上一句 //因为有缩放效果,所有需要动态设置歌词的字体大小 float textSize = mCurSizeForHightLightLrc - (mCurSizeForHightLightLrc - mCurSizeForOtherLrc) * mCurFraction; mPaintForOtherLrc.setTextSize(textSize); } else {//画其他的歌词 mPaintForOtherLrc.setTextSize(mCurSizeForOtherLrc); } String text = mLrcRows.get(i).getContent(); float textWidth = mPaintForOtherLrc.measureText(text); float textX = (getWidth() - textWidth) / 2; //如果计算出的textX为负数,将textX置为0(实现:如果歌词宽大于view宽,则居左显示,否则居中显示) textX = Math.max(textX, 0); //实现颜色渐变 从0xFFFFFFFF 逐渐变为 0x11FFFFFF(颜色还是白色,只是透明度变化) int curAlpha = 255 - (Math.abs(i - mCurRow) - 1) * alpha; //求出当前歌词颜色的透明度 //mPaintForOtherLrc.setColor(0x1000000*curAlpha+0xffffff); canvas.drawText(text, textX, rowY, mPaintForOtherLrc); } //计算出下一行歌词绘制的y坐标 rowY += mCurSizeForOtherLrc + mCurPadding; } //画时间线和时间 if (mIsDrawTimeLine) { float y = getHeight() / 2 + getScrollY(); float x = getWidth(); canvas.drawBitmap(arrowBitmap, -20, y - 41, null); canvas.drawText(mLrcRows.get(mCurRow).getTimeStr().substring(0, 5), x - 105, y + 13, mPaintForTimeLine); canvas.drawLine(60, y, getWidth() - 110, y, mPaintForTimeLine); } } /** * 是否可拖动歌词 **/ private boolean canDrag = false; /** * 事件的第一次的y坐标 **/ private float firstY; /** * 事件的上一次的y坐标 **/ private float lastY; private float lastX; @Override public boolean onTouchEvent(MotionEvent event) { if (mLrcRows == null || mLrcRows.size() == 0) { return false; } switch (event.getAction()) { case MotionEvent.ACTION_DOWN: firstY = event.getRawY(); lastX = event.getRawX(); break; case MotionEvent.ACTION_MOVE: if (!canDrag) { if (Math.abs(event.getRawY() - firstY) > mTouchSlop && Math.abs(event.getRawY() - firstY) > Math.abs(event.getRawX() - lastX)) { canDrag = true; mIsDrawTimeLine = true; mScroller.forceFinished(true); stopScrollLrc(); mCurFraction = 1; } lastY = event.getRawY(); } if (canDrag) { float offset = event.getRawY() - lastY;//偏移量 if (getScrollY() - offset < 0) { if (offset > 0) { offset = offset / 3; } } else if (getScrollY() - offset > mLrcRows.size() * (mCurSizeForOtherLrc + mCurPadding) - mCurPadding) { if (offset < 0) { offset = offset / 3; } } scrollBy(getScrollX(), -(int) offset); lastY = event.getRawY(); int currentRow = (int) (getScrollY() / (mCurSizeForOtherLrc + mCurPadding)); currentRow = Math.min(currentRow, mLrcRows.size() - 1); currentRow = Math.max(currentRow, 0); seekTo(mLrcRows.get(currentRow).getTime(), false, false); return true; } lastY = event.getRawY(); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: if (!canDrag) { if (onLrcClickListener != null) { onLrcClickListener.onClick(); } } else { if (onSeekToListener != null && mCurRow != -1) { onSeekToListener.onSeekTo(mLrcRows.get(mCurRow).getTime()); } if (getScrollY() < 0) { smoothScrollTo(0, DURATION_FOR_ACTION_UP); } else if (getScrollY() > mLrcRows.size() * (mCurSizeForOtherLrc + mCurPadding) - mCurPadding) { smoothScrollTo((int) (mLrcRows.size() * (mCurSizeForOtherLrc + mCurPadding) - mCurPadding), DURATION_FOR_ACTION_UP); } canDrag = false; mIsDrawTimeLine = false; invalidate(); } break; } return true; } /** * 为LrcView设置歌词List集合数据 */ @Override public void setLrcRows(List<LrcRow> lrcRows) { reset(); this.mLrcRows = lrcRows; invalidate(); } /** * 当前高亮歌词的行号 **/ private int mCurRow = -1; /** * 上一次的高亮歌词的行号 **/ private int mLastRow = -1; @Override public void seekTo(int progress, boolean fromSeekBar, boolean fromSeekBarByUser) { if (mLrcRows == null || mLrcRows.size() == 0) { return; } //如果是由seekbar的进度改变触发 并且这时候处于拖动状态,则返回 if (fromSeekBar && canDrag) { return; } for (int i = mLrcRows.size() - 1; i >= 0; i--) { if (progress >= mLrcRows.get(i).getTime()) { if (mCurRow != i) { mLastRow = mCurRow; mCurRow = i; log("mCurRow=i=" + mCurRow); if (fromSeekBarByUser) { if (!mScroller.isFinished()) { mScroller.forceFinished(true); } scrollTo(getScrollX(), (int) (mCurRow * (mCurSizeForOtherLrc + mCurPadding))); } else { smoothScrollTo((int) (mCurRow * (mCurSizeForOtherLrc + mCurPadding)), DURATION_FOR_LRC_SCROLL); } //如果高亮歌词的宽度大于View的宽,就需要开启属性动画,让它水平滚动 float textWidth = mPaintForHighLightLrc.measureText(mLrcRows.get(mCurRow).getContent()); log("textWidth=" + textWidth + "getWidth()=" + getWidth()); if (textWidth > getWidth()) { if (fromSeekBarByUser) { mScroller.forceFinished(true); } log("开始水平滚动歌词:" + mLrcRows.get(mCurRow).getContent()); startScrollLrc(getWidth() - textWidth, (long) (mLrcRows.get(mCurRow).getTotalTime() * 0.6)); } invalidate(); } break; } } } /** * 控制歌词水平滚动的属性动画 ***/ private ValueAnimator mAnimator; /** * 开始水平滚动歌词 * * @param endX 歌词第一个字的最终的x坐标 * @param duration 滚动的持续时间 */ private void startScrollLrc(float endX, long duration) { if (mAnimator == null) { mAnimator = ValueAnimator.ofFloat(0, endX); mAnimator.addUpdateListener(updateListener); } else { mCurTextXForHighLightLrc = 0; mAnimator.cancel(); mAnimator.setFloatValues(0, endX); } mAnimator.setDuration(duration); mAnimator.setStartDelay((long) (duration * 0.3)); //延迟执行属性动画 mAnimator.start(); } /** * 停止歌词的滚动 */ private void stopScrollLrc() { if (mAnimator != null) { mAnimator.cancel(); } mCurTextXForHighLightLrc = 0; } /** * 高亮歌词当前的其实x轴绘制坐标 **/ private float mCurTextXForHighLightLrc; /*** * 监听属性动画的数值值的改变 */ AnimatorUpdateListener updateListener = new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { //TODO mCurTextXForHighLightLrc = (Float) animation.getAnimatedValue(); log("mCurTextXForHighLightLrc=" + mCurTextXForHighLightLrc); invalidate(); } }; /** * 设置歌词的缩放比例 */ @Override public void setLrcScalingFactor(float scalingFactor) { mCurScalingFactor = scalingFactor; mCurSizeForHightLightLrc = DEFAULT_SIZE_FOR_HIGHT_LIGHT_LRC * mCurScalingFactor; mCurSizeForOtherLrc = DEFAULT_SIZE_FOR_OTHER_LRC * mCurScalingFactor; mCurPadding = DEFAULT_PADDING * mCurScalingFactor; mTotleDrawRow = (int) (getHeight() / (mCurSizeForOtherLrc + mCurPadding)) + 3; log("mRowTotal=" + mTotleDrawRow); scrollTo(getScrollX(), (int) (mCurRow * (mCurSizeForOtherLrc + mCurPadding))); invalidate(); mScroller.forceFinished(true); } /** * 重置 */ @Override public void reset() { if (!mScroller.isFinished()) { mScroller.forceFinished(true); } mLrcRows = null; scrollTo(getScrollX(), 0); invalidate(); } /** * 平滑的移动到某处 * * @param dstY */ private void smoothScrollTo(int dstY, int duration) { int oldScrollY = getScrollY(); int offset = dstY - oldScrollY; mScroller.startScroll(getScrollX(), oldScrollY, getScrollX(), offset, duration); invalidate(); } @Override public void computeScroll() { if (!mScroller.isFinished()) { if (mScroller.computeScrollOffset()) { int oldY = getScrollY(); int y = mScroller.getCurrY(); if (oldY != y && !canDrag) { scrollTo(getScrollX(), y); } mCurFraction = mScroller.timePassed() * 3f / DURATION_FOR_LRC_SCROLL; mCurFraction = Math.min(mCurFraction, 1F); invalidate(); } } } /** * 返回当前的歌词缩放比例 * * @return */ public float getmCurScalingFactor() { return mCurScalingFactor; } private OnSeekToListener onSeekToListener; public void setOnSeekToListener(OnSeekToListener onSeekToListener) { this.onSeekToListener = onSeekToListener; } public interface OnSeekToListener { void onSeekTo(int progress); } private OnLrcClickListener onLrcClickListener; public void setOnLrcClickListener(OnLrcClickListener onLrcClickListener) { this.onLrcClickListener = onLrcClickListener; } public interface OnLrcClickListener { void onClick(); } public void log(Object o) { Log.d("LrcView", o + ""); } }