Как центрировать кнопки на экране по горизонтали и вертикали, а также на равном расстоянии друг от друга?

Question

Я ломал голову (новичок-андроид здесь, так что это не сложно сделать) некоторое время, пытаясь понять, как этого добиться:

с использованием RelativeLayout или чего-то другого, кроме AbsoluteLayout, с помощью которого это было создано. Я пришел из среды программирования Windows, где устройство настраивает «абсолютное» позиционирование для вас, и макет графического интерфейса не проблема.

Первый макет прекрасно работает в эмуляторе, но не форматирует для моего Nexus One или любого другого экрана, который отличается от размера эмулятора. Я ожидал этого, потому что он абсолютно позиционирован, но не нашел решения, которое будет правильно форматировать для экрана разных размеров. Моя цель состоит в том, чтобы макет работал для разных размеров экрана и в портретной / альбомной ориентации.

Вот код, который я сейчас использую: [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>

Используя здесь лакомые кусочки из других вопросов, я придумал это, оно ближе, но пока нет.

<?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>

Вот изображение TableLayout:

Любая помощь / руководство будет принята с благодарностью.

Answer 1

Использование рекомендаций от вас обоих работало отлично!

Для тех, кто заинтересован, вот финальный код main.xml в формате RelativeLayout, который соответствует тому, что я пытался сделать с 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>

Также на интересной заметке, которая может кому-то помочь в будущем. Когда я изменил первый код, который я отправил с этими рекомендациями, я получил эту ошибку при попытке компиляции: « \ res \ layout \ main.xml: 9: ошибка: Ошибка: не найден ресурс, который соответствует указанному имени (в ' layout_above 'со значением' @ id / Button02 ').

С небольшим поиском в Google, что могло быть причиной, я обнаружил, что, поскольку ссылка на Button02 (через код Button01) произошла до того, как Button02 был фактически создан, это породило ошибку. Таким образом, примечание в конечном коде Button02 объявлено FIRST .

Answer 2

Используйте 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, чтобы установить любой пробел, который вы хотите.

Не использовать AbsoluteLayout, точка.

Answer 3

Вот хороший пример использования 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 ...

И это еще один аналогичный способ, который позволяет ширине кнопки соответствовать родительскому элементу.

<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>