No more nonsense, first look at the effect:

Demo address: github.com/lxykad/vert…

The first product requirement is the effect of the view with red background. The first thought of course is the world’s largest gay dating community GitHub, so found the top of the 999 run lantern effect, which is obviously not the same as the demand, forget it, their own masturbation.

I’m a bit of a lazy person, so of course I was looking for the system controls first, so I decided to use the ViewFlipper to do it, and just write in the XML layout:

<ViewFlipper
    android:id="@+id/view_flipper"
    android:layout_width="match_parent"
    android:layout_height="100dp">
</ViewFlipper>Copy the code

A few lines of code to set up and then we’re done

mFlipper.addView(tv1); mFlipper.addView(tv2); mFlipper.addView(tv3); mFlipper.setInAnimation(this, R.anim.headline_in); // Go to mFlipper. SetOutAnimation (this, r.nim.headline_out); // Out animation mFlipper. SetFlipInterval (2000); / / time mFlipper startFlipping ();Copy the code

So GIF in the middle of the effect is achieved, and JD Taobao what the popular recommendation effect of the same (UI details according to their own needs to adjust oh, do not care about these, here only to provide ideas as a reference).

But there is still a gap with the effect I want, I want to display 3 lines, no way, and then change the idea…… , recyclerView, the general idea is as follows:

1. Fix the display height of the three lines, such as 90DP

2. The height of item is fixed at 30DP, so that just 3 lines are displayed

3. Use a thread-safe message queue to store the data pushed by the server

4, write a poll (I use RXJava here), every 3 seconds to query the queue data, if the list data is less than 3, directly display. If the list contains 3 or more entries, add one and then remove the first.

The main code is as follows:

// Polls the message queue once in 3 seconds public voidstartLoop() { Observable.interval(3, TimeUnit.SECONDS) .observeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe(new Observer<Long>()  { @Override public void onSubscribe(Disposable d) { } @Override public void onNext(Long value) { System.out.println("loop==========:" + mQueue.size());
                    showMsg();
                }

                @Override
                public void onError(Throwable e) {

                }

                @Override
                public void onComplete() {}}); }Copy the code

Recyclerview display logic

 public void showMsg() {
        if (mQueue.size() == 0) {
            return;
        }

    try {
        NewsBean bean = mQueue.take();

        if (mList.size() > 2) {
            mAdapter.addData(bean);
            mAdapter.remove(0);

        } else{ mAdapter.addData(bean); } } catch (InterruptedException e) { e.printStackTrace(); }}Copy the code

It’s really easy to implement. The first time to write an article, a simple article code to more than 12 o ‘clock in the morning (good embarrassment), if it is helpful to you, trouble GitHub to give a start encouragement, [face]!