status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-27 08:30:34 +00:00
Code Issues Projects Releases Wiki Activity

Android: Keep ScrollView content visible after edits

Browse Source 
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 https://github.com/facebook/react-native/pull/11000

Differential Revision: D4250792

Pulled By: astreet

fbshipit-source-id: 940fff6282ad29c796726f68b4519cbdabbfe554
This commit is contained in:
Adam Comella 2016-11-30 03:55:08 -08:00 committed by Facebook Github Bot
parent eda09f89c9
commit 528a3c776a
1 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java
View File

@ -21,6 +21,7 @@ import android.graphics.drawable.Drawable;
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 @@ import com.facebook.infer.annotation.Assertions;
* <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 @@ public class ReactScrollView extends ScrollView implements ReactClippingViewGrou
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 class ReactScrollView extends ScrollView implements ReactClippingViewGrou
} else {
mScroller = null;
}
setOnHierarchyChangeListener(this);
}
public void setSendMomentumEvents(boolean sendMomentumEvents) {
@ -299,6 +303,12 @@ public class ReactScrollView extends ScrollView implements ReactClippingViewGrou
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 @@ public class ReactScrollView extends ScrollView implements ReactClippingViewGrou
// 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 @@ public class ReactScrollView extends ScrollView implements ReactClippingViewGrou
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);
}
}
}