Android implements the background sliding login interface (pop-up keyboard without compressing the background)

Without much nonsense, let's take a look at the effect after implementation:

Realization idea

See the effect of the GIF diagram above, and mainly list the difficulties encountered in the implementation process.

How to make the bottom login layout not blocked when the keyboard pops up;

When the keyboard pops up, how to not compress the background picture or extend the background "out of the screen";

Start with "windowsoftinputmode"

I believe we all know that there are few methods officially provided by Google to developers to control the display and hiding of soft keyboard. "Windows softinput mode" is one of the methods that we can control the pop-up mode of soft keyboard. Google's official and online tutorials say a lot about its properties. Its property value consists of two parts, such as the format of "statehidden|adjustresize". The first half (in fact, it can also be written in the back) represents the state of the soft keyboard when the set activity enters, and the second half represents how the page is adjusted when the soft keyboard pops up.

Several optional attributes and their meanings are listed below:

From the above list, we can understand the meaning of several attribute values of windowsoftinputmode. We can select appropriate attributes according to specific needs. However ! Product demand is always more wonderful than attribute. For example, we want to achieve this effect:

The soft keyboard pop-up does not block all the input layout, and does not simply leave an input box control

When the soft keyboard is bounced, the background cannot be compressed or slide up

First, let's look at the first requirement: we can use the adjustresize attribute to achieve the effect. We can see that the picture has been automatically moved upward. OK, if you are satisfied with the effect, I have nothing to say, but our boss, product and UI say that this is not good and the background cannot be compressed, which is the second requirement. At that time, I had a kind of MMP to say to them. However, as a challenging Android programmer, this small requirement is nothing.

For the second requirement, first of all, we need to understand why the picture is slid up because we have configured the adjustresize attribute. The system automatically moves the layout of the whole page upward according to the space required by the keyboard, and adjusts the size of the page layout to meet the effect that it is not hidden by the soft keyboard. For example, chestnuts:

If the height of the mobile phone screen is 1920px, the layout height of the whole activity is 1920px. After setting this property, click EditText in the interface, and a soft keyboard with a height of 800px will pop up. In order to display this soft keyboard completely, the system will adjust the height of the activity layout to 1920px-800px = 1120px. Note that the size of the layout will be adjusted here. According to previous experience, the layout automatically adjusted by the system is not the result we want, such as the nesting of various sliding views. So can this demand end according to this idea?

When windowsoftinputmode is set to adjustresize, when the layout is adjusted, the adjusted layout will be redrawn, and onmeasure, onsizechanged and onlayout will be taken.

When windowsoftinputmode is set to adjustpan, when the layout is adjusted, the adjusted layout will be redrawn, and onmeasure and onlayout will be taken.

Here, we only need to note that both go through the onmeasure method. As for adjustpan, we will explain in detail in the later article on the monitoring of soft keyboard pop-up. Then we use the onmeasure method to "prevent" the system from automatically adjusting the layout size. Since our background uses viewpager, we need to override the onmeasure method of viewpager.

The densityutil.getheight method is a method to obtain the screen height.

After this setting, we will write the height of the background viewpager as the height of the screen. In this way, when the keyboard pops up, the size of viewpager will change. After testing, our method can organize the background to move upward. In fact, we did not organize the system to redraw the control, but changed the height and size of the viewpager that was redrawn finally, which gave the user the feeling that my background had not changed.

Finally, the implemented layout code is attached:

Configuration in manifest file

The above is the Android implementation background sliding login interface (without compressing the background pop-up keyboard) introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!