This article mainly shares the realization of the interactive effect of bullet screen, keyboard and cargo card in live broadcast

rendering

Implementation approach

Do translationY animation for the marquee area by listening to the keyboard state and merchandise card state. The idea of implementation is very simple, there are some difficult points below

  • Monitor the implementation of the keyboard state
  • How to get the height of the keyboard

Listen for the keyboard to pop up

Since Android can’t listen to the keyboard, the online solution is to use the viewTreeObserver to indirectly judge

View. The viewTreeObserver. AddOnGlobalLayoutListener {/ / here by judging the visible screen height, indirect judgment pop-up and fold}Copy the code

Why is it possible to do it this way?

So let’s take a look at thataddOnGlobalLayoutListenerWhen was it called back

You need to know a little bit about how to draw a View. This code is in line 2628 of the ViewRootImpl class (API 29).

if (triggerGlobalLayoutListener) {
    mAttachInfo.mRecomputeGlobalAttributes = false;
    mAttachInfo.mTreeObserver.dispatchOnGlobalLayout();
}
Copy the code

This callback is triggered when an Activity or Window such as Dialog finishes measuring and laying out the added layout, from which it can be inferred that the keyboard popping up and dropping must trigger the Activity’s relayout

Why does a keyboard pop-up trigger a relayout of an Activity

Android provides windowSoftInputMode for developers to configure the state of the keyboard and how the interface should fit the keyboard

// The current interface does not change, the keyboard directly overlays the interface, Not to layout so not trigger GlobalLayoutListener callback android: windowSoftInputMode = "adjustNothing" / / change the size of the current layout to adapt to the keyboard, Trigger GlobalLayoutListener callback, this configuration is very suitable for making the android: IM chat screen WeChat windowSoftInputMode = "adjustResize" / / the layout up directly to the top, Trigger GlobalLayoutListener callback android: windowSoftInputMode = "adjustPan" / / the default value, Sliding screen will be set to adjustResize, whereas adjustPan android: windowSoftInputMode = "adjustUnspecified"Copy the code

A bouncing keyboard changes the layout of the interface, so you can use the above method to determine whether the keyboard is bouncing

How to judge the keyboard bounces

A pop-up keyboard changes the viewable area of the current Window, so if the current viewable height is less than the original height, we judge that the keyboard is up

Methods in a View can be used to obtain the visible area of the Window in which the View is located

view.getWindowVisibleDisplayFrame(Rect)
Copy the code

So the original height minus the current height is the keyboard height

RecyclerView top gradient disappear effect

RecyclerView provides this property to achieve this effect. Hard dead 😂) android: requiresFadingEdge = “vertical”, but after setting this attribute android: overScrollMode = “never” did not work, so here to rewrite the RecyclerView

// Android :overScrollMode="never" style edgeEffectFactory = object: EdgeEffectFactory() { override fun createEdgeEffect(view: RecyclerView, direction: Int): EdgeEffect { return object : EdgeEffect(context) { override fun draw(canvas: Canvas): Boolean { return false } } } }Copy the code

RecyclerView Sets the maximum height

MeasureSpec = MeasureSpec = MeasureSpec = MeasureSpec = MeasureSpec = MeasureSpec = MeasureSpec = MeasureSpec = MeasureSpec

override fun onMeasure(widthSpec: Int, heightSpec: Int) {/ / set the maximum height val heightMeasureSpec = MeasureSpec. MakeMeasureSpec (maxHeight, MeasureSpec.AT_MOST) super.onMeasure(widthSpec, heightMeasureSpec) }Copy the code

Concrete implementation scheme

In the Activity of live to set up the android: windowSoftInputMode = “adjustNothing”, cannot let interface in response to the keyboard layout changes, the monitoring of the keyboard to barrage input box, box Dialog is used to implement and set up the full screen, This adds GlobalLayoutListener to the Dialog to listen for the state of the keyboard.

rendering




The code address

There are a lot of details that need to be dealt with. Here is the code address

The code address