在Gridview中居中对齐项目 [英] Center-align items in Gridview

问题描述

我正在Android Studio上玩游戏，但Grid View组件出现问题.我无法将网格视图内的项目居中对齐，例如之后图片.我尝试了几种方法，例如android:stretchMode或android:layout_centerHorizontal，但这无济于事.这是我的XML代码:

I'm making a game on Android Studio and have an issue with Grid View component. I can't align center the items inside Grid View like After image. I try several ways like android:stretchMode or android:layout_centerHorizontal but it doesn't help. Here is my XML code:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@android:color/holo_orange_light"
        android:layout_weight="8"
        android:layout_gravity="center">

        <GridView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10px"
            android:id="@+id/gridAnswersChar"
            android:numColumns="8"
            android:gravity="center">
        </GridView>

</RelativeLayout>

之前:

之后:

推荐答案

希望您使用GridView并不是严格的要求，因为我认为您所寻找的基本上是不可能的.但是，如果您愿意使用RecyclerView，那么我为您提供了一个解决方案.

Hopefully it is not a strict requirement for you that you use GridView, as I believe what you're looking for is essentially impossible. However, if you're willing to use RecyclerView instead, I have a solution for you.

此解决方案将利用Google的 FlexboxLayout 项目的一部分FlexboxLayoutManager:

This solution will make use of FlexboxLayoutManager, a part of Google's FlexboxLayout project: https://github.com/google/flexbox-layout

我的解决方案的完整代码在这里可见: https://gist.github.com/zizibaloob/0c44bfe59b371b5ae0bd2edcb4a7e592

Full code for my solution is visible here: https://gist.github.com/zizibaloob/0c44bfe59b371b5ae0bd2edcb4a7e592

在这里我将介绍重要的部分.首先，在MainActivity.onCreate()中设置FlexboxLayoutManager:

I'll cover the important bits here. First, the setup of FlexboxLayoutManager in MainActivity.onCreate():

FlexboxLayoutManager manager = new FlexboxLayoutManager(this, FlexDirection.ROW);
manager.setJustifyContent(JustifyContent.CENTER);

RecyclerView recycler = (RecyclerView) findViewById(R.id.recycler);
recycler.setLayoutManager(manager);

创建布局管理器时，我们传递FlexDirection.ROW告诉它我们希望它水平放置项目(即填充一行然后流到下一行，而不是填充列然后流移至下一列.

When we create the layout manager, we pass FlexDirection.ROW to tell it we want it to lay our items out horizontally (i.e. fill up a row and then flow to the next row, rather than filling up a column and then flowing to the next column).

然后我们使用JustifyContent.CENTER调用setJustifyContent()告诉经理我们希望部分填充的行居中.

We then call setJustifyContent() using JustifyContent.CENTER to tell the manager that we want partially-filled rows to be centered.

第二个重要的方面是我们模仿GridView的行为及其具有设置的列数的能力的方式.这段代码在MyAdapter.onCreateViewHolder():

The second important bit is the way in which we mimic the behavior of GridView and its ability to have a set number of columns. This code is in MyAdapter.onCreateViewHolder():

ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) itemView.getLayoutParams();
layoutParams.width = (parent.getWidth() / 4) - layoutParams.leftMargin - layoutParams.rightMargin;
itemView.setLayoutParams(layoutParams);

此处的键是(parent.getWidth() / 4)，它为每个项目视图提供了可用宽度的四分之一.如果您想要不同的列数，只需将4更改为8，依此类推.

The key here is (parent.getWidth() / 4), which gives each item view one quarter of the available width. If you want a different number of columns, simply change the 4 to an 8, etc.

我们还从宽度中减去了leftMargin和rightMargin，因为我们的项目视图具有边距，我们需要为其留出空间.如果您的视图没有边距，则可以跳过此操作.

We also subtract leftMargin and rightMargin from the width because our item views have margin, and we need to leave space for them. If your views won't have margins, you can skip this.

将它们放在一起，您将得到一个看起来像这样的应用程序:

Put it all together and you get an app that looks like this:

这篇关于在Gridview中居中对齐项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！