The cause of

Here’s the thing.

When I graduated four years ago, I worked in the company’s short video project, making 🍍 videos. That was before Tiktok, but the company shut it down because the short videos were too expensive. At that time, we needed to develop the scene of vertical and horizontal live/asynchronous video, so WE studied the app on the market, and found that the interaction of input bullet screen was not friendly. The most direct experience is that wechat is smoother than most IM software when the input method and expression panel are frequently switched in the chat scene, and it does not give users a very abrupt flashing sensation. But in addition to portrait screen, we also need to be compatible with landscape/full screen/immersion and other scenes.

After a period of exploration, the result is quite good, better than the input interaction experience in the market’s live/asynchronous video playing scene. I wrote a Blog about the Android-Systemui thing. It is mainly about how to design good input interaction in vertical/vertical screen/vod scenarios. But the article wasn’t finished… Left the suspense of using PopupWindow in landscape mode… I was gonna follow it up with a second one. The result was a delay of three years.

In the past three years, I have participated in the development of more than ten projects (we are the assembly line production 😂, old tool people), and the modules involving input interaction have included IM chat, live broadcast room, asynchronous video playing page, information flow comment and so on. These pages have evolved from being implemented using activities to include fragments, dialogs, and popupWindows. So the original set of technical implementation is not enough. Slowly building up a library while looking for external open source projects/technical posts to no avail. The PanelSwitchHelper I want to recommend today, and paid off my blog debt from three years ago.

PanelSwitchHelper technical articles

On the network, a random search for “chat input box jump” will have a large number of blog posts about the same technical solution, relying on dynamic changes to the linearLayout-weight value, with Window changes to dynamically adjust the height of the content area to do not flash the effect. But it is also only not flash jump, but there will be a stiff “flicker flicker” effect. PanelSwitchHelper was also implemented earlier. The experience of wechat in the first few years is also like this. Later, the experience is getting better and better, and the transition becomes very smooth. Its plan should not be like this (personal opinion). In order to achieve such a smooth effect, I tried to optimize the original technology, but the effect was not satisfactory, because these defects were determined by the selection of technology, so I began to look for a new technical solution.

In order to better describe the following scheme, we call the input method and expression panel as the function panel.

After a period of practice, I decided to use manual Layout logic and system transition animation to achieve smooth transition “like wechat”.

The new model

We call the new implementation “content sliding mode” and the old implementation “content fixation mode”. The following figure shows the input interaction before and after switching.

  • The blue area is the content area, such as chat IM interface, the blue area is mostly the chat list of Recyclerview
  • The green area is the panel area, which is used to store functional panels, such as wechat’s emoticon interface

In sliding mode, Figure 2 shows the structure of the function panel. That is, whether the input method is displayed or not, the blue area slides up by the same amount of input method height relative to Figure 1. When switching from the input method to another function panel (such as the emoticon panel), if the original emoticon panel is already displayed under the input method, it can be seamlessly displayed.

The above ideas need to intervene in the layout logic of blue and green areas. When you switch from slide mode to slide mode, the overall height actually stays the same, while layout’s start coordinates change and the overall Bound changes. ChangeBounds can be used to smooth transitions.

The effect is roughly as follows.

It’s also very simple to use.

new PanelSwitchHelper.Builder(this)
                    .addKeyboardStateListener {}
                    .addEditTextFocusChangeListener {}
                    .addViewClickListener {}
                    .addPanelChangeListener {}
                    .contentCanScrollOutside(true)
                    .logTrack(true)                  
                    .build()	
Copy the code

In order to pursue a higher real-time experience, we also need to be compatible with users who can adjust the input method height at any time, and show/hide the navigation bar configuration at any time.

One day, the strange screen came, the gouge screen/fringe screen/full screen.

One day, issue reported that the Pad was having a bit of a fit problem.

One day, part of the use of library friends feedback said how to deal with broadcast room.

Maintain this library, basically is in view of their own interests, and generally proposed functions will be reviewed, reasonable requirements will be arranged!

“All for it!

The advantage of the library

After several iterations of the framework, the advantages are:

  1. Improved the traditional Weight+LinearLayout dynamic change layout height adaptation panel technical solution, support a variety of native ViewGroup containers
  2. In order to achieve a smoother adaptation, the function panel can be adapted in real time when the input method dynamically adjusts the height or hides the navigation bar
  3. In order to achieve a smoother switching effect, it supports sliding mode, which will be smoother, and also supports fixed mode
  4. Rich model adaptation, suitable for full screen/fringe screen/hole screen /Pad and other unconventional Phone models
  5. Rich scene support, support the Activity/fragments Dialog/PopupWindow, applied to chat/video/live/information flow comments, etc
  6. Rich API support, can customize the content container, business panel, flexible control panel hiding, flexible control panel switching speed

If you are worried about how to use it, Smaple has already combed through the scenarios and API demos you need in the most straightforward way

If you want to see more of the scene introduction, go to the scene to use the introduction

If you want to learn more about using the API, go to the API Guide

Partial scene demonstration

Finally, compare the effects of BiliBili/ Huya Live/Douyin Live/wechat moments.

BiliBili video plays scenes

Comparison result: Smoother switching than BiliBili

Douyin live scene

Comparison result: The switching is smoother than Douyin live

Tiger Teeth live scene

Comparison results: the switch is smoother than tiger teeth live

Moments comment on the scene

Comparison results: The switching effect of the circle of friends is basically the same

summary

If you’re still worried about page changes for your input scene, PanelSwitchHelper can help you solve a lot of problems. Most importantly, I can help you with any difficulties you may encounter.

If you need to develop features that involve input scenarios in the future, PanelSwitchHelper should be your first choice.

Welcome to experience, any question can be raised issue, I will reply the first time, if there is any help, 🌟.

If you are interested, you can go to my how to design and modify PanelSwitchHelper library | Combat chapter to see the source details.