之前在网上有看到过iOS的弹幕效果实现,搜了一下发现Android实现弹幕效果的帖子比较少,而且写得都不是很好理解,于是尝试自己做了一下,写成这篇博客,分享出来。
最终效果展示:
实现思路:
1.自定义一个弹幕View,继承自TextView,专门用来显示一条弹幕
2.弹幕View能够自动从最右边匀速滚动到最左边
3.弹幕的颜色和大小设置为随机值
4.弹幕View的高度随机,区域在屏幕范围内
5.在Activity中循环定时加入自定义弹幕View,形成最后的弹幕
6.自定义文字资源,随机从文件资源中读取文字显示
详细过程:
1.改变应用属性为横屏,无标题栏,黑色背景在AndroidManifest.xml文件中,让MainActivity方向属性为landscape,并且加上主题设置
1 2 android:screenOrientation="landscape" 3 android:theme="@style/AppTheme"> 然后在styles.xml文件中,设置如下(parent是系统自动生成的,我用的版本比较新,可能大家的不一样,这个不要紧) 1 2.新建BarrageView 首先新建一个弹幕View,我取名为BarrageView,它继承自TextView。 需要为它实现两个构造方法和onDraw()方法。 在onDraw方法里我们绘制文字。 1 public class BarrageView extends TextView { 2 private Paint paint = new Paint(); //画布参数 34 public BarrageView(Context context) { 5 super(context);6 init();7 } 8 9 public BarrageView(Context context, AttributeSet attrs) { 10 super(context, attrs); 11 init(); 12 } 13 /** 14 * 初始化 15 */ 16 protected void init() {} 17 18 @Override 19 protected void onDraw(Canvas canvas) {20 paint.setTextSize(30);21 paint.setColor(0xffffffff); //白色 22 canvas.drawText(getText(), 0, 30, paint); 23 } 24 } PS:这里需要注意一点,就是y值我们没有设置为0而是30,是因为文字的坐标是从左下角开始算的,文字大小设为了30,y也要设为30文字才会刚刚好显示在屏幕的(0, 0)处。 我们把自定义View加到主布局中,因为需要从屏幕左侧滚动到右侧,我把宽高设置为屏幕宽高 1 2 android:layout_width="match_parent" 3 android:layout_height="match_parent" 4 android:text="hello"5 /> 3.滚动动画 移动可以用Animation动画,但是我这里用的是线程重绘,只要能实现最终效果,都是可以的。在onDraw里面新建一个线程,该线程会一直运行,每次运行主函数时会对BarrageView的x值产生影响(减少)。 1 private int posX; //x坐标 2 3 class RollThread extends Thread { 4 @Override 5 public void run() { 6 while(true) { 7 //1.动画逻辑 8 animLogic(); 9 //2.绘制图像 10 postInvalidate(); 11 //3.延迟,不然会造成执行太快动画一闪而过 12 try { 13 Thread.sleep(30); 14 } catch (InterruptedException e) { 15 e.printStackTrace(); 16 } 17 } 18 } 19 } 20 21 /** 22 * 动画逻辑处理 23 */ 24 private void animLogic() { 25 posX -= 8; 26 } 可以看到线程里面就三步,1.把x坐标减少8像素,2.调用postInvalidate()方法重绘,该方法会自动调用onDraw()方法,3.停顿30毫秒,代码执行非常快,如果不停顿的话,我们甚至看不到滚动动画。 接下来我们把滚动线程加到上面的代码里去。 在加之前,需要思考一下,我们的posX第一次绘制时应该为屏幕宽,表示从屏幕最右边开始移动,然后调用滚动线程,直到滚出屏幕。 这里要提一下getWidth()方法,这个方法如果在构造函数里面调用,得到的是0,在onDraw()方法里面调用得到的是本view的宽度,这是因为自定义View的机制,要在调用过onMeasure()后才能得到自身的宽高。 我这里用 1 private int posX; //x坐标 2 3 private int windowWidth; //屏幕宽 4 private int windowHeight; //屏幕高 5 6 private RollThread rollThread; //滚动线程 7 8 /** 9 * 初始化 10 */ 11 protected void init() { 12 //得到屏幕宽高 13 Rect rect = new Rect(); 14 getWindowVisibleDisplayFrame(rect); 15 windowWidth = rect.width(); 16 windowHeight = rect.height(); 17 18 //设置x为屏幕宽 19 posX = windowWidth; 20 } 21 22 protected void onDraw(Canvas canvas) { 23 paint.setTextSize(30); 24 paint.setColor(0xffffffff);//白色 25 canvas.drawText(getText(), posX, 30, paint); 26 27 if (rollThread == null) { 28 rollThread = new RollThread(); 29 rollThread.start(); 30 } 31 } 现在的效果是这个样子: 当弹幕从左边完全滚出时,其实线程还是在运行的,这样积累多了线程对系统负荷加大,我们需要加上判断,如果滚出了屏幕,线程也跳出while(true)循环,然后由系统自己回收。 1 class RollThread extends Thread { 2 @Override 3 public void run() { 4 while(true) { 5 6 ... 7 8 //关闭线程逻辑判断 9 if (needStopRollThread()) { 10 Log.i("azzz", getText() + " -线程停止!"); 11 break; 12 } 13 } 14 } 15 } 16 17 private boolean needStopRollThread() { 18 if (posX <= -paint.measureText(getText())) { 19 return true; 20 } 21 return false; 22 } 用paint的measureText(String text)方法来得到文字的宽度,进行判断是否需要退出线程循环。 4.随机大小和颜色 在初始化的时候,我们就给定一条弹幕一个随机的大小和颜色,使得每一条弹幕看起来都不一样。 1 private int textSize = 30; //字体大小 2 public static final int TEXT_MIN = 10; 3 public static final int TEXT_MAX = 60; 4 //字体颜色 5 private int color = 0xffffffff; 6 7 /** 8 * 初始化 9 */ 10 protected void init() { 11 //1.设置文字大小 12 textSize = TEXT_MIN + random.nextInt(TEXT_MAX - TEXT_MIN); 13 paint.setTextSize(textSize); 14 15 //2.设置文字颜色 16 color = Color.rgb(random.nextInt(256), random.nextInt(256), random.nextInt(256)); 17 paint.setColor(color); 18 19 ... 20 } 21 22 protected void onDraw(Canvas canvas) { 23 //paint.setTextSize(30); 24 //paint.setColor(0xffffffff); //白色 25 canvas.drawText(getText(), posX, 30, paint); 26 27 ... 28 } 这里得到随机数用到的是random的nextInt(n)方法,其中值域是[0,n)。 把通过随机数生成的字体大小和颜色加到paint里,在onDraw()方法里面就能起效果了。别忘了把之前在onDraw()里设置的颜色和字体大小去掉。 5.随机高度 高度也是在init()方法通过随机数生成。 1 /** 2 * 初始化 3 */ 4 protected void init() { 5 ... 6 7 //3.得到屏幕宽高 8 Rect rect = new Rect(); 9 getWindowVisibleDisplayFrame(rect); 10 windowWidth = rect.width(); 11 windowHeight = rect.height(); 12 13 //4.设置x为屏幕宽 14 posX = windowWidth; 15 16 //5.设置y为屏幕高度内内随机,需要注意的是,文字是以左下角为起始点计算坐标的,所以要加上TextSize的大小 17 posY = textSize + random.nextInt(windowHeight - textSize); 18 } 之前说过文字的坐标系是在左下角,当y为0时文字是看不到的,所以这里高度的初始化要写在文字大小的后面,在随机数前加上一个字体大小的高度,同时最大值也应该减去一个字体大小的高度,不然最大y为textSize + windowHeight就超出了屏幕显示。 6.动态生成弹幕 单条弹幕属性差不多定义完了,现在我们去MainActivity中动态加入多条弹幕。 1 //两两弹幕之间的间隔时间 2 public static final int DELAY_TIME = 800; 3 4 @Override 5 protected void onCreate(Bundle savedInstanceState) { 6 ... 7 8 //设置宽高全屏 9 final ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); 10 11 final Handler handler = new Handler(); 12 Runnable createBarrageView = new Runnable() { 13 @Override 14 public void run() { 15 //新建一条弹幕,并设置文字 16 final BarrageView barrageView = new BarrageView(MainActivity.this); 17 barrageView.setText("你好"); 18 addContentView(barrageView, lp); 19 20 //发送下一条消息 21 handler.postDelayed(this, DELAY_TIME); 22 } 23 }; 24 handler.post(createBarrageView); 25 } 在Activity中有个addContentView(view, lp)方法能够新加view到根视图下。 lp动态设置为全屏的方法是new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);handler.postDelayed(this, DELAY_TIME);的意思是弹幕出来的时间不一致,这样就不会像兵列一样整齐地出来了。 7.自定义文字资源 我们可以在string.xml中自定义字符串数组 1 private Random random = new Random(); 2 3 protected void onCreate(Bundle savedInstanceState) { 4 ... 5 6 //读取文字资源 7 final String[] texts = getResources().getStringArray(R.array.default_text_array); 8 9 Runnable createBarrageView = new Runnable() { 10 @Override 11 public void run() { 12 //新建一条弹幕,并设置文字 13 final BarrageView barrageView = new BarrageView(MainActivity.this); 14 barrageView.setText(texts[random.nextInt(texts.length)]); //随机设置文字 15 addContentView(barrageView, lp); 16 17 .. 18 } 19 }; 20 ... 21 } 好了!再来一张效果: 关于资源回收 在iOS中的UIView中有个方法叫removeFromSuperView,调用该方法就能达到资源回收的作用,在Android中没有这种方法,只能从父控件调用remove方法,我查了很久资料,也没查到是否这样做可以达到销毁View的作用,不过为此我还是在BarrageView中留了一个监听器,用来做销毁动作的。 1 /** 2 * 滚动结束接听器 3 */ 4 interface OnRollEndListener { 5 void onRollEnd(); 6 } 7 8 private OnRollEndListener mOnRollEndListener; 9 10 /** 11 * @param onRollEndListener 设置滚动结束监听器 12 */ 13 public void setOnRollEndListener(OnRollEndListener onRollEndListener) { 14 this.mOnRollEndListener = onRollEndListener; 15 } 16 17 class RollThread extends Thread { 18 @Override 19 public void run() { 20 while(true) { 21 ... 22 23 //关闭线程逻辑判断 24 if (needStopRollThread()) { 25 Log.i("azzz", getText() + " -线程停止!"); 26 if (mOnRollEndListener != null) { 27 mOnRollEndListener.onRollEnd(); 28 } 29 break; 30 } 31 } 32 } 33 } 可以在子控件中通过getParent()方法得到父控件,这样就可以直接在子控件中把自己从父控件中移除,达到回收资源的效果。 1 class RollThread extends Thread { 2 @Override 3 public void run() { 4 while(true) { 5 ... 6 7 //关闭线程逻辑判断 8 if (needStopRollThread()) { 9 ... 10 11 post(new Runnable() { //从父类中移除本view 12 @Override 13 public void run() { 14 ((ViewGroup) BarrageView.this.getParent()).removeView(BarrageView.this); 15 } 16 }); 17 break; 18 } //if-end 19 } //while-end 20 } //run-end 21 } //RollThread-end 以上注意两点: 第一:一定要在主线程调用移除方法,因为只有主线程可以更改UI。View方法本身自带post(runnable)方法能够在主线程中运行。 第二:getParent()得到的返回类型是View,而View方法并没有remove(view)方法,所以只要强制转换成ViewGroup就可以了。 来源:csdn 作者:阿曌 关注微信boxuegu 加入高校老师俱乐部,天天学干货
getWindowVisibleDisplayFrame(rect);能在初始化时就得到屏幕宽高。