Come fare il layout con Visualizza riempire lo spazio rimanente?


188

Sto progettando la mia interfaccia utente dell'applicazione. Ho bisogno di un layout simile al seguente:

Esempio di layout desiderato

(<e> sono pulsanti). Il problema è che non so come assicurarmi che TextView riempia lo spazio rimanente, con due pulsanti a dimensione fissa.

Se uso fill_parent per Text View, il secondo pulsante (>) non può essere mostrato.

Come posso creare un layout che assomigli all'immagine?


cosa usi come layout di root?
woodshy,

1
@woodshy Qualsiasi layout è OK, non importa.
Luke Vo,

Risposte:


213

La risposta di woodshy ha funzionato per me ed è più semplice della risposta di Ungureanu Liviu poiché non viene utilizzata RelativeLayout. Sto dando il mio layout per chiarezza:

<LinearLayout 
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      >

     <Button
        android:layout_width = "80dp"
        android:layout_weight = "0"
        android:layout_height = "wrap_content"
        android:text="&lt;"/>
     <TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:layout_weight = "1"/>
     <Button
        android:layout_width = "80dp"
        android:layout_weight = "0"
        android:layout_height = "wrap_content"
        android:text="&gt;"/>   
 </LinearLayout>

Ci sono cose come alignLefte alignParentLeft, ecc., Con le quali non si può mai raggiungere LinearLayout.
IcyFlame il

Non capisco fino in fondo come sia possibile, ma è un trucco davvero interessante evitare RelativeLayout
a.dibacco

2
Come può essere questa la risposta accettata? Non esiste una vista immagine, è solo una parte della soluzione. Almeno è meglio della vecchia risposta più votata con il layout relativo (ho spiegato perché nella mia risposta)
Livio

soluzione geniale
Mohammad Elsayed

92

Nel caso in cui <VISUALIZZA TESTO> è posizionato in LinearLayout, impostare la proprietà Layout_weight di <e> su 0 e 1 per TextView.
Nel caso di RelativeLayout allinea <e> a sinistra e a destra e imposta "Layout a sinistra di" e "Layout a destra di" proprietà di TextView sugli ID di <e>


Qualcuno ha ancora bisogno del campione?
woodshy

Come aggiungere immagini in questo layout per riempire l'intera vista
Tushar Pandey,

come aggiungere l'immagine all'interno del relativo layout, per riempire l'intera vista
Tushar Pandey,

4
@woodshy sì, un campione sarebbe ancora utile
Frank Schwieterman,

Guarda la risposta di Vivek Pandey per un esempio
MyDogTom,

71

Se lo usi RelativeLayout, puoi farlo in questo modo:

<RelativeLayout
    android:layout_width = "fill_parent"
    android:layout_height = "fill_parent">
    <ImageView
        android:id = "@+id/my_image"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_alignParentTop ="true" />
    <RelativeLayout
        android:id="@+id/layout_bottom"
        android:layout_width="fill_parent"
        android:layout_height = "50dp"
        android:layout_alignParentBottom = "true">
        <Button
            android:id = "@+id/but_left"
            android:layout_width = "80dp"
            android:layout_height = "wrap_content"
            android:text="&lt;"
            android:layout_alignParentLeft = "true"/>
        <TextView
            android:layout_width = "fill_parent"
            android:layout_height = "wrap_content"
            android:layout_toLeftOf = "@+id/but_right"
            android:layout_toRightOf = "@id/but_left" />
        <Button
            android:id = "@id/but_right"
            android:layout_width = "80dp"
            android:layout_height = "wrap_content"
            android:text="&gt;"
            android:layout_alignParentRight = "true"/>
    </RelativeLayout>
</RelativeLayout>

Grazie, funziona :) Ma non capisco. Perché TextView non riempie tutto lo spazio, non per il >pulsante?
Luke Vo,

2
Perché avere due layout relativi nidificati? Quello radice dovrebbe essere sufficiente. Quindi, tutto ciò che devi fare è assicurarti che i figli del layout relativo in basso siano tutti alignParentBottom = "true"
Noel,

@Noel Hai ragione. Ho scelto 2 layout perché è così che utilizzo: nelle mie applicazioni può succedere che ho bisogno di cambiare la visibilità di alcune viste ed è più facile metterle tutte in un layout e cambiare la visibilità solo per questo layout . Il mio esempio non è perfetto ma funziona e potrebbe essere utile per qualcuno.
Ungureanu Liviu,

1
@WN Anche questo è strano per me :) Penso che la visualizzazione di testo non usi tutto lo spazio perché il pulsante destro ha una larghezza fissa. Se cambi android: layout_width = "80dp" in android: layout_width = "wrap_content" per il tasto destro dovrebbe funzionare.
Ungureanu Liviu,

2
Questa risposta è davvero pessima! Dovresti evitare di annidare 2 layout relativi poiché il layout relativo effettua sempre 2 passaggi per il disegno (rispetto a 1 per qualsiasi altro tipo di layout). Diventa esponenziale quando li annidi. Dovresti usare un layout lineare con larghezza = 0 e peso = 1 sull'elemento che vuoi riempire lo spazio a sinistra. Ricorda: usa il layout relativo SOLO quando non hai altra scelta. stackoverflow.com/questions/4069037/…
Livio

30

Usando un ConstraintLayout, ho trovato qualcosa di simile

<Button
    android:id="@+id/left_button"
    android:layout_width="80dp"
    android:layout_height="48dp"
    android:text="&lt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/left_button"
    app:layout_constraintRight_toLeftOf="@+id/right_button"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/right_button"
    android:layout_width="80dp"
    android:layout_height="48dp"
    android:text="&gt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

lavori. La chiave sta impostando opportunamente i vincoli del bordo destro, sinistro, superiore e inferiore, quindi impostando la larghezza e l'altezza su 0dpe facendogli capire le sue dimensioni.


4
Appena iniziato a utilizzare ConstraintLayout, è bello sapere che la larghezza e l'altezza possono essere determinate da vincoli quando si impostano su "0", grazie per quello :)
MQoder,

Importante fare attenzione alla direzione della freccia di ciascun vincolo. Assicurarsi che TextViewabbia i vincoli sinistro e destro. La TextViewnon si allunga se il primo Buttonha il vincolo diritto alla TextViewe l'ultima Buttonha il vincolo di sinistra alla TextView.
Manuel,

molto meglio! migliora le prestazioni non avendo layout nidificati. Grazie per averci ricordato il trucco
0p

7

È semplice Puoi impostare minWidth o minHeight, dipende da cosa stai cercando, orizzontale o verticale. E per l'altro oggetto (quello che vuoi riempire lo spazio rimanente) imposti un peso di 1 (imposta la larghezza per avvolgere il suo contenuto), così riempirà il resto dell'area.

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center|left"
        android:orientation="vertical" >
</LinearLayout>
<LinearLayout
        android:layout_width="80dp"
        android:layout_height="fill_parent"
        android:minWidth="80dp" >
</LinearLayout>

4

puoi usare l'attributo high layout_weight. Di seguito puoi vedere un layout in cui ListView occupa tutto lo spazio libero con i pulsanti in basso:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".ConfigurationActivity"
    android:orientation="vertical"
    >

        <ListView
            android:id="@+id/listView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1000"
            />


        <Button
            android:id="@+id/btnCreateNewRule"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Create New Rule" />



        <Button
            android:id="@+id/btnConfigureOk"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Ok" />


</LinearLayout>

3

Per quelli che hanno lo stesso problema con <LinearLayout...>me:

È importante specificare android:layout_width="fill_parent"che non funzionerà wrap_content.

OTOH, potresti ometterlo android:layout_weight = "0", non è richiesto.

Il mio codice è sostanzialmente lo stesso del codice in https://stackoverflow.com/a/25781167/755804 (di Vivek Pandey)


3

Dovresti evitare di annidare 2 layout relativi poiché il layout relativo effettua sempre 2 passaggi per il disegno (rispetto a 1 per qualsiasi altro tipo di layout). Diventa esponenziale quando li annidi. Dovresti usare un layout lineare con larghezza = 0 e peso = 1 sull'elemento che vuoi riempire lo spazio a sinistra. Questa risposta è migliore per le prestazioni e le pratiche. Ricorda: usa il layout relativo SOLO quando non hai altra scelta.

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

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/prev_button"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="&lt;" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ellipsize="end"
            android:singleLine="true"
            android:gravity="center"
            android:text="TextView" />

        <Button
            android:id="@+id/next_button"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="&gt;" />
    </LinearLayout>
</LinearLayout>

0

È possibile utilizzare impostare layout_widtho layout_widthsu 0dp(Con l'orientamento si desidera riempire lo spazio rimanente). Quindi utilizzare il layout_weightper riempire lo spazio rimanente.


0

utilizzare un Relativelayout per avvolgere LinearLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:round="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text="&lt;"/>
    <TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:layout_weight = "1"/>
    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text="&gt;"/>

</LinearLayout>

</RelativeLayout>`

0

ho trovato

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginEnd="10dp"
        android:fontFamily="casual"
        android:text="(By Zeus B0t)"
     ``   android:textSize="10sp"
        android:gravity="bottom"
        android:textStyle="italic" />

0

Quando si utilizza un layout relativo, è possibile allungare una vista ancorandola a entrambe le viste verso le quali dovrebbe estendersi. Anche se l'altezza specificata verrà ignorata, Android richiede ancora un attributo di altezza, motivo per cui ho scritto "0dp". Esempio:

<View
    android:id="@+id/topView"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="8dp"/>

<View
    android:id="@+id/stretchableView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_below="@id/topView"
    android:layout_above="@+id/bottomView"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:adjustViewBounds="true"/>

<View
    android:id="@id/bottomView"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="16dp"/>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.