NestedScrollView 问题中的可滚动寻呼机内容

Posted 2023-04-19

【中文标题】NestedScrollView 问题中的可滚动寻呼机内容

【英文标题】：Scrollable Pager Content Inside a NestedScrollView Issue

【发布时间】：2019-01-31 02:49:44

【问题描述】：

我在嵌套滚动视图中有一个 viewpager，它可能包含也可能不包含数据。如果它确实包含数据，则它是一个分页的两列交错网格视图。我希望能够在上面的视图完全隐藏的地方向下滚动足够远，并且可以全屏滚动回收站视图。我遇到的问题是一旦数据加载，我只能滚动一点。看起来嵌套滚动范围被回收器视图中出现的第一个项目的高度扩展了。有什么我遗漏的吗？

这是目前正在发生的事情：

Where 当回收器视图中的项目加载但滚动范围仅扩展到第一个项目的高度时，整个视图是可滚动的。一旦回收器加载如下图，我希望能够滚动到选项卡的顶部：

我只是对这里发生的事情感到困惑。

这是相关视图的 xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/comment_layout_root"
android:layout_
android:layout_
android:background="@color/card_background">

<android.support.v4.widget.NestedScrollView
    android:layout_
    android:layout_
    android:layout_above="@+id/comment_footer"
    android:scrollbars="none">

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/image_frame"
            android:layout_
            android:layout_>

            <ImageView
                android:id="@+id/collection_image"
                android:layout_
                android:layout_
                android:background="@color/color_black"
                android:scaleType="centerCrop"
                android:layout_centerInParent="true"
                />
            <Button
                style="@style/Button.LightPurple.Inverse"
                android:id="@+id/edit_button"
                android:layout_
                android:layout_
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:text="@string/collection_edit"
                android:visibility="gone"
                />
        </RelativeLayout>

        <include layout="@layout/item_detail_multi_nav_layout" />

        <View
            android:layout_
            android:layout_
            android:background="@color/color_list_divider" />


        <LinearLayout
            android:layout_
            android:layout_
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:orientation="vertical">


            <TextView
                android:id="@+id/collection_title"
                android:layout_
                android:layout_
                android:layout_gravity="center_vertical"
                android:layout_marginTop="@dimen/body_font_padding"
                android:gravity="center_vertical"
                android:text="@string/live_action_item_name"
                android:textColor="@color/on_board_clubs_join_btn"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/collection_description"
                android:layout_
                android:layout_
                android:layout_gravity="center_vertical"
                android:layout_marginTop="@dimen/body_font_padding"
                android:autoLink="web"
                android:gravity="center_vertical"
                android:maxLines="3"
                android:text="@string/medal_item_description_placeholder"
                android:textColor="@color/color_dark_gray"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/collection_item_count"
                android:layout_
                android:layout_
                android:layout_gravity="center_vertical"
                android:layout_marginTop="@dimen/body_font_padding"
                android:gravity="center_vertical"
                android:text="@string/item_collection_count"
                android:textAppearance="@style/TextAppearance.Large.Black.MontserratSemiBold"
                android:textColor="@color/search_follow_button"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/collection_uploadedby"
                android:layout_
                android:layout_
                android:layout_gravity="center_vertical"
                android:layout_marginBottom="@dimen/body_font_padding"
                android:layout_marginTop="15dp"
                android:gravity="center_vertical"
                android:text="@string/item_uploaded_by"
                android:textAppearance="@style/TextAppearance.Large.Black.Montserrat" />

            <include layout="@layout/action_feed_header_for_uploadedby" />


        </LinearLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_picker"
            android:layout_
            android:layout_
            android:layout_gravity="center"
            android:elevation="0dp"
            app:tabPaddingStart="5dp"
            app:tabPaddingEnd="5dp"
            app:tabMinWidth="0dp"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/bpDark_gray"
            app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
            app:tabTextColor="@color/bpWhite" />

        <View
            android:layout_
            android:layout_
            android:background="@color/color_list_divider" />

        <com.gemr.android.widgets.misc.WrapContentViewPager
            android:id="@+id/pager"
            android:layout_
            android:layout_
            android:background="@color/card_background"
            android:nestedScrollingEnabled="false"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

<LinearLayout
    android:id="@+id/comment_footer"
    android:layout_
    android:layout_
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:background="@color/card_background"
    android:orientation="vertical">

    <View
        android:layout_
        android:layout_
        android:background="@color/color_list_divider" />

    <LinearLayout
        android:id="@+id/comment_box_layout"
        style="@style/comment_box_layout"
        android:layout_
        android:layout_
        android:background="@color/bpWhite"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/comment_box"
            style="@style/comment_box_text"
            android:layout_
            android:layout_
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:background="@drawable/edit_text_post"
            android:gravity="center_vertical"
            android:hint="@string/comment_box_hint"
            android:inputType="textCapSentences|textMultiLine"
            android:maxLines="3"
            android:selectAllOnFocus="true" />

        <TextView
            android:id="@+id/comment_post"
            android:layout_
            android:layout_
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/card_view_selector"
            android:gravity="center_vertical"
            android:padding="4dp"
            android:text="@string/comment_post"
            android:textAppearance="@style/TextAppearance.Large.Gray.Montserrat" />

    </LinearLayout>
</LinearLayout>

这里是使用寻呼机设置的 RecyclerView：

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:background="@color/card_background">

<android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipeContainer"
    android:layout_
    android:layout_>

    <android.support.v7.widget.RecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/feed_recycler"
        android:layout_
        android:layout_
        tools:itemCount="3"/>

</android.support.v4.widget.SwipeRefreshLayout>

<include layout="@layout/fab_layout" />

我在这里忽略了一些非常简单的事情吗？

【参考方案1】：

试试这个可能对你有帮助

public class CustomNestedScrollView extends NestedScrollView 
private int slop;
private float mInitialMotionX;
private float mInitialMotionY;

public CustomNestedScrollView(Context context) 
    super(context);
    init(context);


private void init(Context context) 
    ViewConfiguration config = ViewConfiguration.get(context);
    slop = config.getScaledEdgeSlop();


public CustomNestedScrollView(Context context, AttributeSet attrs) 
    super(context, attrs);
    init(context);


public CustomNestedScrollView(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);

【参考方案2】：

问题在于Recyclerview 设置为match_parent。因为它的大小等于屏幕大小减去NestedScrollView 中所有其他东西的大小。

在需要整个屏幕来包含NestedScrollView中的其他东西的设备中，Recyclerview的大小将是0。

第 1 步： 将Recyclerview 及其父级（SwipeRefreshLayout和FrameLayout）的高度更改为wrap_content。

第 2 步： 如果这不能按预期工作，请将固定大小设置为Recyclerview（仅限Recyclerview，父母应保持wrap_content）。

第 3 步： 如果您希望它完全按照提供的图像工作，我认为您需要在运行时计算大小。在这种情况下，您可以撤消第 2 步。

【讨论】：

感谢您的回复。我尝试了上述步骤，但似乎没有任何区别。设置所有的父母来包装内容让我处于相同的状态并在回收站视图上设置一个固定的高度，即使是一个巨大的，在视图中也没有任何区别

它应该已经工作了。让我再检查一次。

尝试将RecyclerView 设置为match_parent 以及第1 步和第2 步。

刚刚尝试将其设置为 match_parent 及其父母作为包装内容，但仍然没有结果。我真的被这个难住了

RecyclerView 的高度还是固定的，对吧？

【参考方案3】：

您为什么不尝试结合使用 Coordinate Layout 和 AppBarLayout 来实现这一点。它更简单。您可以查看此链接以了解不同的卷轴。

https://github.com/codepath/android_guides/wiki/Handling-Scrolls-with-CoordinatorLayout

此链接准确显示您想要实现的目标

https://gist.github.com/iPaulPro/1468510f046cb10c51ea

【讨论】：

我在想，我在没有太多上下文的情况下被拉进了这个项目。坐标布局和 appbarlayout 是否会导致空视图？如果有要显示的内容，我只希望视图滚动（在本例中为折叠）。

你说的是哪个空视图，tabLayout下面的视图还是tabLayout上面的那个？如果您在谈论 tabLayout 下面的回收器视图，回收器视图负责滚动部分，无需单独处理滚动部分。因此，如果数据存在（并且超出屏幕可以处理的范围）滚动就会发生，否则不会滚动

我说的是整个视图。当数据没有问题时回收器视图将滚动，但包含其他所有内容的滚动视图在回收器视图获取其内容时不会调整其高度。我可以滚动一点，让我最多看到一个项目，但我希望能够进一步滚动。假设没有内容的高度是 500 像素，我希望在内容进入时高度像 1000 像素，这样我就可以看到更多的回收站视图。现在高度只是增加一点点

当recyclerview 得到它的内容就像你想要的一样，整个视图随着顶部的标签向上移动。请查看我在答案中提供的链接，所有内容都在此处进行了解释并告诉我。