700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Android歌词显示控件TextView自定义

Android歌词显示控件TextView自定义

时间:2024-02-20 18:50:34

相关推荐

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="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.itheima.videoplay.LyricActivity"><Viewandroid:id="@+id/header"android:layout_width="match_parent"android:layout_height="40dp"android:background="#bfa"></View><Buttonandroid: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.MyLyricView1android: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 /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);}@Overrideprotected 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();}}@Overrideprotected 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;@Overrideprotected 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++);}}

效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。