Adding animations for view pager transitions

chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuViewPager.java

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 package org.chromium.chrome.browser.contextmenu;
 
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.ValueAnimator;
+import android.animation.ValueAnimator.AnimatorUpdateListener;
 import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.drawable.Drawable;
 import android.support.v4.view.ViewPager;
+import android.support.v4.view.animation.LinearOutSlowInInterpolator;
 import android.util.AttributeSet;
 import android.view.View;
 
+import org.chromium.base.ApiCompatibilityUtils;
 import org.chromium.chrome.R;
 
 /**
  * When there is more than one view for the context menu to display, it wraps the display in a view
  * pager.
  */
 public class TabularContextMenuViewPager extends ViewPager {
+    private static final int ANIMATION_DURATION_MS = 250;
+
+    private ValueAnimator mAnimator;
+    private int mOldHeight;
+    private int mCanvasWidth;
+    private int mClipHeight;
+
+    private int mDifferenceInHeight = 0;
+    private int mPreviousChildIndex = 1;
     private final int mContextMenuMinimumPaddingPx =
             getResources().getDimensionPixelSize(R.dimen.context_menu_min_padding);
+    private final Drawable mDrawable = ApiCompatibilityUtils.getDrawable(
+            getResources(), R.drawable.white_with_rounded_corners);
 
     public TabularContextMenuViewPager(Context context) {
         super(context);
+        mDrawable.mutate();
     }
 
     public TabularContextMenuViewPager(Context context, AttributeSet attrs) {
         super(context, attrs);
+        mDrawable.mutate();
     }
 
     /**
      * Used to show the full ViewPager dialog. Without this the dialog would have no height or
      * width.
      */
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        int tabHeight = 0;
         int menuHeight = 0;
-        int tabHeight = 0;
-
-        // getCurrentItem() does not take into account the tab layout unlike getChildCount().
-        int currentItemsIndex = getCurrentItem() + 1;
 
         // The width of the context menu is defined so that it leaves space between itself and the
         // screen's edges. It is also bounded to a max size to prevent the menu from stretching
         // across a large display (e.g. a tablet screen).
-        int deviceWidthPx = getResources().getDisplayMetrics().widthPixels;
-        int contextMenuWidth = Math.min(deviceWidthPx - 2 * mContextMenuMinimumPaddingPx,
+        int appWindowWidthPx = getResources().getDisplayMetrics().widthPixels;
+        int contextMenuWidth = Math.min(appWindowWidthPx - 2 * mContextMenuMinimumPaddingPx,
                 getResources().getDimensionPixelSize(R.dimen.context_menu_max_width));
 
         widthMeasureSpec = MeasureSpec.makeMeasureSpec(contextMenuWidth, MeasureSpec.EXACTLY);
 
-        // The height of the context menu is calculated as the sum of:
-        // 1. The tab bar's height, which is only visible when the context menu requires it
-        //    (i.e. an ImageLink is clicked)
-        // 2. The height of the View being displayed for the current tab.
-        for (int i = 0; i < getChildCount(); i++) {
-            View child = getChildAt(i);
+        // getCurrentItem() does not take into account the tab layout unlike getChildCount().

[Theresa, 2017/07/20 15:25:00]

What does getCurrentItem() return, then?

[Daniel Park, 2017/07/20 18:55:19]

Added more detail. Done.

+        int currentChildIndex = getCurrentItem() + 1;
 
-            child.measure(
-                    widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
-            int measuredHeight = child.getMeasuredHeight();
+        // Handles the case where this is called while the pager is scrolling between views.

[Theresa, 2017/07/20 15:25:00]

nit: Update the comment to say what is done in this scenario e.g. "The height
should remain the same."

[Daniel Park, 2017/07/20 18:55:19]

Done.

+        if (getScrollX() != 0 && getScrollX() != mCanvasWidth) {
+            heightMeasureSpec = MeasureSpec.makeMeasureSpec(mOldHeight, MeasureSpec.EXACTLY);
+        } else {
+            // The height of the context menu is calculated as the sum of:
+            // 1. The tab bar's height, which is only visible when the context menu requires it
+            //    (i.e. an ImageLink is clicked)
+            // 2. The height of the View being displayed for the current tab.
+            for (int i = 0; i < getChildCount(); i++) {
+                View child = getChildAt(i);
+                child.measure(
+                        widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
+                int measuredHeight = child.getMeasuredHeight();
 
-            // The ViewPager also considers the tab layout one of its children, and needs to be
-            // treated separately from getting the largest height.
-            if (child.getId() == R.id.tab_layout && child.getVisibility() != GONE) {
-                tabHeight = measuredHeight;
-            } else if (i == currentItemsIndex) {
-                menuHeight = child.getMeasuredHeight();
-                break;
+                // The ViewPager also considers the tab layout one of its children, and needs to be
+                // treated separately from getting the largest height.
+                if (child.getId() == R.id.tab_layout && child.getVisibility() != GONE) {
+                    tabHeight = measuredHeight;
+                } else if (i == currentChildIndex) {
+                    menuHeight = child.getMeasuredHeight();
+                    break;
+                }
+            }
+            int fullHeight = menuHeight + tabHeight;
+            int appWindowHeightPx = getResources().getDisplayMetrics().heightPixels;
+            fullHeight = Math.min(fullHeight, appWindowHeightPx - 2 * mContextMenuMinimumPaddingPx);
+            mDifferenceInHeight = fullHeight - mOldHeight;
+
+            if (currentChildIndex == mPreviousChildIndex) {
+                // Handles the snapping and re-clipping of the view when its height changes
+                // (i.e. an image finished loading or the link became fully visible).

[Theresa, 2017/07/20 15:25:00]

nit: add "The pager will immediately snap to the new height."

[Daniel Park, 2017/07/20 18:55:19]

Done.

+                mClipHeight = fullHeight;
+                if (menuHeight != 0) mOldHeight = fullHeight;
+                heightMeasureSpec = MeasureSpec.makeMeasureSpec(fullHeight, MeasureSpec.EXACTLY);
+            } else {
+                // Handles the case where the view pager has completely scrolled to a different
+                // child.

[Theresa, 2017/07/20 15:25:00]

nit: add "The pager will animate to the height of the selected child."

[Daniel Park, 2017/07/20 18:55:19]

Done.

+                initAnimator();
+                heightMeasureSpec = MeasureSpec.makeMeasureSpec(
+                        Math.max(mOldHeight, fullHeight), MeasureSpec.EXACTLY);
+                mAnimator.start();

[Theresa, 2017/07/20 15:25:00]

Should we start the animation after giving the super class a chance to measure? 

[Daniel Park, 2017/07/20 18:55:19]

I prefer to keep it here since the results are the same.
Moving it after super.onMeasure implies to me that an animation would start no
matter what case.

[Daniel Park, 2017/07/20 21:42:36]

Done.

             }
         }
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+        mPreviousChildIndex = currentChildIndex;
+    }
 
-        // Cap the height of the context menu so that it fits on the screen without touching the
-        // screen's edges.
-        int fullHeight = menuHeight + tabHeight;
-        int deviceHeightPx = getResources().getDisplayMetrics().heightPixels;
-        fullHeight = Math.min(fullHeight, deviceHeightPx - 2 * mContextMenuMinimumPaddingPx);
+    private void initAnimator() {
+        if (mAnimator != null) return;
+        mAnimator = ValueAnimator.ofFloat(0f, 1f);
+        mAnimator.setDuration(ANIMATION_DURATION_MS);
+        mAnimator.setInterpolator(new LinearOutSlowInInterpolator());
+        mAnimator.addUpdateListener(new AnimatorUpdateListener() {
 
-        heightMeasureSpec = MeasureSpec.makeMeasureSpec(fullHeight, MeasureSpec.EXACTLY);
-        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+            @Override
+            public void onAnimationUpdate(ValueAnimator animation) {
+                float animatedValue = (float) animation.getAnimatedValue();
+                // If the animation duration is long enough (e.g. 5x, 10x), animatedValue will
+                // undesirably be set to 1f more than once.

[Theresa, 2017/07/20 15:25:00]

We're not really doing anything in response to the animateValue being set to 1f
more than once any more, right? If not, let's drop this comment.

[Daniel Park, 2017/07/20 18:55:19]

oops. Done.

+                if (mDifferenceInHeight < 0) {
+                    setTranslationY(animatedValue * -mDifferenceInHeight / 2);
+                } else {
+                    setTranslationY((1 - animatedValue) * mDifferenceInHeight / 2);
+                }
+                mClipHeight = mOldHeight + (int) (mDifferenceInHeight * animatedValue);
+                invalidate();
+            }
+        });
+        mAnimator.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                mOldHeight = mClipHeight;
+                setTranslationY(0);
+                if (mDifferenceInHeight < 0) requestLayout();
+            }
+        });
+    }
+
+    @Override
+    public void onDraw(Canvas canvas) {
+        mCanvasWidth = canvas.getWidth();
+        int backgroundOffsetX = getScrollX();
+        mDrawable.setBounds(
+                backgroundOffsetX, 0, canvas.getWidth() + backgroundOffsetX, mClipHeight);
+        mDrawable.draw(canvas);
+        boolean clipped = false;

[Theresa, 2017/07/20 15:25:00]

nit: add a blank line above this one.

[Daniel Park, 2017/07/20 18:55:19]

Done.

+        if (mClipHeight != 0) {
+            canvas.save();
+            canvas.clipRect(0, 0, mCanvasWidth, mClipHeight);
+            clipped = true;
+        }
+        super.onDraw(canvas);

[Theresa, 2017/07/20 15:25:00]

nit: add blank lines around this super.onDraw() call

[Daniel Park, 2017/07/20 18:55:19]

Done.

+        if (clipped) {
+            canvas.restore();
+        }
     }
 }