具有 3 x 3 项水平滚动的 RecyclerView答案

【问题标题】：RecyclerView with 3 by 3 item Horizontal scroll具有 3 x 3 项水平滚动的 RecyclerView
【发布时间】：2018-11-20 17:38:42
【问题描述】：

在我的项目中，我需要在水平滚动视图上用左右箭头显示 3 x 3 中的项目列表。如果我单击右箭头，则下一个 3 项应显示如下图所示

我很困惑，我需要将 ViewPager 或 RecyclerView 与 SnapHelper 或 PagerSnapHelper 一起使用。关于如何实现它还有其他建议吗

【问题讨论】：

基本上，您是在征求关于在这种情况下使用哪个组件的意见？
是的，这是最好的选择，或者我可以在这种情况下使用的任何其他组件

标签： android android-recyclerview android-viewpager pagersnaphelper

【解决方案1】：

要回答这个问题，您应该使用 viewpager 并在任何页面中使用回收器并在页面中 3 x 3 发送数据并将数据设置到回收器。

您应该在父 xml 中添加 Viewpager 的第一步：

activity_main.xml

<ImageView
        android:id="@+id/left_arrow"
        android:layout_width="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignTop="@+id/view_pager"
        android:rotation="180"
        android:padding="8dp"
        android:layout_alignBottom="@id/view_pager"
        android:src="@drawable/ic_arrow"/>

<android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:id="@+id/view_pager"
        android:layout_toLeftOf="@id/right_arrow"
        android:layout_toRightOf="@id/left_arrow"
        android:layout_height="150dp"/>

<com.rd.PageIndicatorView
        android:id="@+id/pageIndicatorView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view_pager"
        app:piv_animationType="worm"
        app:piv_dynamicCount="true"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        app:piv_interactiveAnimation="true"
        app:piv_radius="3dp"
        app:piv_unselectedColor="#999999"
        app:piv_selectedColor="#000000"
        app:piv_viewPager="@id/view_pager"
        attrs:piv_padding="8dp" />
<ImageView
        android:id="@+id/right_arrow"
        android:padding="8dp"
        android:layout_alignTop="@+id/view_pager"
        android:layout_alignBottom="@id/view_pager"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_arrow"/>

在这一步中，您应该创建 Viewpager 适配器：

pageAdapter.kt

override fun getItem(position: Int): Fragment {
    val firstItem = ((position + 1) * 3) - 2
    val lastItem = ((position + 1) * 3)
    val itemSet = arrayListOf<String>()
    for (i in firstItem..lastItem) {
        if (i <= items.size)
            itemSet.add(items[i - 1])
    }
    return ItemFragment.newInstance(itemSet)
}

override fun getCount(): Int {
    return size
}

在第三步中，您应该创建一个片段来显示 viewPager 的每个页面，并在 Oncreate 中设置回收器适配器并将数据发送到适配器：

项目片段

// Creates the view controlled by the fragment
val view = inflater.inflate(R.layout.page, container, false)
val recycler = view.findViewById<RecyclerView>(R.id.recycler)

// Retrieve and display the movie data from the Bundle
val args = arguments
recycler.layoutManager = GridLayoutManager(activity,3)
recycler.adapter = ItemAdapter(args?.getStringArrayList("items")!!, this.activity!!)

最后只创建 RecyclerAdapter 并向列表中的每个项目显示数据：

项目适配器.kt

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    return ViewHolder(LayoutInflater.from(context).inflate(R.layout.item, parent, false))
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder?.title?.text = items.get(position)
}

override fun getItemCount(): Int {
    return items.size
}

结果：

如果您想查看完整源代码，请前往link

【讨论】：

【解决方案2】：

滚动通过 smoothScrollToPosition 怎么样？像这样的

int offset = 3;
int size = objectsList.size()-1;
@OnClick{
recyclerView.smoothScrollToPosition(offset);
if((offset+3)<size) {
   offset = offset + 3;
} else 
    offset = size;
}

【讨论】：