ViewHolder 中的嵌套 RecyclerView 破坏了折叠工具栏布局

Posted

技术标签:

【中文标题】ViewHolder 中的嵌套 RecyclerView 破坏了折叠工具栏布局【英文标题】:Nested RecyclerView in ViewHolder breaks Collapsing Toolbar Layout 【发布时间】:2015-10-16 09:44:08 【问题描述】:

我有一个垂直 RecyclerView 托管在 CoordinatorLayout 中,具有折叠工具栏布局。此 RecyclerView 的 ViewHolder 包含另一个带有 GridLayoutManager 的 RecyclerView。

这种嵌套的原因是内部 RecyclerView 显示的图片集合可以包含 1 到 20 张图片。我不知道会有多少张图片,但是Grid的span必须始终为3。每次绑定ViewHolder时,我都会调整RecyclerView的布局参数以适应内容。

如果没有 CollapsingToolBarLayout,这将非常有用。但是,如果有一个折叠工具栏,用我的手指在内部 RecyclerView 上滚动不会滚动折叠工具栏,但是在另一个项目上滚动。

再次强调,在绑定的 ViewHolder 中,如果我开始在嵌套的 RecyclerView 之外的任何其他项目上滚动,滚动工作正常。但是,如果我在嵌套的 RecyclerView 上开始滚动,它就会中断。

是否可以防止内部 RecyclerView 上的滚动拦截而只让 Parent 滚动?不过,我希望内部 RecyclerView 仍能处理点击次数。

这是该现象的 YouTube 链接:https://youtu.be/fzj7HmqskzU

这是父 RecyclerView 的 XML:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
tools:context=".MainActivityFragment">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_
    android:layout_
    android:scrollbars="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_
    android:layout_>

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_
        android:layout_
        android:elevation="4dp"
        app:contentScrim="?attr/colorPrimary"
        app:layout_collapseParallaxMultiplier="0.7"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <View
            android:id="@+id/header_view"
            android:layout_
            android:layout_
            android:animateLayoutChanges="true"
            android:background="@color/primary" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/action_bar"
            android:layout_
            android:layout_
            android:elevation="4dp"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/Theme.AppCompat.NoActionBar"
            app:theme="@style/Theme.AppCompat.NoActionBar" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

这是托管嵌套 RecyclerView 的主 ViewHolder:

public class SimpleAdapter extends RecyclerView.Adapter<SimpleAdapter.ViewHolder> 

private static final int MODEL_OBJECT = 1;

private List<ModelObject> modelObjects;

private Context context;

private int imageSize;

public SimpleAdapter(List<ModelObject> modelObjects) 

    this.modelObjects = modelObjects;
    setHasStableIds(true);


@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) 
    context = viewGroup.getContext();

    int screenWidth= context.getResources().getDisplayMetrics().widthPixels;

    imageSize = screenWidth / 3;

    final LayoutInflater inflater = LayoutInflater.from(context);

    View itemView;

    itemView = inflater.inflate(R.layout.fragment_main_row, viewGroup, false);

    return new ViewHolder(itemView, viewType);


@Override
public void onBindViewHolder(ViewHolder viewHolder, final int position) 

    final ModelObject modelObject = modelObjects.get(position);

    // set text
    modelObject.setPosition(position + 1);
    viewHolder.titleTextView.setText(modelObject.getTitle());
    viewHolder.positionTextView.setText("" + (position + 1));


    adjustsizes(viewHolder.recyclerView, modelObject, imageSize);

    final NestedAdapter nestedAdapter = new NestedAdapter(modelObject.getPhotos());

    // Create and set GridLayoutManager for RecyclerView
    final GridLayoutManager recylerViewGridLayoutManager = new GridLayoutManager(context, 3);
    recylerViewGridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() 
        @Override
        public int getSpanSize(int position) 
            return 1;
        
    );

    viewHolder.recyclerView.setAdapter(nestedAdapter);
    viewHolder.recyclerView.setLayoutManager(recylerViewGridLayoutManager);


@Override
public int getItemViewType(int position) 
    return MODEL_OBJECT;


@Override
public int getItemCount() 
    return modelObjects.size();


@Override
public long getItemId(int position) 
    return modelObjects.get(position).hashCode();


private void adjustsizes(RecyclerView recyclerView, ModelObject modelObject, int imageSize) 
    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) recyclerView.getLayoutParams();

    if (modelObject.getPhotos() != null) 

        Double numberOfRowsDouble = modelObject.getPhotos().size() / 3.0;

        int numberOfRowsInt = (numberOfRowsDouble.intValue() < numberOfRowsDouble)
                ? numberOfRowsDouble.intValue() + 1
                : numberOfRowsDouble.intValue();

        params.height = imageSize * numberOfRowsInt;
    


public static class ViewHolder extends RecyclerView.ViewHolder 

    public int viewType;

    public ViewGroup mContainer;
    public View mDragHandle;
    public TextView titleTextView;
    public TextView positionTextView;
    public RecyclerView recyclerView;

    public ViewHolder(View itemView, int viewType) 
        super(itemView);
        this.viewType = viewType;
        mContainer = (ViewGroup) itemView.findViewById(R.id.container);
        mDragHandle = itemView.findViewById(R.id.drag_handle);
        titleTextView = (TextView) itemView.findViewById(R.id.title);
        positionTextView = (TextView) itemView.findViewById(R.id.position);
        recyclerView = (RecyclerView) itemView.findViewById(R.id.recycler_view);
    

最后,这是带有图片的嵌套子对象的适配器:

public class NestedAdapter extends RecyclerView.Adapter<NestedAdapter.PhotoViewHolder> 

private static final int PHOTO = 1;

private Context context;

ArrayList<String> photos;

/**
 * Default constructor, takes no data as nothing has been recieved from the API
 */

public NestedAdapter(ArrayList<String> photos) 
    this.photos = photos;


@Override
public PhotoViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) 

    this.context = viewGroup.getContext();
    View itemView;

    switch (viewType) 
        default: // Load default Message layout as bucketLists all have the same layout
            itemView = LayoutInflater.from(context).inflate(R.layout.fragment_photo_row, viewGroup, false);
            break;
    

    return new PhotoViewHolder(itemView, viewType);


@Override
public void onBindViewHolder(PhotoViewHolder viewHolder, final int position) 

    // Switch depending on the kind of View
    switch (getItemViewType(position)) 
        case PHOTO: // Subtract 1, padding has taken up a space
            final String photo = photos.get(position);

            Picasso.with(context)
                    .load(photo)
                    .placeholder(R.drawable.rocks) // Must use place holder or fit won't work!
                    .fit()
                    .centerCrop()
                    .into(viewHolder.photo);
            break;
    


@Override
public int getItemViewType(int position) 
    return PHOTO;


@Override
public int getItemCount() 
    return photos.size();



// ViewHolder for actual content
public final static class PhotoViewHolder extends RecyclerView.ViewHolder 

    public int viewType;        // Used to specify the view type.

    public ImageView photo;

    public PhotoViewHolder(View itemView, int ViewType) 
        super(itemView);

        switch (ViewType) 
            case PHOTO:
                viewType = PHOTO;
                photo = (ImageView) itemView.findViewById(R.id.photo);
                break;
        
    

【问题讨论】:

【参考方案1】:

我在 RecyclerView 和 CollapsingToolbarLayout 中遇到了同样的问题,其中 RecyclerView 位于 NestedScrollView 子布局内。

对我来说,解决方案是以编程方式设置:

mRecyclerView.setNestedScrollingEnabled(false);

注意:我尝试在 XML 中的 RecyclerView 上进行设置,但没有成功?

android:nestedScrollingEnabled="false"

另一个让 CollapsingToolbarLayout 滚动的技巧是为 嵌套滚动视图

android:minHeight="1000dp"

为什么是 1000dp? SupportDesignDemos 示例在这里: https://android.googlesource.com/platform/development/+/e088638/samples/SupportDesignDemos/res/layout/include_appbar_scrollview.xml

布局:

<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout>
        <android.support.design.widget.CollapsingToolbarLayout >

            <ImageView/>
            <android.support.v7.widget.Toolbar/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout android:minHeight="1000dp">

            <android.support.v7.widget.RecyclerView 
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
             />

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

【讨论】:

这适用于嵌套在外部 RecyclerView 中的 RecyclerView,方法是在外部设置 setNestedScrollingEnabled(false)。【参考方案2】:
mRecyclerView.setNestedScrollingEnabled(false);

【讨论】:

虽然此代码可能会回答问题,但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。【参考方案3】:

因此,尽管上述情况仍然成立,但我找到了解决方法。

解决方法包括将 ViewHolder RecyclerView 包装在一个 RelativeLayout 中,并在其上覆盖一个透明的可点击视图。就我而言,我使用了 TextView。

现在虽然修复了滚动,但仍然存在将点击传递到 ViewHolderRecyclerView 中右侧 ViewHolder 的问题。为了解决第二个挫折,我扩展了 GestureDetector.SimpleOnGestureListener 类以包含一个 recyclerView。然后,我在 wrapperTextView 上设置了一个 OnTouchListener,然后将 MotionEvent 转发到 GestureDetector.SimpleOnGestureListener 子类。

子类最终解释运动事件并将其传递给内部的RecyclerView,RecyclerView依次从点击的坐标中计算出被点击的子视图并调用子视图的performClick()。

【讨论】:

以上是关于ViewHolder 中的嵌套 RecyclerView 破坏了折叠工具栏布局的主要内容,如果未能解决你的问题,请参考以下文章

RecyclerView源码分析

Recyclerview ViewHolder中的TextView - OnClickListener

ViewHolder 中的 kotlin-android-extensions

ViewHolder 中的 onClick 无权访问适配器中的单击项目

DataBinding:如何使用 Kotlin 中的泛型创建具有多个 ViewHolder(多个布局)的 Recyclerview

recyclerview viewholder布局中的更改约束 - android