最近公司有个轮播中奖信息的需求，就是那种跑马灯的效果，产品要求跑马灯不能间断，不能等到一轮播完了再播下一轮。但是textview自带的跑马灯效果很不灵活，既不能改变速度，又是间断的。于是网上找了很多那种自定义的跑马灯的例子，但是很不幸的是，目前还没找到那种不间断的跑马灯，于是我寻思着，用自己的办法来实现跑马灯，最终还是弄出来了，虽然用起来不是很方便，但是功能是实现了。
主要思想：先自定义一个surfaceView，名为MarqueeTextView，用线程来实现跑马灯效果。然后再在layout文件里面加入两个一模一样的MarqueeTextView，这两个MarqueeTextView重叠在一起，先启动第一个MarqueeTextView，让他开始播，等它的最后一个字播出来的时候，再启动第二个一个MarqueeTextView。第一个MarqueeTextView播完以后就停止，等到第二个MarqueeTextView的最后一个字播出来的时候，再启动第一个MarqueeTextView，如此循环播放，相互启动，就形成了不间断的跑马灯效果。可能说得有点绕，直接上代码，注释写详细点。
自定义的MaqueeTextView:
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.PorterDuff;
import android.os.Handler;
import android.os.Message;
import android.text.TextPaint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.WindowManager;
public class MarqueeTextView extends SurfaceView implements SurfaceHolder.Callback{
public Context mContext;
private float mTextSize = 100; //字体大小
private int mTextColor = Color.RED; //字体的颜色
private int mStartPoint;// 开始滚动的位置 0是从最左面开始 1是从最末尾开始
private int mDirection;//滚动方向 0 向左滚动 1向右滚动
private int mSpeed;//滚动速度
private SurfaceHolder holder;
private TextPaint mTextPaint;
private MarqueeViewThread mThread;
private String margueeString;
private int textWidth=0,textHeight=0;
private int ShadowColor=Color.BLACK;
public int currentX=0;// 当前x的位置
public int sepX=2;//每一步滚动的距离
public static boolean isScroling1 = false;//1是否正在滚动
public static boolean isScroling2 = false;//2是否正在滚动
public MarqueeTextView(Context context) {
this(context,null);
}
public MarqueeTextView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public MarqueeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext=context;
init(attrs, defStyleAttr);
}
private void init(AttributeSet attrs, int defStyleAttr) {
TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.MarqueeView, defStyleAttr, 0);
mTextColor = a.getColor(R.styleable.MarqueeView_textcolor, Color.RED);
mTextSize = a.getDimension(R.styleable.MarqueeView_textSize, 48);
mStartPoint=a.getInt(R.styleable.MarqueeView_startPoint,0);
mDirection=a.getInt(R.styleable.MarqueeView_direction,0);
mSpeed=a.getInt(R.styleable.MarqueeView_speed,20);
a.recycle();
holder = this.getHolder();
holder.addCallback(this);
mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setTextAlign(Paint.Align.LEFT);
setZOrderOnTop(true);//使surfaceview放到最顶层
getHolder().setFormat(PixelFormat.TRANSLUCENT);//使窗口支持透明度
}
public void setText(String msg){
if(!TextUtils.isEmpty(msg)){
measurementsText(msg);
}
}
protected void measurementsText(String msg) {
margueeString=msg;
mTextPaint.setTextSize(mTextSize);
mTextPaint.setColor(mTextColor);
mTextPaint.density = getResources().getDisplayMetrics().density;
// mTextPaint.setStrokeWidth(0.5f);
// mTextPaint.setFakeBoldText(true);
// 设定阴影(柔边, X 轴位移, Y 轴位移, 阴影颜色)
// mTextPaint.setShadowLayer(5, 3, 3, ShadowColor);
textWidth = (int)mTextPaint.measureText(margueeString);
Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
textHeight = (int) fontMetrics.bottom;
WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
int width = wm.getDefaultDisplay().getWidth();
if(mStartPoint==0)
currentX=0;
else
currentX=width-getPaddingLeft()-getPaddingRight();
}
@Override
public void surfaceCreated(SurfaceHolder holder) {
this.holder=holder;
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
if(mThread!=null)
mThread.isRun = true;
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
if(mThread!=null)
mThread.isRun = false;
}
/**
* 开始滚动
*/
public void startScroll(){
if(mThread!=null&&mThread.isRun)
return;
mThread = new MarqueeViewThread(holder);//创建一个绘图线程
mThread.start();
}
/**
* 停止滚动
*/
public void stopScroll(){
if(mThread!=null){
mThread.isRun = false;
mThread.interrupt();
}
mThread=null;
}
/**
* 线程
*/
class MarqueeViewThread extends Thread{
private SurfaceHolder holder;
public boolean isRun ;//是否在运行
public MarqueeViewThread(SurfaceHolder holder) {
this.holder =holder;
isRun = true;
}
public void onDraw() {
try {
synchronized (holder) {
if (TextUtils.isEmpty(margueeString)) {
Thread.sleep(1000);//睡眠时间为1秒
return;
}
Canvas canvas = holder.lockCanvas();
int paddingLeft = getPaddingLeft();
int paddingTop = getPaddingTop();
int paddingRight = getPaddingRight();
int paddingBottom = getPaddingBottom();
int contentWidth = getWidth() - paddingLeft - paddingRight;
int contentHeight = getHeight() - paddingTop - paddingBottom;
int centeYLine = paddingTop + contentHeight / 2;//中心线
if(mDirection==0) {//向左滚动
if(currentX<=contentWidth-textWidth){//这里是关键，当
//currentX<=contentWidth-textWidth时就启动另一个，这个靠接口来完成
//如果两轮之间间距还是有点大的话，可以在此处加或者减一个合适的距离，来调整间距大小
if(mOnMargueeListener!=null){
mOnMargueeListener.onRollOver();
}
}
if(currentX <=-textWidth){
mHandler.sendEmptyMessage(ROLL_OVER);
currentX=contentWidth;
}else{
currentX-=sepX;
}
}else {// 向右滚动
if(currentX>textWidth){
if(mOnMargueeListener!=null){
mOnMargueeListener.onRollOver();
}
}
if(currentX>=contentWidth){
mHandler.sendEmptyMessage(ROLL_OVER);
currentX=-textWidth;
}else{
currentX+=sepX;
}
}
if(canvas!=null)
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);//绘制透明色
canvas.drawText(margueeString,currentX, centeYLine+dip2px(getContext(),textHeight)/2,mTextPaint);
holder.unlockCanvasAndPost(canvas);//结束锁定画图，并提交改变。
int a=textWidth/margueeString.trim().length();
int b=a/sepX;
int c=mSpeed/b==0?1:mSpeed/b;
Thread.sleep(c);//睡眠时间为移动的频率
}
}
catch (Exception e) {
e.printStackTrace();
}
}
@Override
public void run() {
while (isRun) {
onDraw();
}
}
}
public static final int ROLL_OVER =100;
public static final int START = 101;
Handler mHandler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case ROLL_OVER:
stopScroll();
break;
}
}
};
/**
* dip转换为px
* @param context
* @param dpValue
* @return
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
public void reset(){
int contentWidth = getWidth() - getPaddingLeft() - getPaddingRight();
if(mStartPoint==0)
currentX=0;
else
currentX=contentWidth;
}
/**
* 滚动回调
*/
public interface OnMargueeListener{
void onRollOver();//滚动完毕
}
OnMargueeListener mOnMargueeListener;
public void setOnMargueeListener(OnMargueeListener mOnMargueeListener){
this.mOnMargueeListener=mOnMargueeListener;
}
}
资源文件：attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MarqueeView">
<attr name="textcolor" format="color" />
<attr name="textSize" format="dimension" />
<attr name="isRepeat" format="boolean" />
<attr name="speed" format="integer"/>
<attr name="startPoint" format="integer">
<enum name="start" value="0"/>
<enum name="end" value="1"/>
</attr>
<attr name="direction" format="integer">
<enum name="left" value="0"/>
<enum name="right" value="1"/>
</attr>
</declare-styleable>
</resources>
layout文件cativity_main.xml：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#ffffff">
<com.test.testdemo.MarqueeTextView
android:id="@+id/annoText1"
app:textcolor="#ffffff"
android:background="#000000"
app:textSize="25sp"
app:startPoint="end"
app:direction="left"
app:speed="30"
android:layout_width="1425dp"
android:layout_height="50dp"
android:layout_marginTop="5dp"
android:layout_gravity="center_vertical"/>
<com.test.testdemo.MarqueeTextView
android:id="@+id/annoText2"
app:textcolor="#ffffff"
android:background="#000000"
app:textSize="25sp"
android:layout_marginTop="5dp"
app:startPoint="end"
app:direction="left"
app:speed="30"
android:layout_width="1425dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"/>
</FrameLayout>
Activity中的调用：
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
private MarqueeTextView text1,text2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init(){
text1 = (MarqueeTextView)this.findViewById(R.id.annoText1);
text2 = (MarqueeTextView)this.findViewById(R.id.annoText2);
text1.setText("12345678hftghgqerrgmitewthenrtywrtfwert");
text2.setText("12345678hftghgqerrgmitewthenrtywrtfwert");
text1.startScroll();//先启动一个；
text1.setOnMargueeListener(new MarqueeTextView.OnMargueeListener() {
@Override
public void onRollOver() {
if(!MarqueeTextView.isScroling2) {
MarqueeTextView.isScroling2 = true;
text2.startScroll();//等接口被调用之后再启动另一个。
MarqueeTextView.isScroling1 = false;
}
}
});
text2.setOnMargueeListener(new MarqueeTextView.OnMargueeListener() {
@Override
public void onRollOver() {
if(!MarqueeTextView.isScroling1) {
MarqueeTextView.isScroling1 = true;
text1.startScroll();
MarqueeTextView.isScroling2 = false;
}
}
});
}
@Override
protected void onPause() {
text1.stopScroll();
text2.stopScroll();
super.onPause();
}
}
所有的代码都在这里了，需要的可以自行复制粘贴，应该是可以直接运行的。也可以继续进行优化的。毕竟不是很简洁。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
