Android login page imitation hook effect, you will always need it!

[[187872]]

Haha, when you see this title, your JH tightens. You may say that you have never encountered it, but not encountering it now does not mean that you will never encounter it. After all, design is unpredictable. There is nothing you can't realize, only things you can't think of. What effect does it have? Yes, it is a small login page. Everyone has the Lagou app. The login page of Lagou is very smooth and has animation effects, so there is a login effect similar to Lagou, as shown in the figure:

Although it is a simple page, it covers quite a lot of things. I wonder why Google has not provided a simple, convenient and accurate keyboard monitoring event? So we can only monitor keyboard events from the side. We can monitor the changes of the outermost layout to determine whether the keyboard has popped up. Without further ado, let's get on the bus.

Layout file, everyone can understand it.

If we want to monitor keyboard events, we first want to know that we can do something when the keyboard pops up, and then do something else when the keyboard is searched. Knowing this is not enough, we also need to know how much the keyboard pops up and how much distance it needs to be translated. We all know that when a page pops up the keyboard, the root layout of this page will call back its listening method: addOnLayoutChangeListener(); when the keyboard pops up, our layout changes, so this callback method will be executed, but the premise is that the windowSoftInputMode property of our Activity must be set to adjustResize.

We want the layout to translate as a whole, which is the distance from the top of the view at the bottom when it pops up minus the height of our keyboard. Now we think that as long as the height of the control pushing the Activity up exceeds 1/3 of the screen height, the soft keyboard is considered to pop up.

 scrollView.addOnLayoutChangeListener(new ViewGroup.OnLayoutChangeListener() {
 @Override
 public void onLayoutChange( View v, int   left , int   top , int   right , int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
 /* old is the upper left and lower right coordinate point values ​​before the change, and the value without old is the upper left and lower right coordinate point values ​​after the change
 Now it is considered that as long as the control pushes the Activity upwards to a height exceeding 1/3 of the screen height, the soft keyboard is considered to pop up*/
                if (oldBottom != 0 && bottom != 0 && (oldBottom - bottom > keyHeight)) {
                    Log.e( "wenzhihao" , "up------>" +(oldBottom - bottom));
 int dist = btn_login.getBottom() - bottom;
                    if (dist>0){
                        ObjectAnimator mAnimatorTranslateY = ObjectAnimator.ofFloat(content, "translationY" , 0.0f, -dist);
                        mAnimatorTranslateY.setDuration(300);
                        mAnimatorTranslateY.setInterpolator(new LinearInterpolator());
                        mAnimatorTranslateY.start();
                        zoomIn(logo, dist);
 }
                    service.setVisibility( View .INVISIBLE); 
 
                } else if (oldBottom != 0 && bottom != 0 && (bottom - oldBottom > keyHeight)) {
                    Log.e( "wenzhihao" , "down------>" +(bottom - oldBottom));
                    if ((btn_login.getBottom() - oldBottom)>0){
                        ObjectAnimator mAnimatorTranslateY = ObjectAnimator.ofFloat(content, "translationY" , content.getTranslationY(), 0);
                        mAnimatorTranslateY.setDuration(300);
                        mAnimatorTranslateY.setInterpolator(new LinearInterpolator());
                        mAnimatorTranslateY.start();
 //After the keyboard is retracted, the logo returns to its original size and position
                        zoomOut(logo);
 }
                    service.setVisibility( View .VISIBLE);
 }
 }
 });
 /n_login is the login button

In this way, we found that the effect can be achieved, but I want to display it in full screen. I was confused and found that this method is not called back when it is in full screen. What should I do? I checked the information again and found that this is also a bug, but there is a solution, AndroidBug5497Workaround. It is also provided by Google? Copy it directly and you will find that its function is to make the root layout of the outermost layer of the Activity respond to this change when there is a layout change. mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener();

 package com.wzh.study.login; 
 
 
 import android.app.Activity; 
 
 import android.graphics.Rect; 
 
 import android. view . View ; 
 
 import android.view.ViewTreeObserver ; 
 
 import android.widget.FrameLayout; 
 
 
 public class AndroidBug5497Workaround { 
 
 
    // For more information, see https://code.google.com/p/android/issues/detail?id=5497 
 
    // To use this class, simply invoke assistActivity() on an Activity that already has its content view   set . 
 
 
 public   static void assistActivity (Activity activity) { 
 
        new AndroidBug5497Workaround(activity); 
 
 } 
 
 
    private View mChildOfContent; 
 
    private int usableHeightPrevious; 
 
    private FrameLayout.LayoutParams frameLayoutParams; 
 
 
    private AndroidBug5497Workaround(Activity activity) { 
 
        FrameLayout content = (FrameLayout) activity.findViewById(android.R.id.content); 
 
        mChildOfContent = content.getChildAt(0); 
 
        mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
 
 public void onGlobalLayout() { 
 
                possiblyResizeChildOfContent(); 
 
 } 
 
 }); 
 
        frameLayoutParams = (FrameLayout.LayoutParams) mChildOfContent.getLayoutParams(); 
 
 } 
 
 
    private void possiblyResizeChildOfContent() { 
 
 int usableHeightNow = computeUsableHeight(); 
 
        if (usableHeightNow != usableHeightPrevious) { 
 
 int usableHeightSansKeyboard = mChildOfContent.getRootView().getHeight(); 
 
 int heightDifference = usableHeightSansKeyboard - usableHeightNow; 
 
            if (heightDifference > (usableHeightSansKeyboard/4)) { 
 
                // keyboard probably just became visible 
 
                frameLayoutParams.height = usableHeightSansKeyboard - heightDifference; 
 
 } else { 
 
                // keyboard probably just became hidden 
 
                frameLayoutParams.height = usableHeightSansKeyboard; 
 
 } 
 
            mChildOfContent.requestLayout(); 
 
            usableHeightPrevious = usableHeightNow; 
 
 } 
 
 } 
 
 
    private int computeUsableHeight() { 
 
 Rect r = new Rect(); 
 
        mChildOfContent.getWindowVisibleDisplayFrame(r); 
 
 return (r.bottom - r.top ) ; 
 
 } 
 
 
 }

Usage: If we set full screen, we will load it, otherwise it will be ignored:

 if (isFullScreen (this)) { 
 
            AndroidBug5497Workaround.assistActivity(this); 
 
 } 
 
 ... 
 
 public boolean isFullScreen(Activity activity) { 
 
 return (activity.getWindow().getAttributes().flags & 
 
            WindowManager.LayoutParams.FLAG_FULLSCREEN)==WindowManager.LayoutParams.FLAG_FULLSCREEN; 
 
 }

Next, let's look at the specific animation events. When the keyboard pops up, the whole thing moves upward and the LOGO shrinks. When the keyboard is retracted, the whole thing moves downward and the LOGO returns to its original size. All the attributes used here are animations. Only with attribute animations can we achieve a true translation effect.

I see many people online using addOnLayoutChangeListener() to listen for keyboard events, but this method calls back too frequently. For example, in this example, a clear icon is displayed when there is text behind the input box. If you use this method, it will also be executed once, which may affect your animation. Of course, you can also record the height of the first time so that it will not follow the logic, but I don't think it is very reliable. Although my method is not great either๑乛◡乛๑~.

*** Paste the source code:

If you have any questions, please point them out. I will give you an example address, including another way to achieve the panning effect by sliding the scrollview to the top.