Java RecyclerView 中的 Android 居中项

Android Centering Item in RecyclerView

提问by skycrew

Im a newbie in android. Im not sure why I cant center my item in RecyclerView.

我是安卓新手。我不知道为什么我不能在 RecyclerView 中居中我的项目。

What I want is like below image :-

我想要的是下图：-

What android render is like below image :-

什么 android 渲染如下图所示：-

Is there a way to push items in RecyclerView to center? So it will look like this :-

有没有办法将 RecyclerView 中的项目推送到中心？所以它看起来像这样：-

I also provide the layout files as below :-

我还提供如下布局文件：-

recycler_item.xml

recycler_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:id="@+id/calendar_itemContainer">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="April"
        android:id="@+id/calendar_txtMonth"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textColor="#ff58636d"
        android:textSize="16sp"
        android:gravity="center|center_vertical|center_horizontal"
        android:paddingTop="8dp"
        android:paddingLeft="12dp"
        android:paddingRight="12dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="21"
        android:id="@+id/calendar_txtDay"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/calendar_txtMonth"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textColor="#ff58636d"
        android:textSize="40sp"
        android:layout_marginTop="-10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingBottom="5dp"
        android:gravity="center|center_vertical|center_horizontal" />
</RelativeLayout>

fragment_calendar.xml

fragment_calendar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/calendar_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="horizontal"
        android:background="#ff2c3e50" />
</RelativeLayout>

and the java codes :-

和java代码：-

CalendarAdapter mAdapter = new CalendarAdapter(mDataset);
mLayoutManager = new LinearLayoutManager(getActivity(), LinearLayoutManager.HORIZONTAL, false);
mRecyclerView.setLayoutManager(mLayoutManager);
mAdapter.setCalendarCallbacks(this);
mRecyclerView.setAdapter(mAdapter);
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
selectItem(mCurrentSelectedPosition);

回答by majormajors

I was trying to do what I think is the same thing you're asking when I came across this post. Here's the solution I ended up using.

当我看到这篇文章时，我正在尝试做我认为与您所问的相同的事情。这是我最终使用的解决方案。

Create your own subclass of LinearLayoutManager and override getPaddingLeft() and getPaddingRight() like so.

创建您自己的 LinearLayoutManager 子类并像这样覆盖 getPaddingLeft() 和 getPaddingRight() 。

public class CustomLayoutManager extends LinearLayoutManager {
    private int mParentWidth;
    private int mItemWidth;

    public CustomLayoutManager(Context context, int parentWidth, int itemWidth) {
        super(context);
        mParentWidth = parentWidth;
        mItemWidth = itemWidth;
    }

    @Override
    public int getPaddingLeft() {
        return Math.round(mParentWidth / 2f - mItemWidth / 2f);
    }

    @Override
    public int getPaddingRight() {
        return getPaddingLeft();
    }
}

parentWidthshould be the width of the RecyclerViewand itemWidthshould be the width of each of your child views, both in pixels. Obviously, this only works if you know that all your child views will be the same width.

parentWidth应该是宽度RecyclerView和itemWidth应该是每个孩子的意见的宽度，无论是在像素。显然，这仅在您知道所有子视图的宽度相同时才有效。

Then, just use this layout manager with your RecyclerView

然后，只需将此布局管理器与您的 RecyclerView

回答by IZI_Shadow_IZI

@majormajors answer was close but will start by centering the first item in the list and not center the items (as a whole) like shown in the images. There needs to be an additional calculation done to check the total item width. I've modified the code posted by @majormajors.

@majormajors 的答案很接近，但首先将列表中的第一项居中，而不是像图像中显示的那样将项目（作为一个整体）居中。需要进行额外的计算来检查总项目宽度。我修改了@majormajors 发布的代码。

public class CenterItemLayoutManager extends LinearLayoutManager {
  private final int parentWidth;
  private final int itemWidth;
  private final int numItems;

  public CenterItemLayoutManager(
      final Context context,
      final int orientation,
      final int parentWidth,
      final int itemWidth,
      final int numItems) {
    super(context, orientation, false);
    this.parentWidth = parentWidth;
    this.itemWidth = itemWidth;
    this.numItems = numItems;
  }

  @Override
  public int getPaddingLeft() {
    final int totalItemWidth = itemWidth * numItems;
    if (totalItemWidth >= parentWidth) {
      return super.getPaddingLeft(); // do nothing
    } else {
      return Math.round(parentWidth / 2f - totalItemWidth / 2f);
    }
  }

  @Override
  public int getPaddingRight() {
    return getPaddingLeft();
  }
}

In this case the items will be centered only if they do not exceed the recyclerview's width...otherwise it will just act as it normally would.

在这种情况下，只有当项目不超过 recyclerview 的宽度时，项目才会居中……否则它将像往常一样运作。

回答by Maxi

set recyclerview to:

将 recyclerview 设置为：

android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"

fixed it for me

为我修好了

回答by Jishin Dev

Easy as pie with the new class added to the support library- android.support.v7.widget.LinearSnapHelper

将新类添加到支持库中就像馅饼一样简单- android.support.v7.widget.LinearSnapHelper

Just create an instance and attach it to the recyclerView as below-

只需创建一个实例并将其附加到 recyclerView 如下-

LinearSnapHelper snapHelper  = new LinearSnapHelper();
snapHelper.attachToRecyclerView(recyclerView);

回答by sonida

Just added android:orientation="vertical"to root of item view. Let's try it.

刚刚添加android:orientation="vertical"到项目视图的根。让我们试试吧。

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="180dp"
                  android:orientation="vertical"
                  android:padding="4dp">

        <ImageView
            android:id="@+id/movie_column_photo"
            android:layout_width="80dp"
            android:layout_height="120dp"
            android:layout_gravity="center_horizontal"/>

        <TextView
            android:id="@+id/movie_column_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"/>
    </LinearLayout>

回答by manuel

This worked for me:

这对我有用：

    LinearSnapHelper snapHelper = new LinearSnapHelper();
    snapHelper.attachToRecyclerView(mRecyclerView);

    //This is used to center first and last item on screen
    mRecyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            int position = parent.getChildViewHolder(view).getAdapterPosition();

            if (position == 0 || position == state.getItemCount() - 1) {

                int elementWidth = (int)getResources().getDimension(R.dimen.list_element_width);
                int elementMargin = (int)getResources().getDimension(R.dimen.list_element_margin);

                int padding = Resources.getSystem().getDisplayMetrics().widthPixels / 2 - elementWidth - elementMargin/2;

                if (position == 0) {
                    outRect.left = padding;

                } else {
                    outRect.right = padding;
                }
            }
        }
    });

Mind elementWidth and elementMargin are fixed values in my dimens.xml file that I use in my xml layout:

注意 elementWidth 和 elementMargin 是我在 xml 布局中使用的我的 dimens.xml 文件中的固定值：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/list_element_margin"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_margin="@dimen/list_element_width">
    <TextView
        android:id="@+id/day_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

回答by Zahid Rasheed

Add below decorator to the recycler view;

将下面的装饰器添加到回收器视图中；

class CenterAlignDecorator : RecyclerView.ItemDecoration() {
    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        parent.adapter?.let {
            if (parent.getChildAdapterPosition(view) == 0 && view.width > 0) {
                val itemSize = view.width + view.paddingStart + view.paddingEnd
                val itemLimit = (parent.width / itemSize) + 1
                if (state.itemCount <= itemLimit) {
                    val padding = (parent.width - (it.itemCount * itemSize)) / 2
                    outRect.set(padding, 0, 0, 0)
                }
            } else {
                outRect.set(0, 0, 0, 0)
            }
        }
    }
}