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

时间:2018-11-20 17:38:43

标签: android android-recyclerview android-viewpager pagersnaphelper

在我的项目中,我需要使用向左和向右箭头在水平滚动视图中以3 x 3显示项目列表。如果我单击向右箭头,下3个项目应显示如下图

enter image description here

我很困惑,我需要使用带有SnapHelper或PagerSnapHelper的ViewPager或RecyclerView。关于如何实现它还有其他建议

2 个答案:

答案 0 :(得分:0)

通过smoothScrollToPosition滚动怎么样? 像这样

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

答案 1 :(得分:-1)

要回答这个问题,您应该使用viewpager,在任何页面中都使用recycler并在页面中按3 x 3发送数据并将数据设置为recycler。

  1. 您应该在父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"/>
    

  2. 在此步骤中,您应该创建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
    }
    
  3. 在第三步中,您应该创建一个片段以显示viewPager的每个页面,并且仅在Oncreate set recycler适配器中并将数据发送到适配器:

    ItemFragment

    // 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!!)
    
  4. 最后一次创建RecyclerAdapter并显示列表中每个项目的数据:

    ItemAdapter.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
    }
    

    结果:

    enter image description here

如果您想查看完整的源代码,只需转到此link