Android歌词显示控件TextView自定义

======================================================================================
 1. 音乐播放,音乐播放,音乐播放放入服务中,那么App 退入后台音乐也可以播放

 2. 歌词显示控件TextView自定义:
   使用控件TextView,  为什么不用Listview,歌词不可以手动滚动
 如何实现:
 2.1  根据当前播放进度找到对应歌词
 2.2. 绘制当前
 2.2. 往前计算坐标,绘制之前歌词
 2.3. 往后计算坐标,绘制之后歌词
     
 int currentPosition = musicPlayerService.getCurrentPosition();
=========歌词格式=============================================
 [00:01.79]心碎了无痕
[00:02.94]作词:MICHEAL 作曲:吴旭文
[00:04.16]演唱:张学友
[00:05.41]
[00:26.62]闭上你的眼 我的爱人
[00:32.22]吻住你吻住疑问
[00:37.71]你的心已变像落叶飞远
[00:43.65]我宁愿瞎了眼看不见
[00:47.75]
[00:48.95]求求你千千万万不要走
==================================================================
 每句歌词播放时间都有,获取当前 currentPosition 播放时间,然后去歌曲中 找 对应歌词

布局xml文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.itheima.videoplay.LyricActivity">


    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#bfa"></View>


    <Button
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#bfc"
        android:layout_alignParentBottom="true"
        android:text="下一句"
        android:gravity="center"
        android:onClick="nextSentence"
        ></Button>


    <com.itheima.videoplay.words.MyLyricView1
        android:id="@+id/mylyriceview1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/header"
        android:layout_above="@+id/footer"
        android:background="#000"
        ></com.itheima.videoplay.words.MyLyricView1>

</RelativeLayout>

 Java代码:MyLyricView1 

package com.itheima.videoplay.words;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by Administrator on 2018/11/11.
 */

public class MyLyricView1 extends TextView {

    // 歌词类
    private ArrayList<Lyric> lyrics;
    private Paint paint;
    private Paint whitepaint;
    private int width;
    private int height;
//歌词列表中的索引,是第几句歌词
    private int index=6;
//  每行的高
    private float textHeight ;
// 当前歌词内容
    private String content;
// 时间戳
    private long timePoint;
// 休眠时间或者高亮显示的时间
    private long sleepTime;
    // 当前播放位置
    private float currentPositon;


    public ArrayList<Lyric> getLyrics() {
        return lyrics;
    }

    public void setLyrics(ArrayList<Lyric> lyrics) {
        this.lyrics = lyrics;
    }

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

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

    public MyLyricView1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
    }



    public void setshowNextLyric(int currentPosition) {
//        this.currentPositon= currentPosition;
//        if(lyrics == null ||  lyrics.size() == 0 ){
//            return;
//        }
//        for (int i = 1; i < lyrics.size(); i++) {
//
//            if(currentPosition < lyrics.get(i).getTimePoint()){
//
//                int tempIndex = i - 1;
//
//                if(currentPosition >= lyrics.get(tempIndex).getTimePoint()){
//                    //当前正在播放的哪句歌词
//                    index = tempIndex;
//                    sleepTime = lyrics.get(index).getSleepTime();
//                    timePoint = lyrics.get(index).getTimePoint();
//                }
//
//            }
//        }
        currentPosition++;
        this.index=currentPosition;


        //重新绘制
        invalidate();//在主线程中
        //子线程
//        postInvalidate();
    }

    private void initView(Context context) {
        textHeight = DensityUtil.dip2px(context,18);//对应的像数
        //创建画笔 画中间内容
        paint = new Paint();
        paint.setColor(Color.GREEN);
        paint.setTextSize(DensityUtil.dip2px(context,16));
        paint.setAntiAlias(true);
        //设置居中对齐,画出来的内容会在View中居中
        paint.setTextAlign(Paint.Align.CENTER);
        // 画上下内容
        whitepaint = new Paint();
        whitepaint.setColor(Color.WHITE);
        whitepaint.setTextSize(DensityUtil.dip2px(context,16));
        whitepaint.setAntiAlias(true);
        //设置居中对齐
        whitepaint.setTextAlign(Paint.Align.CENTER);
  // 测试代码,假的歌词
        lyrics = new ArrayList<>();
        Lyric lyric = new Lyric();
        for (int i = 0; i < 1000; i++) {

            lyric.setTimePoint(1000 * i);
            lyric.setSleepTime(1500 + i);
            lyric.setContent(i + "aaaaaaaaaaaaaaa" + i);
            //把歌词添加到集合中
            lyrics.add(lyric);
            lyric = new Lyric();
        }
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(lyrics != null && lyrics.size() >0 ){
            //1. 绘制歌词:绘制当前句
            String currentText = lyrics.get(index).getContent();
            canvas.drawText(currentText, width / 2, height / 2, paint);
            // 2. 绘制前面部分
            float tempY = height / 2;//Y轴的中间坐标
            for (int i = index - 1; i >= 0; i--) {
                //每一句歌词
                String preContent = lyrics.get(i).getContent();
                tempY = tempY - textHeight;
                if (tempY < 0) {
                    break;
                }
                /****
                 *   paint.setTextAlign(Paint.Align.CENTER); 设置以后
                 *   绘制文本 坐标基于 context 的中心点
                 */
                canvas.drawText(preContent, width / 2, tempY, whitepaint);
            }
            // 3. 绘制后面部分
            tempY = height / 2;//Y轴的中间坐标
            for (int i = index + 1; i < lyrics.size(); i++) {
                //每一句歌词
                String nextContent = lyrics.get(i).getContent();
                tempY = tempY + textHeight;
                if (tempY > height) {
                    break;
                }
                canvas.drawText(nextContent, width / 2, tempY, whitepaint);
            }
        }else{
            //没有歌词
            canvas.drawText("没有歌词", width / 2, height / 2, paint);
        }
    }


}

  使用:

public class LyricActivity extends Activity {

    MyLyricView1 myLyricView1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_lyric);
        myLyricView1 = findViewById(R.id.mylyriceview1);
    }
    int index=6;
    public void nextSentence(View veiw){
        myLyricView1.setshowNextLyric(index++);
    }
}

效果图:

发布了94 篇原创文章 · 获赞 95 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/dreams_deng/article/details/104925293
今日推荐