在相对布局中正确对齐图像和文本？

Question

我有一个商店布局，其中包含三个不同大小的图像。在它们的右侧，有代表价格的文本。如何将图像和文本对齐？并将屏幕中间放在图像和文本之间。这是我的布局：

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

<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lives"
        android:focusable="false" android:background="@drawable/heart_image"
        android:layout_below="@+id/money" android:layout_centerHorizontal="true"/>
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:id="@+id/price1"
        android:textSize="30sp" android:textColor="#ff000000"
        android:layout_alignTop="@+id/lives" android:layout_toRightOf="@+id/lives"
        android:layout_toEndOf="@+id/lives"/>
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/money" android:layout_alignParentTop="true" android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" android:textSize="40dp" android:textColor="#ff000000"/>
<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/monstertoprightcolored"
        android:id="@+id/hardmode"
        android:layout_centerVertical="true" android:layout_centerHorizontal="true"/>
<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/price2"
            android:textSize="30dp"
            android:textColor="#ff000000"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/hardmode"
            android:layout_toEndOf="@+id/hardmode"
            android:layout_above="@+id/price3"/>
<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/monsterbottomleftcolored"
        android:id="@+id/reversedmode"
        android:layout_alignParentBottom="true" android:layout_alignLeft="@+id/hardmode"
        android:layout_alignStart="@+id/hardmode"/>
<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/price3"
            android:textSize="30dp"
            android:textColor="#ff000000"
            android:layout_marginTop="26dp"
            android:layout_below="@+id/hardmode"
            android:layout_toRightOf="@+id/price2"
            android:layout_toEndOf="@+id/price2"/>

Answer 1

您可以为此使用线性布局。图像和文本可以在线性布局中垂直拆分。这种线性布局中的每一个都可以水平放置。您能否添加一个屏幕截图，说明您的布局应该如何更好地理解。

Answer 2

TableLayout 在这种情况下可能会更好。这是您的布局的开始：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:stretchColumns="*">

    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:layout_gravity="right"
            android:id="@+id/money"
            android:textSize="40dp"
            android:textColor="#ff000000"
            tools:text="money" />
    </TableRow>

    <TableRow>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/lives"
            android:focusable="false"
            android:background="@drawable/heart_image"
            />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/price1"
            android:textSize="30sp"
            android:textColor="#ff000000"
            tools:text="price1" />
    </TableRow>

    <TableRow>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/monstertoprightcolored"
            android:id="@+id/hardmode" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/price2"
            android:textSize="30dp"
            android:textColor="#ff000000"
            tools:text="price2" />
    </TableRow>

    <TableRow>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/monsterbottomleftcolored"
            android:id="@+id/reversedmode" />
        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/price3"
            android:textSize="30dp"
            android:textColor="#ff000000"
            android:layout_marginTop="26dp"
            tools:text="price3" />
    </TableRow>

</TableLayout>

请注意，为了“将屏幕中间置于图像和文本之间”，两列的宽度必须相等。这是通过在TableLayout 中设置android:stretchColumns="*" 并在TableRows 的子项中设置android:layout_width="0dp" 和android:layout_weight="1" 来完成的。

请参阅tablelayout - Set equal width of columns in table layout in Android 了解更多信息。

Answer 3

这里试试这个，希望能帮到你，也希望我能正确理解你的问题。

<?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:orientation="vertical"
    android:layout_centerHorizontal="true"
    android:gravity="center_horizontal"
    android:background="@drawable/ic_launcher">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lives"
        android:focusable="false"
        android:background="@drawable/ic_launcher"
        android:layout_below="@+id/money"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:id="@+id/price1"
        android:textSize="30sp"
        android:text="Text"
        android:textColor="#ff000000"
        android:layout_alignTop="@+id/lives"
        android:layout_toRightOf="@+id/lives"
        android:layout_toEndOf="@+id/lives" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/money"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textSize="40dp"
        android:text="Text"
        android:textColor="#ff000000" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        android:id="@+id/hardmode"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:id="@+id/price2"
        android:textSize="30dp"
        android:textColor="#ff000000"
        android:text="Text"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/hardmode"
        android:layout_toEndOf="@+id/hardmode"
        android:layout_above="@+id/price3" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        android:id="@+id/reversedmode"
        android:layout_alignParentBottom="true"
        android:layout_alignLeft="@+id/hardmode"
        android:layout_alignStart="@+id/hardmode" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:id="@+id/price3"
        android:textSize="30dp"
        android:textColor="#ff000000"
        android:layout_marginTop="26dp"
        android:layout_below="@+id/hardmode"
        android:text="Text"
        android:layout_toRightOf="@+id/price2"
        android:layout_toEndOf="@+id/price2" />
</LinearLayout>