1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > android 图片跑马灯动画 【Android自定义View】- 文本跑马灯效果

android 图片跑马灯动画 【Android自定义View】- 文本跑马灯效果

时间:2023-06-14 23:39:39

相关推荐

android 图片跑马灯动画 【Android自定义View】- 文本跑马灯效果

简介

有些时候,文字过长,或者有多条需要展示的文本时,我们需要将文本进行左右滚动,多条文本时,还得上下滚动以实现展示不同的文本内容。这时候就需要我们自定义view来实现文本跑马灯效果了。

效果图

jjj.gif

Android文本参数 - FontMetrics

当我们要自己绘制文本的时候,怎么去计算文字的宽高,有些时候将本文的绘制起点设置为文本控件的中心点,却发现绘制的文本并不是居中的,下面讲解Android中文本是怎么样确定文本的绘制起点的。基准点是baseline

Ascent是baseline之上至字符最高处的距离

Descent是baseline之下至字符最低处的距离

Leading文档说的很含糊,其实是上一行字符的descent到下一行的ascent之间的距离

Top指的是指的是最高字符到baseline的值,即ascent的最大值

bottom指的是最下字符到baseline的值,即descent的最大值

详情图

204735397.png

简化版图

ll.gif

在Android中,文字的绘制都是从Baseline处开始的,Baseline往上至字符最高处的距离我们称之为ascent(上坡度),Baseline往下至字符最底处的距离我们称之为descent(下坡度),而leading(行间距)则表示上一行字符的descent到该行字符的ascent之间的距离,top和bottom文档描述地很模糊,其实这里我们可以借鉴一下TextView对文本的绘制,TextView在绘制文本的时候总会在文本的最外层留出一些内边距,为什么要这样做?因为TextView在绘制文本的时候考虑到了类似读音符号,可能大家很久没写过拼音了已经忘了什么叫读音符号了吧……下图中的A上面的符号就是一个拉丁文的类似读音符号的东西:

gg.png

文本居中绘制://计算Baseline绘制的起点X轴坐标baseX=(int)(canvas.getWidth()/2-textPaint.measureText(TEXT)/2);//计算Baseline绘制的Y坐标baseY=(int)((canvas.getHeight()/2)-((textPaint.descent()+textPaint.ascent())/2));

canvas.drawText(TEXT,baseX,baseY,textPaint);

思路单条文本privatevoiddoSingleLineText(Canvascanvas){

viewHeight=getMeasuredHeight()+10;

viewWidth=getMeasuredWidth();

contentBound.set(0,0,0,0);

contentPaint.getTextBounds(singleText,0,singleText.length(),contentBound);

xOffset=contentBound.width()-viewWidth;

Paint.FontMetricsfontMetrics=contentPaint.getFontMetrics();inttextHeight=(int)((-fontMetrics.ascent-fontMetrics.descent)/2);

yStartPos=viewHeight/2+maxContentHeight/4+textHeight/4;if(!hasInited){

hasInited=true;

currentX=0;

xStartPos=currentX;

}if(xOffset>0){

xOffset+=contentTextSize*2;if(!isHorizontalRunning){

isHorizontalRunning=true;if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){

startHorizontalLoop();

}

}

}

canvas.drawText(singleText,currentX,yStartPos,contentPaint);

}privatevoidstartHorizontalLoop(){

ValueAnimatorhorizontalScrollAnimator;if(horizontalOriLeft){

horizontalScrollAnimator=ValueAnimator.ofFloat(0,1);

}else{

horizontalScrollAnimator=ValueAnimator.ofFloat(0,-1);

}if(horizontalScrollSpeed*xOffset/contentTextSize

isHorizontalRunning=false;return;

}

horizontalScrollAnimator.setDuration(horizontalLoopSpeed*xOffset/contentTextSize);

horizontalScrollAnimator.setInterpolator(mLinearInterpolator);

horizontalScrollAnimator.start();

horizontalScrollAnimator.addUpdateListener(mHorizontalLoopUpdateListener);

horizontalScrollAnimator.addListener(mHorizontalLoopListenerAdapter);

}

上面的逻辑其实很简单,可以自己查看,我这里随便说一下,Android文本相关的知识多条文本privatevoiddoMultiLineText(Canvascanvas){if(currentIndex>=contentList.size()){

currentIndex=0;

}

viewHeight=getMeasuredHeight();

viewWidth=getMeasuredWidth();

StringcurrentString=contentList.get(currentIndex);intnextIndex=currentIndex+1;if(currentIndex+1>=contentList.size()){

nextIndex=0;

}

StringnextString=contentList.get(nextIndex);

contentBound.set(0,0,0,0);

contentPaint.getTextBounds(currentString,0,currentString.length(),contentBound);

xOffset=contentBound.width()-viewWidth;

Paint.FontMetricsfontMetrics=contentPaint.getFontMetrics();inttextHeight=(int)((-fontMetrics.ascent-fontMetrics.descent)/2);

yStartPos=viewHeight/2+maxContentHeight/4+textHeight/4;if(!hasVerticalInited){

hasVerticalInited=true;

currentY=yStartPos;

}if(xOffset>0){//另外加点留白.设留白两个字宽

xOffset+=contentTextSize*2;if(!isHorizontalRunning&&!isVerticalRunning){

isHorizontalRunning=true;if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){

startHorizontalScroll();

}

currentX=0;

}

}else{if(!isVerticalRunning){

isVerticalRunning=true;if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){

startVerticalInterval();

}

currentX=0;

}

}

canvas.drawText(currentString,currentX,currentY,contentPaint);

canvas.drawText(nextString,0,currentY+viewHeight,contentPaint);

}

多条文本,其实是在单条文本的基础上,加了一个向上滚动的动画,当像左滚动结束后,开启向上滚动动画,同时,当前滚动动画的文本index加一,详细代码请查看源码,下面会给出完成的源码地址。

作者:奔跑的平头哥

链接:/p/2274c401dea9

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