_android effect of Android imitation bucket fish Live

I remember a friend who had asked me in my public number, how to achieve the function of playing screen like live? Now live broadcast industry is really very hot ah, big and small companies have to dabble in the field of live, with the words of Dou fish, now is the Battle of the Thousand sowing. And the barrage is undoubtedly one of the most important functions of live broadcast, so today, I will bring you together to achieve a simple Android end of the screen effect.

Analysis

First, let's take a look at the effect of the barrage on the fish, as shown in the following illustration:

This is a DOTA2 game Live interface, we can see that the game screen at the top of a lot of play screen, watching the live audience is here for discussion.

So how do you implement an interface like this? It's not complicated, we just need to put a view of the game interface in the layout first, and then overlay a view on the top of the game screen to show the play screen. The view of the screen must be made completely transparent, so that even if the top of the game screen will not affect the normal view of the game, only when someone sends a barrage message, then the message is drawn to the view of the barrage can be. The schematic diagram looks like this:

But we have to be able to see the screen can also play the screen, so we have to again in the view of the screen to cover a view of the interface, and then we can play in the operating interface of the screen, gifts and so on. The schematic diagram looks like this:

So we have the basic principle of implementation analysis, let's start with a step-by-step implementation.

Realize video Playback

As the theme of this article is to achieve the effect of the curtain, does not involve any other functions live, so here we simply use Videoview play a local video to simulate the bottom of the game interface.

Start by using Android Studio to create a new Danmutest project, and then modify the code in Activity_main.xml as follows:

<relativelayout
  xmlns:android= "http://schemas.android.com/apk/res/android"
  android:id= "@+id/ Activity_main "
  android:layout_width=" match_parent "
  android:layout_height=" Match_parent "
  android: background= "#000" >
  <videoview
    android:id= "@+id/video_view android:layout_width=" Match_
    Parent "
    android:layout_height=" wrap_content "
    android:layout_centerinparent=" true "/>
</ Relativelayout>

The code for the layout file is very simple, there is only one videoview, and we set it to be centered.
Then modify the code in the mainactivity as follows:

public class Mainactivity extends appcompatactivity {@Override protected void onCreate (Bundle savedinstancestate) {
    Super.oncreate (savedinstancestate);
    Setcontentview (R.layout.activity_main);
    Videoview Videoview = (videoview) Findviewbyid (R.id.video_view);
    Videoview.setvideopath (Environment.getexternalstoragedirectory () + "/pixels.mp4");
  Videoview.start ();
    @Override public void Onwindowfocuschanged (Boolean hasfocus) {super.onwindowfocuschanged (hasfocus);
      if (Hasfocus && Build.VERSION.SDK_INT >=) {View Decorview = GetWindow (). Getdecorview (); Decorview.setsystemuivisibility (view.system_ui_flag_layout_stable | view.system_ui_flag_layout_hide_navigation | View.system_ui_flag_layout_fullscreen | view.system_ui_flag_hide_navigation | View.system_ui_flag_fullscreen |
    View.system_ui_flag_immersive_sticky); }
  }
}

The most basic usage of videoview is used in the above code. An instance of Videoview is obtained in the OnCreate () method, the address of a video file is set, and the start () method is called to begin playback. Of course, I've already prepared a video file called Pixels.mp4 in the SD's root directory.

The function of SD card is used here, but for the sake of code simplicity, I do not add the Run-time permission processing, therefore must remember to assign your project the targetsdkversion to be below 23.

In addition, in order for the video playback to have the best experience effect, the immersion mode is used here. Friends who don't understand immersion mode can refer to my previous article on the Android status bar micro trick that takes you to really understand immersion mode.

Finally, we set the activity in Androidmanifest.xml to display horizontally and add a permission declaration, as follows:

<manifest xmlns:android= "http://schemas.android.com/apk/res/android"
     package= " Com.example.guolin.danmutest ">
  <uses-permission android:name=" android.permission.WRITE_EXTERNAL_ STORAGE "/>
  <application
    android:allowbackup=" true "
    android:icon=" @mipmap/ic_launcher "
    Android:label= "@string/app_name"
    android:supportsrtl= "true"
    android:theme= "@style/apptheme" >
    <activity android:name= ". Mainactivity "android:screenorientation=" Landscape "
         android:configchanges=" orientation|keyboardhidden| Screenlayout|screensize ">
      <intent-filter>
        <action android:name=" Android.intent.action.MAIN "/>
        <category android:name=" Android.intent.category.LAUNCHER "/>"
      </intent-filter>
    </activity>
  </application>
</manifest>

OK, now you can run the project, the program will start to play automatically after the video, the effect shown in the following figure:

This allows us to implement the first step of the function.

Achieve the effect of the bomb screen

Next we start to achieve the effect of the play screen. The screen is actually a custom view, which can display a text effect similar to a marquee. Comments from viewers will be displayed on the screen, but they will move quickly out of the picture, which can play an interactive role without affecting the normal viewing of the video.

We can write this custom view on our own, and of course we can directly use open source projects on the web. So in order to be able to achieve the effect of the screen quickly and easily, I am prepared to use the danmakuflamemaster of the open source of the barrage effect library directly from the Beep mile.

Danmakuflamemaster Library's Project home address is: Https://github.com/Bilibili/DanmakuFlameMaster

Now it's really a great way to use Android studio to introduce some open source libraries, just add the source library dependencies to the Build.gradle file. Then we modify the App/build.gradle file and add the following dependencies in the dependencies closure:

dependencies {
  Compile filetree (dir: ' Libs ', include: [' *.jar '])
  compile ' com.android.support:appcompat-v7 : 24.2.1 '
  testcompile ' junit:junit:4.12 '
  compile ' com.github.ctiao:danmakuflamemaster:0.5.3 '
}

This allows us to introduce the Danmakuflamemaster library into the current project. Then modify the code in the Activity_main.xml as follows:

<relativelayout
  xmlns:android= "http://schemas.android.com/apk/res/android"
  android:id= "@+id/ Activity_main "
  android:layout_width=" match_parent "
  android:layout_height=" Match_parent "
  android: background= "#000" >
  <videoview
    android:id= "@+id/video_view android:layout_width=" Match_
    Parent "
    android:layout_height=" wrap_content "
    android:layout_centerinparent=" true "/>
  < Master.flame.danmaku.ui.widget.DanmakuView
    android:id= "@+id/danmaku_view"
    android:layout_width= " Match_parent "
    android:layout_height=" match_parent "/>
</RelativeLayout>

As you can see, a Danmakuview control is added to the relativelayout, which is used to display the information of the barrage. Note Be sure to write the Danmakuview under Videoview, because the controls that are added after relativelayout are overwritten.

Next, modify the code in Mainactivity, where we add the logic of the barrage display, as follows:

public class Mainactivity extends Appcompatactivity {private Boolean Showdanmaku;
  Private Danmakuview Danmakuview;
  Private Danmakucontext Danmakucontext; Private Basedanmakuparser parser = new Basedanmakuparser () {@Override protected Idanmakus parse () {return
    New Danmakus ();
  }
  };
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.activity_main);
    Videoview Videoview = (videoview) Findviewbyid (R.id.video_view);
    Videoview.setvideopath (Environment.getexternalstoragedirectory () + "/pixels.mp4");
    Videoview.start ();
    Danmakuview = (Danmakuview) Findviewbyid (R.id.danmaku_view);
    Danmakuview.enabledanmakudrawingcache (TRUE); Danmakuview.setcallback (New Drawhandler.callback () {@Override public void prepared () {Showdanmaku =
        True
        Danmakuview.start ();
      Generatesomedanmaku (); } @Override public void UpdatetimER (danmakutimer timer) {} @Override public void Danmakushown (Basedanmaku danmaku) {} @Over
    Ride public void drawingfinished () {}});
    Danmakucontext = Danmakucontext.create ();
  Danmakuview.prepare (parser, Danmakucontext); /** * Add a bullet screen to the view of the barrage * @param content * Specific contents of the barrage * @param withborder * The frame has a border/private V OID Adddanmaku (String content, Boolean withborder) {Basedanmaku Danmaku = DanmakuContext.mDanmakuFactory.createDanmak
    U (BASEDANMAKU.TYPE_SCROLL_RL);
    Danmaku.text = content;
    danmaku.padding = 5;
    Danmaku.textsize = sp2px (20);
    Danmaku.textcolor = Color.White;
    Danmaku.settime (Danmakuview.getcurrenttime ());
    if (withborder) {danmaku.bordercolor = Color.green;
  } danmakuview.adddanmaku (Danmaku);
      /** * Randomly generated some bullet screen content for testing/private void Generatesomedanmaku () {New Thread (new Runnable () {@Override public void Run () {while (SHO)Wdanmaku) {int time = new Random (). Nextint (300);
          String content = "" + Time + time;
          Adddanmaku (content, false);
          try {thread.sleep (time);
          catch (Interruptedexception e) {e.printstacktrace ();
  }}}). Start ();
   }/** * SP to px method.
    * * public int sp2px (float spvalue) {final float Fontscale = getresources (). Getdisplaymetrics (). scaleddensity;
  return (int) (Spvalue * fontscale + 0.5f);
    } @Override protected void OnPause () {super.onpause ();
    if (Danmakuview!= null && danmakuview.isprepared ()) {danmakuview.pause ();
    }} @Override protected void Onresume () {super.onresume (); if (Danmakuview!= null && danmakuview.isprepared () && danmakuview.ispaused ()) {Danmakuview.resume (
    );
    }} @Override protected void OnDestroy () {Super.ondestroy ();
    Showdanmaku = false; if (Danmakuview!= null){danmakuview.release ();
    Danmakuview = null; }
  }
  ......
}

As you can see, in the OnCreate () method We first get an instance of the Danmakuview control and then call the Enabledanmakudrawingcache () method to elevate the rendering efficiency and call the Setcallback () method to set the callback function.

The Danmakucontext.create () method is then invoked to create an Danmakucontext instance, Danmakucontext can be used to set the various global configurations for the barrage, such as setting the font, setting the maximum number of rows, and so on. We don't have any special requirements here, so everything stays the default.

In addition, we need to create a screen of the parser to do, here directly created a global basedanmakuparser.

With Danmakucontext and Basedanmakuparser, we can then invoke the Danmakuview prepare () method for preparation, which automatically invokes the prepared () method in the callback function just set. We then call the Danmakuview start () method here, so that Danmakuview can start working properly.

Although Danmakuview is already working, but there is no information on the screen, we do not see the effect, so we have to add a bullet screen message function.

Observe the Adddanmaku () method, which is used to add a barrage message to the Danmakuview. It first calls the Createdanmaku () method to create a Basedanmaku instance, type_scroll_rl that this is a scroll from right to left, and then we can configure the contents of the screen, font size, color, display time, and other details. Note that there is a withborder parameter in the Adddanmaku () method that specifies whether the screen message has a border, so that you can distinguish between the barrage that you send and the barrage that someone sends.

So we have the most basic function of the screen is done, now only need to be sent when the other people send the barrage message, call the Adddanmaku () method to add this screen to the Danmakuview on it. But receiving messages from others involves instant messaging, which is clearly unlikely to be explained by the complex instant messaging technology, so I wrote a Generatesomedanmaku () method to randomly generate some barrage messages, This would simulate the effect of a barrage of fish.

In addition, we need to do some logical processing in the OnPause (), Onresume (), OnDestroy () methods to ensure that Danmakuview resources are released.

Now rerun the program, as shown in the following illustration:

So we have the second step of the function also achieved.

Join the Operator interface

So let's start with the third step function and add the interface of the action to send the barrage message.

First modify the code in the Activity_main.xml, as follows:

 <relativelayout xmlns:android= "Http://schemas.android.com/apk/res/android" Android:id= "@+id/activity_main" android:layout_width= "match_parent" android:layout_height= "Match_parent" Android: background= "#000" > ... <linearlayout android:id= "@+id/operation_layout android:layout_width=" match_p Arent "android:layout_height=" 50DP "android:layout_alignparentbottom=" true "android:background=" #fff "Andr Oid:visibility= "Gone" > <edittext android:id= "@+id/edit_text" android:layout_width= "0DP" Androi
      d:layout_height= "Match_parent" android:layout_weight= "1"/> <button android:id= "@+id/send" Android:layout_width= "Wrap_content" android:layout_height= "match_parent" android:text= "Send"/> </L Inearlayout> </relativelayout> 

As you can see, here we have added a linearlayout to act as an interface. There are no complex controls in the LinearLayout, only one edittext for input and one button for sending the barrage. Note that we initially hide the linearlayout, because the interface is not allowed to block the Videoview, only when users want to play the screen should be displayed.

Next, modify the code in Mainactivity to add the logic for sending the barrage here, as follows:

public class Mainactivity extends Appcompatactivity {... @Override protected void onCreate (Bundle savedinstance
    State) {super.oncreate (savedinstancestate);
    ... final linearlayout operationlayout = (linearlayout) Findviewbyid (r.id.operation_layout);
    Final Button send = (Button) Findviewbyid (r.id.send);
    Final EditText EditText = (edittext) Findviewbyid (R.id.edit_text);
        Danmakuview.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (view view) {
        if (operationlayout.getvisibility () = = View.gone) {operationlayout.setvisibility (view.visible);
        else {operationlayout.setvisibility (view.gone);
    }
      }
    });  Send.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (view view) {String
        Content = Edittext.gettext (). toString (); if (!
          Textutils.isempty (content)) {Adddanmaku (content, true); EditText.SetText ("");
    }
      }
    });
      GetWindow (). Getdecorview (). Setonsystemuivisibilitychangelistener (New View.onsystemuivisibilitychangelistener () { @Override public void Onsystemuivisibilitychange (int visibility) {if visibility = = View.system_ui_flag_vis
        ible) {onwindowfocuschanged (true);
  }
      }
    }); }
  ......
}

The logic here is relatively simple, we first set a click event for Danmakuview, when clicked on the screen will trigger the Click event. Then, if the operating interface is hidden, it will be displayed, if the operating interface is shown to hide it, so you can simply click on the screen to achieve the hidden and display of the Operation interface.

Next we register a click event for the Send button, get the input in EditText when you click Send, and then call the Adddanmaku () method to add the message to Danmakuview. In addition, this barrage is sent by ourselves, so the second argument to the Adddanmaku () method passes in true.

Finally, because the system input method pop-up will cause focus loss, so as to exit the immersion mode, so here is also the overall system of the UI changes are monitored to ensure that the program can always be immersed mode.

So we're done with all the code, and now we can run a little bit to see the end result. Because the movie playback at the same time as the GIF screenshot generated by the file is too large to upload, so here I was in the movie paused to operate. The effect is shown in the following illustration:

As you can see, the barrage we send ourselves is surrounded by a green border that is easy to separate from the rest of the barrage.

So we have the function of the third step also achieved.

Although now we have successfully achieved a very good effect of the curtain, but in fact this is only the Danmakuflamemaster library provides the most basic functions. It's a beep. This barrage provides an extremely rich array of features, including various bullet screen styles, special effects, and more. However, the main goal of this article is to take you to understand the effect of the play screen, not to danmakuflamemaster this library for a comprehensive analysis. If you are interested in this library, you can go to its GitHub homepage to learn more usage.

The above is a small set to introduce the Android imitation Dou fish live play effect, I hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!