Permalink
Browse files

Android: Keep ScrollView content visible after edits

Summary:
Suppose that the user is scrolled to the bottom of a ScrollView. Next, the ScrollView's content is edited such that the height of the content changes and the current scroll position is larger than the new height of the content. Consequently, the user sees a blank ScrollView. As soon as the user interacts with the ScrollView, the ScrollView will jump to its max scroll position.

This change improves this scenario by ensuring that the user is never staring at a blank ScrollView when the ScrollView has content in it. It does this by moving the ScrollView to its max scroll position when the scroll position after an edit is larger than the max scroll position of the ScrollView.

Here are some pictures to illustrate how this PR improves the scenario described above:

![image](https://cloud.githubusercontent.com/assets/199935/20408839/0e731774-accc-11e6-9f0a-3d77198645e9.png)

![image](https://cloud.githubusercontent.com/assets/199935/20408844/12877bb6-accc-11e6-8fe2-1c1bb26569cc.png)

**Test plan (require
Closes #11000

Differential Revision: D4250792

Pulled By: astreet

fbshipit-source-id: 940fff6282ad29c796726f68b4519cbdabbfe554
  • Loading branch information...
1 parent eda09f8 commit 528a3c776a26c946a6582489c5e1ad234220dc3c @rigdern rigdern committed with Facebook Github Bot Nov 30, 2016
Showing with 43 additions and 4 deletions.
  1. +43 −4 ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java
@@ -21,6 +21,7 @@
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
+import android.view.ViewGroup;
import android.widget.OverScroller;
import android.widget.ScrollView;
@@ -39,7 +40,7 @@
* <p>ReactScrollView only supports vertical scrolling. For horizontal scrolling,
* use {@link ReactHorizontalScrollView}.
*/
-public class ReactScrollView extends ScrollView implements ReactClippingViewGroup {
+public class ReactScrollView extends ScrollView implements ReactClippingViewGroup, ViewGroup.OnHierarchyChangeListener, View.OnLayoutChangeListener {
private static Field sScrollerField;
private static boolean sTriedToGetScrollerField = false;
@@ -58,6 +59,7 @@
private @Nullable String mScrollPerfTag;
private @Nullable Drawable mEndBackground;
private int mEndFillColor = Color.TRANSPARENT;
+ private View mContentView;
public ReactScrollView(ReactContext context) {
this(context, null);
@@ -98,6 +100,8 @@ public ReactScrollView(ReactContext context, @Nullable FpsListener fpsListener)
} else {
mScroller = null;
}
+
+ setOnHierarchyChangeListener(this);
}
public void setSendMomentumEvents(boolean sendMomentumEvents) {
@@ -299,6 +303,12 @@ private boolean isScrollPerfLoggingEnabled() {
return mFpsListener != null && mScrollPerfTag != null && !mScrollPerfTag.isEmpty();
}
+ private int getMaxScrollY() {
+ int contentHeight = mContentView.getHeight();
+ int viewportHeight = getHeight() - getPaddingBottom() - getPaddingTop();
+ return Math.max(0, contentHeight - viewportHeight);
+ }
+
@Override
public void draw(Canvas canvas) {
if (mEndFillColor != Color.TRANSPARENT) {
@@ -327,9 +337,7 @@ protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolea
// more information.
if (!mScroller.isFinished() && mScroller.getCurrY() != mScroller.getFinalY()) {
- int scrollRange = Math.max(
- 0,
- getChildAt(0).getHeight() - (getHeight() - getPaddingBottom() - getPaddingTop()));
+ int scrollRange = getMaxScrollY();
if (scrollY >= scrollRange) {
mScroller.abortAnimation();
scrollY = scrollRange;
@@ -341,4 +349,35 @@ protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolea
super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
}
+
+ @Override
+ public void onChildViewAdded(View parent, View child) {
+ mContentView = child;
+ mContentView.addOnLayoutChangeListener(this);
+ }
+
+ @Override
+ public void onChildViewRemoved(View parent, View child) {
+ mContentView.removeOnLayoutChangeListener(this);
+ mContentView = null;
+ }
+
+ /**
+ * Called when a mContentView's layout has changed. Fixes the scroll position if it's too large
+ * after the content resizes. Without this, the user would see a blank ScrollView when the scroll
+ * position is larger than the ScrollView's max scroll position after the content shrinks.
+ */
+ @Override
+ public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
+ if (mContentView == null) {
+ return;
+ }
+
+ int currentScrollY = getScrollY();
+ int maxScrollY = getMaxScrollY();
+ if (currentScrollY > maxScrollY) {
+ scrollTo(getScrollX(), maxScrollY);
+ }
+ }
}
+

0 comments on commit 528a3c7

Please sign in to comment.