Improve Android forms with animations and fragments

The following picture is the rendering of the search page of captain train. In this article, I will analyze how to achieve a similar effect.

To analyze the animation effect in Android, it is best to analyze it from a slowed down animation effect diagram. You can set the duration of the animation through the developer options in the Android system. The following figure shows the effect of 10 times the duration of the animation. The

entire interface is mainly composed of two parts, the form displayed in normal mode and the edit panel that needs to be displayed when a form gets the focus (for example, when clicking on the date form, the one containing the date control) The editing panel will be displayed), and the editing panel can use fragments, which also facilitates the modularization of the code.
If you look closely, you can see that the entire effect is actually composed of multiple simultaneous sub-animations. There are several sub-animations:
1. Move the control that gets the focus and all the controls above this control. The final result is that the control that gets the focus moves under the actionbar.
2. The fade-out effect of the control below the control that gets the focus. The main thing is to hide controls that are not needed in edit mode.
3. The fade-in effect of the editing panel (such as the date control).
4. Stick to animation, mainly that some controls need to always be located below the control that gets the focus, and these controls will move with the control that gets the focus.
The following is the code implementation corresponding to each animation: The
layout is very simple, the main container is a scrollview, and the specific code can refer to the github code.
1. Move the control that gets the focus.
If the control that gets the focus is a direct child control of the container, you can get the distance to move through the getTop() method. If not, you need to use View#getDrawingRect(Rect) and the container's ViewGroup# offsetDescendantRectToMyCoords(View, Rect) method.

private final Rect mTmpRect = new Rect();  
  
private void focusOn(View v, View movableView, boolean animated) {  
  
    v.getDrawingRect (mTmpRect);  
    mMainContainer.offsetDescendantRectToMyCoords(v, mTmpRect);  
  
    movableView.animate().  
            translationY(-mTmpRect.top).  
            setDuration(animated ? ANIMATION_DURATION : 0).  
            setInterpolator(ANIMATION_INTERPOLATOR).  
            start();  
}

2. The fade-out effect of the control under the control that gets the focus The
control will fade out completely after moving down by half the height of the container. Here, the height of the container is obtained through the container's OnLayoutChangeListener.

private void fadeOutToBottom(View v, boolean animated) {  
    v.animate ().  
            translationYBy(mHalfHeight).  
            alpha(0).  
            setDuration(animated ? ANIMATION_DURATION : 0).  
            setInterpolator(ANIMATION_INTERPOLATOR).  
            start();  
}

3. The fade-in effect of the editing panel (such as the date control) The control to be realistic in the
editing mode will be placed in a container, which is invisible by default. After entering the editing mode, set the container to be visible, and set the y coordinate of the container. is 0. In order to avoid blocking the control that gets the focus, you can set a larger padding for the container.

private void slideInToTop(View v, boolean animated) {  
  v.animate ().  
      translationY(0).  
        alpha(1).  
        setDuration(animated ? ANIMATION_DURATION : 0).  
        setInterpolator(ANIMATION_INTERPOLATOR);  
}

4. Attach animation
Here is to keep a gray view always under the control that gets the focus.

private void stickTo(View v, View viewToStickTo, boolean animated) {  
  
  v.getDrawingRect (mTmpRect);  
    mMainContainer.offsetDescendantRectToMyCoords(v, mTmpRect);  
  
    v.animate ().  
            translationY(viewToStickTo.getHeight() - mTmpRect.top).  
            setDuration(animated ? ANIMATION_DURATION : 0).  
            setInterpolator(ANIMATION_INTERPOLATOR).  
            start();  
}

github address
https://github.com/lzyzsd/custom-animations-with-fragment.git

Welcome to QQ group: 104286694