Android 如何将屏幕上的按钮水平和垂直加上等距分开？

How to center buttons on screen horizontally and vertically plus equidistant apart?

提问by Marc

I've been racking my brain (android newbie here, so not hard to do) for awhile trying to figure out how to accomplish this:

我一直在绞尽脑汁（这里是 android 新手，所以不难）一段时间试图弄清楚如何实现这一点：

using a RelativeLayout or something other than AbsoluteLayout which is what this was created with. I'm coming from a Windows programming background where the device adjusts the 'absolute' positioning for you and GUI layout was a non-issue.

使用 RelativeLayout 或 AbsoluteLayout 以外的其他东西，这是创建的。我来自 Windows 编程背景，设备会为您调整“绝对”定位，GUI 布局不是问题。

The first layout works great in the emulator, but doesn't format for my Nexus One or any other screen that differs from the emulator size. I expected this because it's absolutely positioned, but haven't found a solution that will format correctly for different screen sizes. My goal is to have the layout work for different screen sizes and in portrait / landscape.

第一个布局在模拟器中效果很好，但不能为我的 Nexus One 或任何其他与模拟器大小不同的屏幕进行格式化。我预料到了这一点，因为它是绝对定位的，但还没有找到可以针对不同屏幕尺寸正确格式化的解决方案。我的目标是让布局适用于不同的屏幕尺寸和纵向/横向。

Here's the Code that I'm currently using: [main.xml]

这是我目前使用的代码：[main.xml]

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout 
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
  <Button
    android:id="@+id/Button01"
    android:layout_width="188px"
    android:layout_height="100px"
    android:text="A"
    android:layout_y="50px" android:layout_x="65px" android:textSize="48sp"/>

<Button
    android:id="@+id/Button02"
    android:layout_width="188px"
    android:layout_height="100px"
    android:text="B"
    android:layout_y="175px" android:layout_x="65px" android:textSize="48sp"/>

<Button
    android:id="@+id/Button03"
    android:layout_width="188px"
    android:layout_height="100px"
    android:text="C"
    android:layout_y="300px" android:layout_x="65px" android:textSize="48sp"/>
</AbsoluteLayout>

Using tidbits from other questions here, I came up with this, it's closer, but not there yet.

使用这里其他问题的花絮，我想出了这个，它更接近，但还没有。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
android:gravity="center"
android:id="@+id/widget49"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<Button
    android:id="@+id/Button01"
    android:layout_width="0dip"
    android:layout_weight="1"
    android:text="A"
    android:textSize="48sp"/>

<Button
    android:id="@+id/Button02"
    android:layout_width="0dip"        
    android:layout_weight="1"
    android:text="B"
    android:textSize="48sp"/>

<Button
    android:id="@+id/Button03"
    android:layout_width="0dip"      
    android:layout_weight="1"
    android:text="C"
    android:textSize="48sp"/>
</TableLayout>

Here's a picture of the TableLayout:

这是 TableLayout 的图片：

Any help / guidance would be greatly appreciated.

任何帮助/指导将不胜感激。

回答by Marc

Using the recommendations from both of you worked perfectly!

使用你们两个的建议效果很好！

For those interested, here's the final main.xml code in RelativeLayout format that matched what I was trying to do with the AbsoluteLayout..

对于那些感兴趣的人，这里是 RelativeLayout 格式的最终​​ main.xml 代码，它与我试图用 AbsoluteLayout 做的事情相匹配。

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

  <Button
    android:id="@+id/Button02"
    android:layout_width="188dip"
    android:layout_height="100dip"
    android:text="B"
    android:layout_centerInParent="true"
    android:textSize="48sp" android:textStyle="bold" />

  <Button
    android:id="@+id/Button01"
    android:layout_width="188dip"
    android:layout_height="100dip"
    android:text="A"
    android:layout_centerHorizontal="true"
    android:layout_above="@id/Button02"
    android:layout_marginBottom="30dip"
    android:textSize="48sp" android:textStyle="bold" />

  <Button
    android:id="@+id/Button03"
    android:layout_width="188dip"
    android:layout_height="100dip"
    android:text="C"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/Button02"
    android:layout_marginTop="30dip"
    android:textSize="48sp" android:textStyle="bold" />

</RelativeLayout>

Also, on an interesting note that may help someone in the future. When I modified the first code I posted with these recommendations I received this error when trying to compile: "\res\layout\main.xml:9: error: Error: No resource found that matches the given name (at 'layout_above' with value '@id/Button02').

另外，在一个有趣的笔记上，可能会在将来对某人有所帮助。当我修改我发布的带有这些建议的第一个代码时，我在尝试编译时收到此错误：“ \res\layout\main.xml:9: error: Error: No resource found that match the given name (at 'layout_above' with值“@id/Button02”）。

With a little Googling on what could be the cause, I discovered that since the reference to Button02 (via the Button01 code) occurred before Button02 was actually created, this generated the error. So note in the final code Button02 is declared FIRST.

通过谷歌搜索可能是什么原因，我发现由于对 Button02 的引用（通过 Button01 代码）发生在实际创建 Button02 之前，因此产生了错误。所以请注意在最终代码中 Button02 被声明为FIRST。

回答by CommonsWare

Use a RelativeLayout. Button B has android:layout_centerInParent="true". Button A has android:layout_centerHorizontal="true", android:layout_above="@id/Button02", and some android:layout_marginBottomto establish whatever whitespace gap you want. Button C has android:layout_centerHorizontal="true", android:layout_below="@id/Button02", and some android:layout_marginTopto establish whatever whitespace gap you want.

使用一个RelativeLayout. 按钮 B 有android:layout_centerInParent="true"。按钮 A 有android:layout_centerHorizontal="true"、android:layout_above="@id/Button02"和 一些android:layout_marginBottom来建立你想要的任何空白间隙。按钮 C 有android:layout_centerHorizontal="true"、android:layout_below="@id/Button02"和 一些android:layout_marginTop来建立你想要的任何空白间隙。

Do not use AbsoluteLayout, period.

不要使用AbsoluteLayout，句号。

回答by chutcher

Here is a good example using TableLayout. It has three table rows, each with layout_weight = 1 that ensures each row takes up 1/3 of the screen. The middle row will contain your buttons and the first and last table rows are empty.

这是一个使用 TableLayout 的好例子。它有三个表格行，每个行的 layout_weight = 1 以确保每行占据屏幕的 1/3。中间行将包含您的按钮，表格的第一行和最后一行是空的。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <TableRow android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>
    <TableRow android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="24sp"
                android:padding="24dp"
                android:text="Button 1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="24sp"
                android:padding="24dp"
                android:text="Button 2"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="24sp"
                android:padding="24dp"
                android:text="Button 3"/>
        </LinearLayout>

    </TableRow>
    <TableRow android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>
</TableLayout>

Edit...

编辑...

And this is another similar way that allows the button width to match the parent.

这是另一种允许按钮宽度匹配父级的类似方式。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <TableRow android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:padding="24dp"
        android:text="Button 1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:padding="24dp"
        android:text="Button 2"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:padding="24dp"
        android:text="Button 3"/>
    <TableRow android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>
</TableLayout>