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.