Question

喜欢这个。

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

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


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

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

Answer 1

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

Answer 2

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

activity_main.xml

<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>

layout_r.xml

<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>

Answer 3

为了使第一个和最后一个项目居中，您需要在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逐步实现这种轮播的实现。

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

3 个答案: