如何将图像按钮对齐到另一个按钮下方？答案

【问题标题】：How can I align an imagebutton under anothe one?如何将图像按钮对齐到另一个按钮下方？
【发布时间】：2016-02-08 13:09:59
【问题描述】：

我在水平线性布局中有三个 imageButton，我想在左上 imageButton 的正下方再添加一个 imageButton（当左上 imageButton 开始和结束时，我希望它下面的 imageButton 也一样）。一切都在垂直线性布局中。我无法将向下的 imageButton 与向上的垂直对齐。我怎样才能做到这一点？有什么想法吗？

我的代码是这样的：

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp"
    android:gravity="center">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton11"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton12"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton13"
        android:background="@drawable/image"
        android:layout_gravity="center"
        android:layout_marginRight="30dp"/>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp"
    android:gravity="left">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton14"
        android:background="@drawable/image"
        android:layout_marginRight="30dp"/>

</LinearLayout>

【问题讨论】：

你从这段代码中得到了什么结果，你能发一个截图或img吗？
它将我的最后一个 imageButton 放在其他三个之下，但在开始的第一个之前。所以有一个（空格，然后是三个imageuttons）-->所有这些在一行中，然后还有另一个imageButton，在空格下面
这令人困惑。您应该尝试发布屏幕截图。否则尝试 RelativeLayout 并使用 android:layout_below
@Mary “它把我的最后一个 imageButton 放在其他三个之下，但在开始的第一个之前”。我不知道你是什么意思..
顺便说一下，您不需要使用相对布局来将一个视图放在另一个视图下方，也可以使用线性布局来完成。屏幕截图将使我们更轻松地提供帮助。

标签： android android-studio vertical-alignment screens

【解决方案1】：

您可以尝试在您想要位于另一个图像按钮下的图像按钮中使用RelativeLayout，并将其设置在您想要位于其顶部的图像按钮下方

android:layout_below="@+id/imagebutton1"

【讨论】：

RelativeLayout 在最后一个按钮中： RelativeLayout> 但它根本不允许我放在 RelativeLayout 下面...
使用这段代码 android:layout_below="@+id/(上面按钮的id)"
@Mary RelativeLayouts 使用您分配给视图或视图组的 id 来定位元素之间的关系。
我认为您可以轻松地将图像按钮拖动到xml设计视图中所需的位置

【解决方案2】：

使用 RelativeLayout 比使用 TableLayout 或 LinearLayout 更容易做到这一点。如果您愿意为您的 imageButtons 使用固定宽度（这对于 imageButtons 来说应该不是问题），这里有一个可以解决您的问题的布局。
（我在布局中使用了 Buttons下面为简单起见，但它也适用于 imageButtons。）

<?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:gravity="center_horizontal">
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:text="Button1" />
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:layout_toRightOf="@id/btn1"
        android:text="Button2" />
    <Button
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:layout_toRightOf="@id/btn2"
        android:text="Button3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4"
        android:id="@+id/btn4"
        android:layout_below="@id/btn1"
        android:layout_alignLeft="@id/btn1"
        android:layout_alignRight="@id/btn1"/>
</RelativeLayout>

如下所示：

【讨论】：

这个答案是我需要的。我想我会接受你的回答，因为它没有多层布局，并且使我的代码更简单。我用图像按钮尝试过它，它也有效。但无论如何我还是要感谢大家的帮助！！ :)
我现在的另一个问题是，对于 imageButtons，只有当我将宽度声明为 wrap_content（对于每个 imageButton）我的图像看起来还不错。我也在它们之间设置了一些边距，因为我需要它们分开。我的问题是，当我在其他设备上尝试代码时，我的 imageButtons 更接近或不接近，具体取决于设备屏幕的密度。解决方案是为每个密度制作不同的布局，每次更改边距和其他可绘制对象？
如果是，它们有多少种布局？即使我已经阅读了该主题 100 遍，我也对响应能力感到非常困惑。 :(
@Mary 很高兴我的回答对您有所帮助。至于设备之间的密度差异，您可以使用“dp”作为边距单位，例如 margin_left = “8dp” 而不是 px。
@Mary 以及为不同设备使用各种布局，我建议您在必要时使用以下类型：layout.xml 用于普通（平均手机）布局， layout-land.xml 用于普通横向布局，layout-large.xml 和 layout-large-land.xml 用于中型平板电脑（例如 7" 英寸） nexus 平板电脑），layout-xlarge.xml 和 layout-xlarge-land.xml 用于较大的平板电脑（例如 10" nexus 9 平板电脑）。还有其他几种类型，但我认为这些应该绰绰有余。

【解决方案3】：

第一个 LinearLayout（内部）标签的重力是“中心”，而对于您的第二个 LinearLayout，它是“左”。
三个 ImageButton 标签以重力为“中心”，而对于最后一个，根本没有重力。

我想这就是你要找的那个。

   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton11"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton12"
        android:layout_marginRight="30dp"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton13"
        android:layout_marginRight="30dp"/>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="20dp">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton14"
        android:layout_marginRight="30dp"/>

</LinearLayout>

希望这会有所帮助！

编辑部分：

LinearLayout linearLayout = (LinearLayout)findViewById(R.id.id_layout);

    TableLayout tableLayout = new TableLayout(this);
    tableLayout.setStretchAllColumns(true);
    tableLayout.setGravity(Gravity.CENTER_HORIZONTAL);
    TableLayout.LayoutParams layoutParams = new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT,TableLayout.LayoutParams.WRAP_CONTENT);
    tableLayout.setVerticalScrollBarEnabled(true);
    tableLayout.setLayoutParams(layoutParams);

    TableRow tableRow = new TableRow(this);

    ImageButton imageButton = new ImageButton(this);
    ImageButton imageButton1 = new ImageButton(this);
    ImageButton imageButton2 = new ImageButton(this);

    tableRow.addView(imageButton);
    tableRow.addView(imageButton1);
    tableRow.addView(imageButton2);

    tableLayout.addView(tableRow);

    TableRow tableRow1 = new TableRow(this);
    tableRow1.setPadding(0, 0, 0, 40);
    TableRow.LayoutParams params = new TableRow.LayoutParams();
    params.span = 1;

    ImageButton imageButton3 = new ImageButton(this);

    tableRow1.addView(imageButton3);

    tableLayout.addView(tableRow1);

    linearLayout.addView(tableLayout);

希望这会有所帮助！

【讨论】：

这正是我想要的，但我希望这一切都在屏幕中间，当我把你的代码放在一个带有重心的垂直线性布局中时，它什么也没做..喜欢：
我通过代码在外部 LinearLayout 中创建了一个 TableLayout 和 TableRow，并将 ImageButtons 保留在那里。请检查我编辑的部分。如果它解决了您的问题或者我能够帮助您，请接受或投票赞成我的回答。
这段代码应该放在 onCreate 里面吗？我把它放在 onCreate 里面，它说布局的 id 是相对的。我将我的第一个父母的 id 放在 xml 文件中，它是一个 relativeLayout。我必须输入其他 id 吗？
是的，这段代码应该进入 onCreate。您必须在外部 LinearLayout 上添加 id。我定义了 LinearLayout 而不是 RelativeLayout。

【解决方案4】：

在您的 xml 中进行更改尝试使用它

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="20dp"
            android:gravity="center_horizontal">
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageButton11"
                    android:background="@drawable/image"
                    android:layout_marginRight="30dp"/>
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageButton14"
                    android:layout_below="@+id/imageButton11"
                    android:align_left="@+id/imageButton11"
                    android:align_right="@+id/imageButton11"
                    android:layout_marginTop="10dp"
                    android:background="@drawable/image"
                    android:layout_marginRight="30dp"/>
            </RelativeLayout>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageButton12"
                android:background="@drawable/image"
                android:layout_marginRight="30dp"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageButton13"
                android:background="@drawable/image"
                android:layout_marginRight="30dp"/>

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

【讨论】：

而不是垂直的？
使用RelativeLayout而不是垂直LinearLayout，它将最后一个imageButton放在其他三个imageButtons之前，都在同一行，我不希望那样... :(
如何在此处发布图片？
@Mary RelativeLayouts 使用您分配给视图或视图组的 id 来定位元素之间的关系。
@Mary 编辑了我的答案试试这个代码并告诉我