2010-04-10 12 views
17

Ho tormentando il mio cervello (newbie Android qui, quindi non è difficile da fare) per un po 'cercando di capire come eseguire questa:Come centrare i pulsanti sullo schermo orizzontalmente e verticalmente più equidistanti?

enter image description here

utilizzando un RelativeLayout o qualcosa di diverso da quello che è AbsoluteLayout con cosa è stato creato. Vengo da uno sfondo di programmazione Windows in cui il dispositivo regola il posizionamento "assoluto" per te e il layout della GUI non è un problema.

Il primo layout funziona in modo ottimale nell'emulatore, ma non viene formattato per il mio Nexus One o qualsiasi altra schermata che differisce dalle dimensioni dell'emulatore. Mi aspettavo questo perché è assolutamente posizionato, ma non ho trovato una soluzione che si formatta correttamente per diverse dimensioni dello schermo. Il mio obiettivo è far funzionare il layout per diverse dimensioni dello schermo e in verticale/orizzontale.

Ecco il codice che sto attualmente in uso: [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 bocconcini da altre domande qui, sono arrivato fino a questo, è più vicino, ma non c'è ancora.

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

Ecco una foto del TableLayout:

enter image description here

Qualsiasi aiuto/consiglio sarebbe molto apprezzato.

risposta

11

Utilizzare un RelativeLayout. Il pulsante B ha android:layout_centerInParent="true". Il pulsante A ha android:layout_centerHorizontal="true", android:layout_above="@id/Button02" e alcuni android:layout_marginBottom per stabilire qualsiasi spazio vuoto che si desidera. Il pulsante C ha android:layout_centerHorizontal="true", android:layout_below="@id/Button02" e alcuni android:layout_marginTop per stabilire qualsiasi spazio vuoto che si desidera.

Non utilizzare AbsoluteLayout, periodo.

+2

Inoltre, non utilizzare px (pixel), utilizzare dip (display pixel indipendenti). –

+0

Grazie per aver postato la tua risposta completa, l'ho copiata e incollata nel mio codice e funziona benissimo. –

23

Utilizzare le raccomandazioni di entrambi ha funzionato perfettamente!

Per chi fosse interessato, ecco il codice main.xml finale in formato RelativeLayout che ha trovato quello che stavo cercando di fare con l'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> 

Inoltre, su una nota interessante che può aiutare qualcuno in futuro. Quando ho modificato il primo codice che ho pubblicato con questi consigli, ho ricevuto questo errore durante il tentativo di compilazione: "\ res \ layout \ main.xml: 9: errore: Errore: nessuna risorsa trovata corrispondente al nome specificato (in" layout_above " con valore '@ id/Button02')

Con un po 'di Google su quale potrebbe essere la causa, ho scoperto che poiché il riferimento a Button02 (tramite il codice Button01) si è verificato prima che Button02 fosse effettivamente creato, questo ha generato il errore. Così nota nel codice finale Button02 viene dichiarata PRIMO.

+0

+1 per l'errore "layout_above". – SingleShot

+0

Grazie per questo buon esempio, questo mi ha chiarito molto sul layout relativo e su +1 per posizionare il pulsante 2 sopra il pulsante 1 in questo esempio – Manju

2

Ecco un buon esempio utilizzando TableLayout. ha tre righe della tabella, ciascuna con layout_weight = 1 che garantisce ogni riga riprende 1/3 della scre it. La riga centrale conterrà i tuoi pulsanti e la prima e l'ultima riga della tabella sono vuote.

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

Modifica ...

e questo è un altro modo simile che permette la larghezza tasto per abbinare il genitore.

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