Android custom view to achieve bullet screen effect

There are bullet screen functions in many live videos, but there are no simple and easy-to-use bullet screen controls on Android. This paper introduces a demo of custom bullet screen view.

design sketch:

Idea:

1. The user-defined textitem class represents the information of the bullet screen. 2. The user-defined view inherits the view and uses ArrayList to save each textitem. 3. Randomly generate coordinate points to draw each textitem, and constantly transform the abscissa of text to realize the scrolling of the bullet screen

First, create a barrage class. The barrage includes coordinates, color, scroll speed, and text content:

public class Textitem {
 private String content;
 private float fx;
 private float fy;
 private float perstep;
 private int textcolor;

 public Textitem(String content,float fx,float fy,float perstep,int textcolor){
  this.content = content;
  this.fx = fx;
  this.fy = fy;
  this.perstep = perstep;
  this.textcolor = textcolor;
 }

 public String getContent(){
  return content;
 }

 public void setContent(String content){
  this.content = content;
 }

 public int getTextcolor(){
  return textcolor;
 }

 public void setTextcolor(int textcolor){
  this.textcolor = textcolor;
 }

 public float getFx(){
   return fx;
 }

 public void setFx(float fx){
  this.fx = fx;
 }

 public float getFy(){
  return fy;
 }

 public void setFy(float fy){
  this.fy = fy;
 }

 public float getPerstep(){
  return perstep;
 }

 public void setPerstep(){
  fx -= perstep;
 }
}

Next, customize the view and constantly change the abscissa of the barrage. You need to refresh the interface regularly and redraw text. Therefore, the runable interface is implemented. In the construction method, the thread is started to cycle continuously, and the interface is refreshed every 600 milliseconds:

public class barrageview extends View implements Runnable{

 private List<Textitem> items = new ArrayList<>();
 Random random = new Random();
 private Paint paint;

 public barrageview(Context context) {
  super(context);
  initpaint();
  new Thread(this).start();
 }

 public barrageview(Context context,AttributeSet attrs) {
  super(context,attrs);
  initpaint();
  new Thread(this).start();
 }

 public barrageview(Context context,AttributeSet attrs,int defStyleAttr) {
  super(context,attrs,defStyleAttr);
  initpaint();
  new Thread(this).start();
 }

 public void addTextitem(String content){
  float x = random.nextFloat()*getWidth();
  float y = Math.abs(random.nextFloat()*(getHeight()-50))+40;
  float step = random.nextFloat()*50;
  int r = random.nextInt(255);
  int g = random.nextInt(255);
  int b = random.nextInt(255);
  Textitem item = new Textitem(content,x,y,step,Color.rgb(r,g,b));
  items.add(item);
 }

 public void initpaint(){
  paint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
  paint.setColor(Color.RED);
  paint.setTextSize(30);
 }

 @Override
 public void draw(Canvas canvas) {
  super.draw(canvas);
  for(Textitem item:items){
   paint.setColor(item.getTextcolor());
   canvas.drawText(item.getContent(),item.getFx(),item.getFy(),paint);
  }
 }

 @Override
 public void run() {
  while(true){
   try{
    Thread.sleep(600);
    for(Textitem item:items){
     item.setPerstep();
    }
    postInvalidate();
   } catch (InterruptedException e){
    e.printStackTrace();
   }
  }
 }
}

Barrage view is to continuously obtain barrages from ArrayList for drawing. Because they are refreshed in other threads, postinvalidate is used for redrawing.

Since the demo is only implemented, many problems are not considered. There are problems:

The bullet screen is not cleared after leaving the screen, which makes the ArrayList expand continuously. You can make a judgment. If the drawing area of textitem is not in the screen, delete the item bullet screen. If there is no interaction requirement, you can use surfaceview to draw, and surfaceview can update the UI in the sub thread, The multi cache mechanism can also prevent the picture from jumping. In addition, note the call timing of the constructor of the custom view:

The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.