Android学习笔记（二）自定义View（1）

最新推荐文章于 2024-04-20 16:34:20 发布

原创最新推荐文章于 2024-04-20 16:34:20 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#歌词自定义View显示

Android学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文分享了使用自定义View实现歌词滚动的过程及心得。详细介绍了如何利用Canvas绘制文本，并解决了绘制位置偏移等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天播放器编写没有太大的进展主要是实现了歌词在自定义View上的显示。我参考了一些大神写的自定义View的方法，加上自己的理解磕磕绊绊算是写完了，不过在将文本画到View中是遇到了一些问题，主要是Canvas的drawText()

的方法中X和Y的实际表示的位置，通过半天的验证算是搞明白了，X表示的是一个相对的坐标，它是相对于自定义View左边界的大小，同理Y是相对于自定义View上边界的大小。弄明白这个问题之后进行自定义View的就简单了很多。具体的实例如下（菜鸟写法，有很多不规范的地方还请各位提出来，相互促进相互交流）：

public class LyricListView extends View {

    //将歌词文件保存在到歌词集合<span style="white-space:pre">	</span>
    private List<Lyric> lyricList;
    private int currIndex = 0;
    private float startY;
    private float nowY;
    private float offSet;
    private float offsetY;
   
    private  Paint paint;

<pre name="code" class="html">    //自定义view在实际布局中的宽度

private int width;

<pre name="code" class="html">    //自定义view在实际布局中的高度

private int height; public LyricListView(Context context) { super(context); } public LyricListView(Context context, AttributeSet attrs) { super(context, attrs); //a = (Activity) context; this.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { } }); this.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: //手指按到屏幕上 startY = event.getY(); break; case MotionEvent.ACTION_MOVE: nowY = event.getY(); offSet = offsetY+nowY-startY; postInvalidate(); break; case MotionEvent.ACTION_UP: Log.i("YI",nowY-startY+"Y-Y"); offSet = offsetY+ nowY-startY; offsetY =offSet; startY = 0; nowY = 0; postInvalidate(); } return true; } }); } public void changeData(List<Lyric> list,int index,int height) { //height 为LyricListView 在实际布局中的高度。 this.height = height; currIndex = index; offSet = currIndex * -150; offsetY =offSet; lyricList = list; super.postInvalidate(); } public LyricListView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Log.i("NUO","Height:"+Global.SCREEN_HEIGHT+" "); paint = new Paint(); if(lyricList != null) { qukong(lyricList); for(int i=0;i<lyricList.size();i++) { if (i == currIndex) { paint.setColor(Color.WHITE); //高亮设置为20sp TypedValue..applyDimension()进行sp dp px之间的转换 float highLight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,20,getResources().getDisplayMetrics()); paint.setTextSize(highLight); } else { //普通设置为14sp float normal = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,14,getResources().getDisplayMetrics()); paint.setColor(Color.GRAY); paint.setTextSize(normal); } String lrc = lyricList.get(i).getLrc(); float textWidth = paint.measureText(lrc); Paint.FontMetrics fm = paint.getFontMetrics();//获取字体的度量（尺寸） float textHeight = fm.descent - fm.ascent; if (textWidth < height * 9 / 10) { drawText(lrc,textWidth, textHeight,i,canvas); } else { String firLrc = lrc.substring(0,lrc.length()/2); String secLrc = lrc.substring(lrc.length()/2); drawText(firLrc,paint.measureText(firLrc),textHeight,i,canvas); offSet +=150; drawText(secLrc,paint.measureText(secLrc),textHeight,i,canvas); } } } } private void drawText(String txt,float txtWidth,float txtHeight,int index,Canvas canvas ) { //经试验得到canvas中的x和y均是相对坐标，相对于自己外边界的。不是屏幕上的绝对坐标。 canvas.drawText(txt, (Global.SCREEN_WIDTH - txtWidth) / 2, (height - txtHeight) / 2 + index* 150 + 75 + offSet, paint); if(index == currIndex) { Log.i("NUO","curr"+currIndex+txt+" height:"+ ((height - txtHeight) / 2 + index* 150 + 75) +" offset:"+ "txtHeight"+offSet); } } }