如何防止 RecyclerView 单元格的 child 在用户滚动时移动

How to prevent a child of a RecyclerView cell from moving while the user scrolls

我的 水平 RecyclerView 上有很长的宽度单元格, 我希望他们有一个 header 在用户水平滚动时保持静止。

- Recycler View (A)
-   -   Cell (parent) (B)
-   -   -   Header (C) <-- We want that to be still
-   -   -   Content (D)

视觉效果如下:

因此,我正在寻找一种方法:

1) 停止 header (C) 当用户在 RecyclerView (A)[=19 上拖动手指时改变位置=]

2) 像往常一样滚动单元格 (B),但是 将其 child (C) 的位置更改为相反的方向,以使header 即使它在移动(与 parent (B) 的相反方向)看起来仍然

这是我要构建的内容:

有什么想法吗?

p.s 1:我注意到很多SO答案,建议使用ItemDecoration,但所有可能的答案都有VERTICAL实现的代码,这与HORIZONTAL 实施。

p.s 2 我正在以编程方式创建所有视图内容,因此我不会使用布局文件。 (那是因为内容将是 react-native 视图,而我无法使用布局文件创建它们)。

p.s 3:我还注意到 ItemDecoration 是旧策略,最近的第 3 方库扩展了 LayoutManager

请说明一下,谢谢。

尽管可以将标题视图保留在 RecyclerView 中并使其保持静态,但我建议采用另一种方法。

标题可以继续在 RecyclerView 内部显示,但显示将被带到 RecyclerView 的顶部,如下所示:

- Title (C) <-- We want that to be still
- Recycler View (A)
-   -   Cell (parent) (B)
-   -   -   Content

A RecyclerView.OnScrollListener 将侦听新项目的出现并相应地更改标题。这样,随着新项目的出现,TextView 的标题将显示新标题。下面演示了这一点。

(这是用于演示目的的 bare-bones 实现。完整的应用程序会显示狗的品种图像和某种有意义的描述。)

这是实现此效果的代码:

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private LinearLayoutManager mLayoutManager;
    private RecyclerViewAdapter mAdapter;
    private TextView mBreedNameTitle;
    private int mLastBreedTitlePosition = RecyclerView.NO_POSITION;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        List<String> breedList = createBreedList();

        // This is where the breed title is displayed.
        mBreedNameTitle = findViewById(R.id.breedNameTitle);

        // Set up the RecyclerView.
        mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
        RecyclerView recyclerView = findViewById(R.id.recyclerView);
        mAdapter = new RecyclerViewAdapter(breedList);
        recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.setAdapter(mAdapter);

        // Add the OnScrollListener so we know when to change the breed title.
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                int lastVisible = mLayoutManager.findLastVisibleItemPosition();
                if (lastVisible == RecyclerView.NO_POSITION) {
                    return;
                }
                if (lastVisible != mLastBreedTitlePosition) {
                    mBreedNameTitle.setText(mAdapter.getItems().get(lastVisible));
                    mLastBreedTitlePosition = lastVisible;
                }
            }
        });
    }

    private List<String> createBreedList() {
        List<String> breedList = new ArrayList<>();
        breedList.add("Affenpinscher");
        breedList.add("Afghan Hound");
        breedList.add("Airedale Terrier");
        breedList.add("Akita");
        breedList.add("Alaskan Malamute");
        breedList.add("American Cocker Spaniel");
        breedList.add("American Eskimo Dog (Miniature)");
        breedList.add("American Eskimo Dog (Standard)");
        breedList.add("American Eskimo Dog (Toy)");
        breedList.add("American Foxhound");
        breedList.add("American Staffordshire Terrier");
        breedList.add("American Eskimo Dog (Standard)");
        return breedList;
    }

    @SuppressWarnings("unused")
    private final static String TAG = "MainActivity";
}

class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final List<String> mItems;

    RecyclerViewAdapter(List<String> items) {
        mItems = items;
    }

    @Override
    @NonNull
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;

        view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
        return new RecyclerViewAdapter.ItemViewHolder(view);
    }


    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        RecyclerViewAdapter.ItemViewHolder vh = (RecyclerViewAdapter.ItemViewHolder) holder;

        vh.mBreedImage.setImageDrawable(holder.itemView.getResources().getDrawable(R.drawable.no_image));
        vh.mBreedName = mItems.get(position);
    }

    @Override
    public int getItemCount() {
        return mItems.size();
    }

    public List<String> getItems() {
        return mItems;
    }

    static class ItemViewHolder extends RecyclerView.ViewHolder {
        private ImageView mBreedImage;
        private String mBreedName;

        ItemViewHolder(View itemView) {
            super(itemView);
            mBreedImage = itemView.findViewById(R.id.breedImage);
        }
    }
}

activity_main.xml

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:orientation="vertical">

    <TextView
        android:id="@+id/breedNameTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:fontFamily="sans-serif"
        android:textColor="@android:color/black"
        android:textSize="16sp"
        tools:text="Breed name" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" />
</LinearLayout>

item_layout.xml

<android.support.constraint.ConstraintLayout 
    android:id="@+id/cont_item_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white">

    <ImageView
        android:id="@+id/breedImage"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:contentDescription="Dog breed image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:text="@string/large_text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/breedImage"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

更新: 这是另一种方法,它设置 TextView 的左填充以使 header 具有粘性。 TextView 的负数 x-offset 被用作 header 的填充,使其在 TextView 内向右滑动并粘在屏幕的左侧。

结果如下:

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private LinearLayoutManager mLayoutManager;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        List<String> breedList = createBreedList();

        // Set up the RecyclerView.
        mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
        RecyclerView recyclerView = findViewById(R.id.recyclerView);
        RecyclerViewAdapter adapter = new RecyclerViewAdapter(breedList);
        recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.setAdapter(adapter);

        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                // Pad the left of the breed name so it stays aligned with the left side of the display.
                int firstVisible = mLayoutManager.findFirstVisibleItemPosition();
                View firstView = mLayoutManager.findViewByPosition(firstVisible);
                firstView.findViewById(R.id.itemBreedName).setPadding((int) -firstView.getX(), 0, 0, 0);

                // Make sure the other breed name has zero padding because we may have changed it.
                int lastVisible = mLayoutManager.findLastVisibleItemPosition();
                View lastView = mLayoutManager.findViewByPosition(lastVisible);
                lastView.findViewById(R.id.itemBreedName).setPadding(0, 0, 0, 0);
            }
        });
    }

    private List<String> createBreedList() {
        List<String> breedList = new ArrayList<>();
        breedList.add("Affenpinscher");
        breedList.add("Afghan Hound");
        breedList.add("Airedale Terrier");
        breedList.add("Akita");
        breedList.add("Alaskan Malamute");
        breedList.add("American Cocker Spaniel");
        breedList.add("American Eskimo Dog (Miniature)");
        breedList.add("American Eskimo Dog (Standard)");
        breedList.add("American Eskimo Dog (Toy)");
        breedList.add("American Foxhound");
        breedList.add("American Staffordshire Terrier");
        breedList.add("American Eskimo Dog (Standard)");
        return breedList;
    }

    @SuppressWarnings("unused")
    private final static String TAG = "MainActivity";

}

class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final List<String> mItems;

    RecyclerViewAdapter(List<String> items) {
        mItems = items;
    }

    @Override
    @NonNull
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;

        view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
        return new RecyclerViewAdapter.ItemViewHolder(view);
    }


    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        RecyclerViewAdapter.ItemViewHolder vh = (RecyclerViewAdapter.ItemViewHolder) holder;

        vh.mBreedImage.setImageDrawable(holder.itemView.getResources().getDrawable(R.drawable.no_image));
        vh.mBreedName.setPadding(0, 0, 0, 0);
        vh.mBreedName.setText(mItems.get(position));
    }

    @Override
    public int getItemCount() {
        return mItems.size();
    }

    static class ItemViewHolder extends RecyclerView.ViewHolder {
        private ImageView mBreedImage;
        private TextView mBreedName;

        ItemViewHolder(View itemView) {
            super(itemView);
            mBreedImage = itemView.findViewById(R.id.breedImage);
            mBreedName = itemView.findViewById(R.id.itemBreedName);
        }
    }
}

activity_main.xml

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" />
</LinearLayout>

item_layout.xml

<android.support.constraint.ConstraintLayout 
    android:id="@+id/cont_item_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white">

    <TextView
        android:id="@+id/itemBreedName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:ellipsize="none"
        android:fontFamily="sans-serif"
        android:singleLine="true"
        android:textColor="@android:color/black"
        android:textSize="16sp"
        tools:text="Breed name" />

    <ImageView
        android:id="@+id/breedImage"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:contentDescription="Dog breed image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/itemBreedName"
        app:layout_constraintVertical_bias="1.0"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:text="@string/large_text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/breedImage"
        app:layout_constraintTop_toBottomOf="@+id/itemBreedName" />

</android.support.constraint.ConstraintLayout>

我正在使用这个答案作为解决方案whosebug.com/a/44327350/4643073效果很好!

如果你想要水平粘性header,只需更改与"verticalness"相关的所有内容,将getY()更改为getX(),将getTop()更改为getRight() ], getHeight()getWidth().

为什么你认为ItemDecoration是老套路?它没有被弃用,它不会扰乱你的适配器来扩展一些特定的 class,它运行良好。

希望这个库能有所帮助:TableView

<com.evrencoskun.tableview.TableView
    android:id="@+id/content_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    app:column_header_height="@dimen/column_header_height"
    app:row_header_width="@dimen/row_header_width"
    app:selected_color="@color/selected_background_color"
    app:shadow_color="@color/shadow_background_color"
    app:unselected_color="@color/unselected_background_color" />

我最终做了以下事情(感谢 Cheticamp 给我的灵感):

- Helper Header (C) <-- We now have an extra title view
- Recycler View (A)
-   -   Cell (parent) (B)
-   -   -   Header (C) <-- Plus the typical titles within our cells
-   -   -   Content

如您所见:

  • 我们现在有一个助手 Header 视图位于我们的 RecyclerView
  • 之外
  • 我们的 RecyclerView 中的 Header 视图继续移动,但在它们的正上方我们放置了辅助视图

下面是一些实际代码,看看会发生什么:

public class CalendarView 扩展了 LinearLayout { 受保护的 LinearLayoutManager mLayoutManager; protected HeaderView helperHeaderView; 受保护的 RecyclerView recyclerView;

public CalendarView(final ReactContext context) {
    super(context);


    setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
    setOrientation(LinearLayout.VERTICAL);

    helperHeaderView = new HeaderView(context);
    addView(helperHeaderView);




    final DailyViewAdapter adapter = new DailyViewAdapter(context) {
        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            super.onBindViewHolder(holder, position);

            // if our header is not assinged any position yet (we haven't given it any data yet)
            if (helperHeaderView.getLastPosition() == null) {
                updateHeaderData(helperHeaderView, globals.getInitialPosition()); // hydrate it
            }
        }
    };

    recyclerView = new SPRecyclerView(context) {
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);

            if (mLayoutManager == null) {
                mLayoutManager = (LinearLayoutManager) getLayoutManager();
            }

            // the width of any header
            int headerWidth = helperHeaderView.getWidth();

            // get the position of the first visible header in the recyclerview
            int firstVisiblePos = mLayoutManager.findFirstVisibleItemPosition();

            // get a ref of the Cell that contains that header
            DayView firstView = (DayView) mLayoutManager.findViewByPosition(firstVisiblePos);

            // get the X coordinate of the first visible header
            float firstViewX = firstView.getX();



            // get the position of the last visible header in the recyclerview
            int lastVisiblePos = mLayoutManager.findLastVisibleItemPosition();

            // get a ref of the Cell that contains that header
            DayView lastView = (DayView) mLayoutManager.findViewByPosition(lastVisiblePos);

            // get the X coordinate of the last visible header
            float lastViewX = lastView.getX();


            // if the first visible position is not the one our header is set to
            if (helperHeaderView.getLastPosition() != firstVisiblePos) {
                // update the header data
                adapter.updateHeaderData(helperHeaderView, firstVisiblePos);
            }

            // if the first visible is not also the last visible (happens when there's only one Cell on screen)
            if (firstVisiblePos == lastVisiblePos) {
                // reset the X coordinates
                helperHeaderView.setX(0);
            } else { // else if there are more than one cells on screen
                // set the X of the helper header, to whatever the last visible header X was, minus the width of the header
                helperHeaderView.setX(lastViewX - headerWidth);
            }

        }
    };


    // ...
  • 现在剩下要做的就是将 parent 布局转换为 RelativeLayout 以使实际视图重叠(助手 header 视图位于回收站视图的正上方)。

  • 此外,您可能想尝试在需要时将辅助视图 alpha 设置为零,以确保它看起来不错

希望对以后的人有所帮助。