¿Cómo centrar los botones en la pantalla horizontal y verticalmente más equidistante aparte?

Question

He estado devanando los sesos (novato androide aquí, así que no es difícil de hacer) por un tiempo tratando de encontrar la manera de lograr esto:

utilizando un RelativeLayout o algo distinto que es AbsoluteLayout con qué se creó esto Vengo de un fondo de programación de Windows donde el dispositivo ajusta el posicionamiento 'absoluto' para usted y el diseño de la GUI no era un problema.

El primer diseño funciona muy bien en el emulador, pero no formatea para mi Nexus One o cualquier otra pantalla que difiera del tamaño del emulador. Esperé esto porque está absolutamente posicionado, pero no he encontrado una solución que formatee correctamente para diferentes tamaños de pantalla. Mi objetivo es que el diseño funcione para diferentes tamaños de pantalla y en vertical/horizontal.

Aquí está el código que estoy usando actualmente: [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> 

Uso de curiosidades de otras preguntas aquí, se me ocurrió esto, está más cerca, pero aún no ha llegado.

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

Aquí hay una foto de la TableLayout:

Cualquier ayuda/orientación sería muy apreciada.

Answer 1

Utilice un RelativeLayout. El botón B tiene android:layout_centerInParent="true". El botón A tiene android:layout_centerHorizontal="true", android:layout_above="@id/Button02", y algo de android:layout_marginBottom para establecer el espacio en blanco que desee. El botón C tiene android:layout_centerHorizontal="true", android:layout_below="@id/Button02", y algo de android:layout_marginTop para establecer el espacio en blanco que desee.

No utilice AbsoluteLayout, punto.

Answer 2

¡El uso de las recomendaciones de ambos funcionó a la perfección!

Para los interesados, aquí está el código main.xml final en formato RelativeLayout que coincidía con lo que yo estaba tratando de hacer con el 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> 

Además, en una nota interesante que puede ayudar a alguien en el futuro. Cuando modifiqué el primer código que publiqué con estas recomendaciones, recibí este error al intentar compilar: "\ res \ layout \ main.xml: 9: error: Error: no se encontró ningún recurso que coincida con el nombre de pila (en 'layout_above' con valor '@ id/Button02').

Con un poco de búsqueda en Google por lo que podría ser la causa, descubrí que como la referencia a Button02 (mediante el código Button01) ocurría antes de que realmente se crease Button02, esto generó de error. Así que tenga en cuenta en el código final Button02 se declara PRIMERA.

Answer 3

Aquí es un buen ejemplo usando TableLayout. tiene tres filas de la tabla, cada uno con layout_weight = 1 asegura que cada fila ocupa 1/3 de la scre es La fila del medio contendrá los botones y la primera y la última filas de la tabla estarán vacías.

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

Editar ...

Y esta es otra forma similar que permita el ancho de botón para que coincida con el padre.

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