Android网格布局在水平方向上居中

20

我试图创建一个有两列的GridLayout,并使其居中。

我的实际设计是:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    custom:rowCount="4"
    custom:columnCount="2"
    android:orientation="horizontal">
    <TimeTableKeeper.Tile
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:gravity="top|left"
        android:background="#00FF00"
        custom:color="green"
        custom:layout_row="0"
        custom:layout_column="0" />
    <TimeTableKeeper.Tile
        android:layout_width="75dp"
        android:gravity="top|left"
        android:layout_height="75dp"
        android:background="#00FF00"
        custom:color="blue"
        custom:layout_row="0"
        custom:layout_column="1" />
</GridLayout>

看起来是这样的:

我希望这些按钮在中间,并且它们之间有完美的间距。

这可能吗?

--编辑:

我也尝试过将其放入LinearLayout中,但没有结果:

<?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="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    <GridLayout xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        custom:rowCount="4"
        custom:columnCount="2"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_gravity="center">
        <TimeTableKeeper.Tile
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:background="#00FF00"
            custom:color="green"
            custom:layout_row="0"
            custom:layout_column="0" />
        <TimeTableKeeper.Tile
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:background="#00FF00"
            custom:color="blue"
            custom:layout_row="0"
            custom:layout_column="1" />
    </GridLayout>
</LinearLayout>

为什么不在具有属性android:gravity="center"LinearLayout内使用GridLayout?! - luiscosta
尝试过,但没有结果。详见帖子编辑。 - Tomasz
3
当然不会改变,因为你必须在GridLayout中使用属性 android:layout_width="wrap_content" - luiscosta
项目之间的间距怎么样?谢谢! - Tomasz
请参考此链接:https://dev59.com/dGkw5IYBdhLWcg3wQ4Zc - luiscosta
6个回答

44

使用layout_width="wrap_content"让网格水平环绕其内容,并将其layout_gravity设置为center

<GridLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    // ......
    >

7
不,这并不使它水平居中。 - IgorGanapolsky
3
这将使格子表面上的单元格居中。类似这样:|CCCC|。 - Alen Siljak
1
这个解决方案对我来说非常完美。 - Mahbubur Rahman Khan

9

来自GridLayout文档

GridLayout对多余空间的分配是基于优先级而不是权重的。

(...)

要使列拉伸,请确保其中所有组件都定义了gravity。

因此,显然需要将layout_gravity设置为android:layout_gravity="top|center"(我没有测试过,但根据文档应该是这样的)。


1
这应该是被接受的答案。因为它完美地运行正常。 - Naveen Niraula

6
你离目标已经很接近了。我认为这个方案可以解决问题:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<GridLayout

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    custom:rowCount="4"
    custom:columnCount="2"

    android:layout_gravity="center_horizontal"
    android:orientation="horizontal">
    <TimeTableKeeper.Tile
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:background="#00FF00"
        custom:color="green"
        custom:layout_row="0"
        custom:layout_column="0" />
    <TimeTableKeeper.Tile
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:background="#00FF00"
        custom:color="blue"
        custom:layout_row="0"
        custom:layout_column="1" />
</GridLayout>
</FrameLayout>

是的,在这种情况下,FrameLayout 比 LinearLayout 更好用。 - IgorGanapolsky

0
如果您正在使用约束布局,请在网格布局上使用wrap content,并在其中创建项目。它将居中于屏幕。
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/item"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:columnCount="2"
android:useDefaultMargins="true"
/>

0
下面的代码解决了我的问题。
<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">

 <GridLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_centerHorizontal="true"
    android:layout_margin="30dp"
    android:columnCount="3"
    android:rowCount="4"
    android:useDefaultMargins="true">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

     <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


 </GridLayout>

 </RelativeLayout>

-2

复制这个计算器布局的示例 =)

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    >
    <!-- android:useDefaultMargins="true" (OPTIONAL) -->
    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:useDefaultMargins="true" 
        >
        <Button
            android:layout_column="0"
            android:layout_row="0"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="/"/>
        <Button
            android:layout_column="1"
            android:layout_row="0"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="1"/>
        <Button
            android:layout_column="2"
            android:layout_row="0"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="2"/>
        <Button
            android:layout_column="3"
            android:layout_row="0"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="3"/>
        <Button
            android:layout_column="0"
            android:layout_row="1"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="*"/>
        <Button
            android:layout_column="1"
            android:layout_row="1"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="4"/>
        <Button
            android:layout_column="2"
            android:layout_row="1"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="5"/>
        <Button
            android:layout_column="3"
            android:layout_row="1"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="6"/>
        <Button
            android:layout_column="0"
            android:layout_row="2"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="-"/>
        <Button
            android:layout_column="1"
            android:layout_row="2"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="7"/>
        <Button
            android:layout_column="2"
            android:layout_row="2"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="8"/>
        <Button
            android:layout_column="3"
            android:layout_row="2"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="9"/>
        <Button
            android:layout_column="0"
            android:layout_row="3"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="+"/>
        <Button
            android:layout_column="1"
            android:layout_row="3"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="0"/>
        <Button
            android:layout_column="2"
            android:layout_row="3"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="00"/>
        <Button
            android:layout_column="3"
            android:layout_row="3"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="="/>

    </GridLayout>


</LinearLayout>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接