NestedScrollView和Horizontal RecyclerView平滑滚动 [英] NestedScrollView and Horizontal RecyclerView Smooth Scrolling
问题描述
我有一个垂直的nestedscrollview，其中包含一堆带有水平layoutmanager设置的recyclerview.这个想法与新的Google Play商店的外观非常相似.我能够使其正常运行，但它一点也不流畅.这里是问题所在:
I have a single vertical nestedscrollview that contains a bunch of recyclerview with a horizontal layoutmanager setup. The idea is pretty similar to how the new google play store looks. I'm able to make it functional but it isn't smooth at all. Here are the problems:
1)水平recyclerview项在大多数情况下都无法拦截触摸事件，即使我在其上右击也是如此.在大多数动作中，滚动视图似乎优先.对我来说，很难抓住水平运动的方向.这个UX令人沮丧，因为我需要尝试几次才能使用.如果您查看Play商店，它就能很好地拦截触摸事件，并且效果很好.我在游戏商店中注意到，他们设置它的方式是在一个垂直的recyclerview中放置许多水平的recyclerview.没有滚动视图.
1) The horizontal recyclerview item fails to intercept the touch event most of the times even though i tap right on it. The scroll view seems to take precedence for most of the motions. It's hard for me to get a hook onto the horizontal motion. This UX is frustrating as I need to try a few times before it works. If you check the play store, it is able to intercept the touch event really well and it just works well. I noticed in the play store the way they set it up is many horizontal recyclerviews inside one vertical recyclerview. No scrollview.
2)必须手动设置水平recyclerviews的高度，没有简单的方法来计算子元素的高度.
2) The height of the horizontal recyclerviews have to be manually set and there is no easy way to calculate the height of the children elements.
这是我正在使用的布局:
Here is the layout I'm using:
<android.support.v4.widget.NestedScrollView
android:id="@+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:background="@color/dark_bgd"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="@+id/main_content_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="gone"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/starring_list"
android:paddingLeft="@dimen/spacing_major"
android:paddingRight="@dimen/spacing_major"
android:layout_width="match_parent"
android:layout_height="180dp" />
此用户界面模式非常基本，很可能在许多不同的应用程序中使用.我读过很多SO，ppl认为将列表放在列表中是个坏主意，但这是一种非常普遍且现代的UI模式，在各处使用.netflix就像界面内部带有一系列水平滚动列表的界面垂直列表.是否有一种顺利的方法来完成此任务?
This UI pattern is very basic and most likely used in many different apps. I've read many SO's where ppl say it's a bad idea to put a list within a list, but it is a very common and modern UI pattern used all over the place.Think of netflix like interface with a series of horizontal scroll lists inside a vertical list. Isn't there a smooth way to accomplish this?
商店中的示例图片:
推荐答案
因此，现在已解决了平滑滚动的问题.这是由设计支持库(当前为23.1.1)中NestedScrollView中的错误引起的.
So the smooth scrolling issue is fixed now. It was caused by a bug in the NestedScrollView in the Design Support Library (currently 23.1.1).
您可以在此处阅读有关此问题和简单修复的信息: https://code.google.com/p/android/issues/detail?id=194398
You can read about the issue and the simple fix here: https://code.google.com/p/android/issues/detail?id=194398
简而言之，在执行猛击之后，nestedscrollview并没有在滚动器组件上注册完整控件，因此它需要一个附加的'ACTION_DOWN'事件来释放父nestedscrollview阻止(吃掉)后续事件.因此，发生的事情是，如果您尝试滚动子列表(或viewpager)，则在一次刷新后，第一次触摸会释放父NSV绑定，随后的触摸会起作用.那使UX真的很糟糕.
In short, after you performed a fling, the nestedscrollview didn't register a complete on the scroller component and so it needed an additional 'ACTION_DOWN' event to release the parent nestedscrollview from intercepting(eating up) the subsequent events. So what happened was if you tried scrolling your child list(or viewpager), after a fling, the first touch releases the parent NSV bind and the subsequent touches would work. That was making the UX really bad.
基本上需要在NSV的ACTION_DOWN事件上添加此行:
Essentially need to add this line on the ACTION_DOWN event of the NSV:
computeScroll();
这是我正在使用的:
public class MyNestedScrollView extends NestedScrollView {
private int slop;
private float mInitialMotionX;
private float mInitialMotionY;
public MyNestedScrollView(Context context) {
super(context);
init(context);
}
private void init(Context context) {
ViewConfiguration config = ViewConfiguration.get(context);
slop = config.getScaledEdgeSlop();
}
public MyNestedScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public MyNestedScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private float xDistance, yDistance, lastX, lastY;
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final float x = ev.getX();
final float y = ev.getY();
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
xDistance = yDistance = 0f;
lastX = ev.getX();
lastY = ev.getY();
// This is very important line that fixes
computeScroll();
break;
case MotionEvent.ACTION_MOVE:
final float curX = ev.getX();
final float curY = ev.getY();
xDistance += Math.abs(curX - lastX);
yDistance += Math.abs(curY - lastY);
lastX = curX;
lastY = curY;
if (xDistance > yDistance) {
return false;
}
}
return super.onInterceptTouchEvent(ev);
}
}
使用此类代替xml文件中的nestedscrollview，并且子级列表应正确拦截和处理触摸事件.
Use this class in place of your nestedscrollview in the xml file, and the child lists should intercept and handle the touch events properly.
哎呀，实际上有很多类似的错误，使我想完全放弃设计支持库，并在成熟时重新访问它.
Phew, there are actually quite a few bugs like these that makes me want to ditch the design support library altogether and revisit it when its more mature.
这篇关于NestedScrollView和Horizontal RecyclerView平滑滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
