RecyclerView显示许多项目并在中心显示当前项目

时间:2019-05-27 01:52:54

标签: android-recyclerview

喜欢这个。

  • 在屏幕上显示三个项目,但左侧和右侧项目仅显示边缘
  • 当索引= 0时,在中心显示第一项
  • 当索引= n时,将当前项目显示在中心
|-----------------------------------|
|                                   |
|                                   |
|         |---------------|    |----|
|         |               |    |    |
|         |               |    |    |
|         |               |    |    |
|         |               |    |    |
|         |       1       |    |  2 |
|         |               |    |    |
|         |               |    |    |
|         |               |    |    |
|         |               |    |    |
|         |---------------|    |----|
|                                   |
|                                   |
|-----------------------------------|


|-----------------------------------|
|                                   |
|                                   |
|----|    |---------------|    |----|
|    |    |               |    |    |
|    |    |               |    |    |
|    |    |               |    |    |
|    |    |               |    |    |
|  1 |    |       2       |    |  3 |
|    |    |               |    |    |
|    |    |               |    |    |
|    |    |               |    |    |
|    |    |               |    |    |
|----|    |---------------|    |----|
|                                   |
|                                   |
|-----------------------------------|

我尝试过SnapHelper,但我不知道如何

3 个答案:

答案 0 :(得分:0)

LinearLayout项行布局中使用RecyclerView's,然后将android:layout_gravity="center"赋予LinearLayout

答案 1 :(得分:0)

基本上有两个需要创建的布局文件,一个是activity_main.xml,另一个是显示RecyclerView中每个项目的布局。认为布局文件的名称为layout_r.xml

  
      
  1. activity_main.xml
  2.   
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
    <RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"    <!--This can be changed to wrap_content or match_parent, even though match_parent makes single view on the screen-->
        android:layout_height="wrap_content">
    </RecyclerView>
</LinearLayout>
  
      
  1. layout_r.xml
  2.   
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
    <TextView
        android:id="@+id/tvText"
        android:text="Add text here"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <!--............And rest of the views..............-->

</LinearLayout>

答案 2 :(得分:0)

为了使第一个和最后一个项目居中,您需要在RecyclerView的开头和结尾处创建额外的空间。一种简单的方法是使用ItemDecoration,如下所示:

class BoundsOffsetDecoration : ItemDecoration() {
    override fun getItemOffsets(outRect: Rect,
                                view: View,
                                parent: RecyclerView,
                                state: RecyclerView.State) {
        super.getItemOffsets(outRect, view, parent, state)

        val itemPosition = parent.getChildAdapterPosition(view)

        // It is crucial to refer to layoutParams.width (view.width is 0 at this time)!
        val itemWidth = view.layoutParams.width
        val offset = (parent.width - itemWidth) / 2

        if (itemPosition == 0) {
            outRect.left = offset
        } else if (itemPosition == state.itemCount - 1) {
            outRect.right = offset
        }
    }
}

对于“中心”效果,应使用PagerSnapHelper

PagerSnapHelper().attachToRecyclerView(recyclerView)

如果您需要更多详细信息,我已经写了Medium post,描述了使用RecyclerView和SnapHelper逐步实现这种轮播的实现。