Shulou(Shulou.com)06/02 Report--

How to achieve Android landing page imitation retractor dynamic effect, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Haha, when you see whether this title is JH, you may say that I have never encountered it before, but just because I haven't encountered it now doesn't mean I can't meet it. After all, the design is also unpredictable, only what you can't think of, nothing you can't achieve, what's the effect of saying so hanging? Yes, it is a small login page. Everyone has an app. The login page of the hook makes a smooth animation and leads to a drawing effect, so it has a similar login effect, as shown in the figure:

Although it is a simple page, it covers a lot of things. I wonder why Google has not provided simple, convenient and accurate keyboard monitoring events. Melancholy, so we can only monitor keyboard events from the side, we can monitor changes in the outermost layout to determine whether the keyboard is up or not. Don't talk too much. Get in the car.

The layout file, everyone can understand it.

If we want to monitor keyboard events, the first thing we want is that we can do something when the keyboard pops up, and when the keyboard is searched, we can do something more, and we need to know how much the keyboard has popped up and how much distance we need to translate. We all know that when one of our pages pops up, the root layout of the page will call back his listening method: addOnLayoutChangeListener (); when the keyboard pops up, our layout will change, so we will execute this callback method, but only if our Activity's windowSoftInputMode property is set to adjustResize.

The distance we want the layout to translate as a whole, that is, the height from the top of the view that is in the * part when popping up minus the height of our keyboard. It is now considered that the soft keyboard will pop up as long as the control pushes the Activity up to a height greater than 1 / 3 screen height.

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 value of the upper left and lower right coordinate points before the change. Without old, it is thought that the soft keyboard will pop up * / if (oldBottom! = 0 & & bottom! = 0 & & (oldBottom-bottom > keyHeight)) {Log.e ("wenzhihao", "up- >" + (oldBottom-bottom)) as long as the control pushes the wenzhihao up to a height higher than 1max / 3 screen height. 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 the position also returns to the original position zoomOut (logo);} service.setVisibility (View.VISIBLE);}); / n_login is the login button

In this way, we find that we can achieve the effect, but I think the full screen display, confused than, found that the full screen when not back to this method, how to do? Look up the data again and see that this is also a bug, but there is a solution, AndroidBug5497Workaround. Is it also provided by Google? If you copy it directly, you will find that its function is to make the outermost root layout of 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);}

How to use it, if we set the full screen, load it, regardless of the setting:

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 plays, the overall translation is upward, the LOGO shrinks, the keyboard is folded down, and the LOGO is restored to its original size. What is used here is the attribute animation, only the attribute animation can we achieve the real translation effect.

I think many people on the Internet use addOnLayoutChangeListener () to monitor keyboard events, but this method calls back too frequently, such as this special effect. The 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 * times so that he doesn't know how to follow logic, but I don't think it's very reliable. Although my method is not very good, I am not very good at ◡.

* paste the source code:

This is the answer to the question about how to achieve the dynamic effect of imitation retractor on the Android landing page. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.