Crea un'interfaccia utente reattiva con ConstraintLayout Componente di Android Jetpack.

Prova la modalità Scrivi
Jetpack Compose è il toolkit dell'interfaccia utente consigliato per Android. Scopri come utilizzare i layout in Compose.

ConstraintLayout consente di creare layout complessi e di grandi dimensioni con una gerarchia di visualizzazione piatta, senza gruppi di visualizzazioni nidificati. È simile a RelativeLayout in quanto tutte le viste sono strutturate in base alle relazioni tra le viste gemelle e il layout principale, ma è più flessibile di RelativeLayout e più facile da utilizzare con l'editor di layout di Android Studio.

Tutta la potenza di ConstraintLayout è disponibile direttamente negli strumenti visivi dell'Editor di layout, poiché l'API di layout e l'Editor di layout sono creati appositamente l'uno per l'altro. Puoi creare il tuo layout con ConstraintLayout interamente trascinando anziché modificare il codice XML.

Questa pagina mostra come creare un layout con ConstraintLayout in Android Studio 3.0 o versioni successive. Per ulteriori informazioni sull'editor di layout, consulta la pagina Creare un'interfaccia utente con l'editor di layout.

Per visualizzare una varietà di layout che puoi creare con ConstraintLayout, consulta il progetto Esempi di layout del vincolo su GitHub.

Panoramica dei vincoli

Per definire la posizione di una vista in ConstraintLayout, aggiungi almeno un vincolo orizzontale e un vincolo verticale per la vista. Ogni vincolo rappresenta una connessione o un allineamento a un'altra vista, al layout principale o a una linea guida invisibile. Ogni vincolo definisce la posizione della vista sull'asse verticale o orizzontale. Ogni vista deve avere almeno un vincolo per ogni asse, ma spesso sono necessari altri vincoli.

Quando trascini una vista nell'Editor di layout, questa rimane nella posizione in cui la lasci anche se non ha vincoli. Questo serve solo a semplificare l'editing. Se una vista non ha vincoli quando esegui il layout su un dispositivo, viene disegnata nella posizione [0,0] (angolo in alto a sinistra).

Nella figura 1, il layout viene visualizzato correttamente nell'editor, ma non è presente un vincolo verticale nella vista C. Quando questo layout viene disegnato su un dispositivo, la vista C orizzontalmente si allinea ai bordi sinistro e destro della vista A, ma viene mostrata nella parte superiore dello schermo perché non ha un vincolo verticale.

Figura 1. L'editor mostra la vista C sotto A, ma non ha un vincolo verticale.

Figura 2. La vista C è ora vincolata verticalmente sotto la vista A.

Sebbene un vincolo mancante non causi un errore di compilazione, l'Editor di layout indica i vincoli mancanti come errore nella barra degli strumenti. Per visualizzare gli errori e altri avvisi, fai clic su Mostra avvisi ed errori . Per evitare di perdere vincoli, l'Editor di layout aggiunge automaticamente vincoli con le funzionalità Collega automaticamente e deduce i vincoli.

Aggiungi ConstraintLayout al progetto

Per utilizzare ConstraintLayout nel tuo progetto, procedi come segue:

  1. Assicurati che il repository maven.google.com sia dichiarato nel file settings.gradle:

    trendy

        dependencyResolutionManagement {
          ...
          repositories {
              google()
          }
        )
        

    Kotlin

        dependencyResolutionManagement {
          ...
          repositories {
              google()
          }
        }
        
  2. Aggiungi la libreria come dipendenza nel file build.gradle a livello di modulo, come mostrato nell'esempio seguente. La versione più recente potrebbe essere diversa da quella mostrata nell'esempio.

    Groovy

    dependencies {
        implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha13"
        // To use constraintlayout in compose
        implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13"
    }
    

    Kotlin

    dependencies {
        implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha13")
        // To use constraintlayout in compose
        implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13")
    }
    
  3. Nella barra degli strumenti o nella notifica di sincronizzazione, fai clic su Sync Project with Gradle Files (Sincronizza progetto con file Gradle).

Ora puoi iniziare a creare il tuo layout con ConstraintLayout.

Convertire un layout

Figura 3. Il menu per convertire un layout in ConstraintLayout.

Per convertire un layout esistente in un layout vincolato:

  1. Apri il layout in Android Studio e fai clic sulla scheda Design nella parte inferiore della finestra dell'editor.
  2. Nella finestra Struttura ad albero dei componenti, fai clic con il tasto destro del mouse sul layout, poi fai clic su Converti LinearLayout in ConstraintLayout.

Crea un nuovo layout

Per creare un nuovo file di layout di vincolo:

  1. Nella finestra Progetto, fai clic sulla cartella del modulo e seleziona File > Nuovo > XML > XML layout.
  2. Inserisci un nome per il file di layout e inserisci "androidx.constraintlayout.widget.ConstraintLayout" come Tag radice.
  3. Fai clic su Fine.

Aggiungi o rimuovi un vincolo

Per aggiungere un vincolo:

Video 1. Il lato sinistro di una vista è vincolato al lato sinistro dell'unità principale.

  1. Trascina una vista dalla finestra Tavolozza nell'editor.

    Quando aggiungi una vista in un elemento ConstraintLayout, questa viene visualizzata in un riquadro di delimitazione con punti di manipolazione di ridimensionamento quadrati su ciascun angolo e punti di manipolazione di vincoli circolari su ogni lato.

  2. Fai clic sulla visualizzazione per selezionarla.
  3. Esegui una delle seguenti operazioni:
    • Fai clic su un punto di manipolazione di un vincolo e trascinalo in un punto di ancoraggio disponibile. Può trattarsi del bordo di un'altra vista, del bordo del layout o di una linea guida. Tieni presente che, mentre trascini la maniglia del vincolo, l'editor del layout mostra potenziali ancoraggi di connessione e overlay blu.
    • Fai clic su uno dei pulsanti Crea una connessione nella sezione Layout della finestra Attributi, come mostrato nella figura 4.

      Figura 4. La sezione Layout della finestra Attributi consente di creare connessioni.

Quando viene creato il vincolo, l'editor gli assegna un margine predefinito per separare le due viste.

Quando crei vincoli, tieni presente le seguenti regole:

  • Ogni visualizzazione deve avere almeno due vincoli: uno orizzontale e uno verticale.
  • Puoi creare vincoli solo tra un punto di manipolazione e un punto di ancoraggio che condividono lo stesso piano. Un piano verticale, ovvero i lati sinistro e destro, di una vista può essere vincolato solo a un altro piano verticale e le linee di riferimento possono essere vincolate solo ad altri valori di riferimento.
  • Ogni punto di manipolazione può essere utilizzato per un solo vincolo, ma è possibile creare più vincoli da viste diverse allo stesso punto di ancoraggio.

Puoi eliminare un vincolo effettuando una delle seguenti operazioni:

  • Fai clic su un vincolo per selezionarlo, quindi fai clic su Elimina.
  • Premi Ctrl e fai clic (Comando-clic su macOS) su un ancoraggio a un vincolo. Il vincolo diventa rosso per indicare che puoi fare clic per eliminarlo, come mostrato nella Figura 5.

    Figura 5. Un vincolo rosso indica che puoi fare clic per eliminarlo.

  • Nella sezione Layout della finestra Attributi, fai clic su un ancoraggio a un vincolo, come mostrato nella figura 6.

    Figura 6. Fai clic sull'ancoraggio di un vincolo per eliminarlo.

Video 2. Aggiunta di un vincolo che si oppone a uno esistente.

Se aggiungi vincoli opposti su una vista, le linee di vincolo si avvolgono come una molla per indicare le forze opposte, come mostrato nel video 2. L'effetto è più visibile quando le dimensioni di visualizzazione sono impostate su "fisse" o su "aggrega i contenuti", nel qual caso la visualizzazione è centrata tra i vincoli. Se invece vuoi ampliare la visualizzazione per soddisfare i vincoli, cambia la dimensione in "corrisponde ai vincoli". Se vuoi mantenere la dimensione corrente, ma spostare la vista in modo che non sia centrata, regola il bias del vincolo.

Puoi utilizzare i vincoli per ottenere diversi tipi di comportamento del layout, come descritto nelle sezioni seguenti.

Posizione principale

Limita il lato di una visualizzazione al bordo corrispondente del layout.

Nella Figura 7, il lato sinistro della vista è collegato al bordo sinistro del layout principale. Puoi definire la distanza dal bordo con il margine.

Figura 7. Un vincolo orizzontale all'elemento padre.

Posizione dell'ordine

Definisci l'ordine di visualizzazione delle due viste, verticalmente o orizzontalmente.

Nella figura 8, B è vincolato a trovarsi sempre a destra di A e C è vincolato al di sotto di A. Tuttavia, questi vincoli non implicano l'allineamento, pertanto B può comunque spostarsi verso l'alto e verso il basso.

Figura 8. Un vincolo orizzontale e verticale.

Allineamento

Allinea il bordo di una vista allo stesso bordo di un'altra vista.

Nella Figura 9, il lato sinistro di B è allineato con il lato sinistro di A. Se vuoi allineare i punti di vista, crea un vincolo su entrambi i lati.

Puoi spostare l'allineamento trascinando la vista verso l'interno dal vincolo. Ad esempio, la figura 10 mostra B con un allineamento offset di 24 dp. L'offset è definito dal margine della vista vincolata.

Puoi anche selezionare tutte le viste da allineare e poi fare clic su Allinea nella barra degli strumenti per selezionare il tipo di allineamento.

Figura 9. Un vincolo di allineamento orizzontale.

Figura 10. Un vincolo di allineamento orizzontale di offset.

Allineamento di riferimento

Allinea la base del testo di una visualizzazione alla base del testo di un'altra visualizzazione.

Nella figura 11, la prima riga di B è allineata al testo in A.

Per creare un vincolo di riferimento, fai clic con il tasto destro del mouse sulla visualizzazione del testo da limitare, quindi fai clic su Mostra base di riferimento. Quindi fai clic sulla base del testo e trascina la linea su un'altra base di riferimento.

Figura 11. Un vincolo di allineamento di base.

Limita a una linea guida

Puoi aggiungere una linea guida verticale o orizzontale che ti consenta di limitare le visualizzazioni e non sia visibile agli utenti della tua app. Puoi posizionare la linea guida all'interno del layout in base alle unità dp o a una percentuale relativa al bordo del layout.

Per creare una linea guida, fai clic su Linee guida nella barra degli strumenti, quindi fai clic su Aggiungi linea guida verticale o Aggiungi linea guida orizzontale.

Trascina la linea tratteggiata per riposizionarla e fai clic sul cerchio al bordo della linea guida per attivare/disattivare la modalità di misurazione.

Figura 12. Una visualizzazione vincolata a una linea guida.

Limitarsi a una barriera

Analogamente a una linea guida, una barriera è una linea invisibile su cui puoi limitare le visualizzazioni, ad eccezione del fatto che una barriera non ne definisce la propria posizione. La posizione della barriera si sposta invece in base alla posizione delle viste contenute al suo interno. Ciò è utile quando vuoi limitare una visualizzazione a un insieme di viste anziché a una vista specifica.

Ad esempio, nella Figura 13 la vista C è vincolata al lato destro di una barriera. La barriera è impostata sulla "fine" (o sul lato destro, con un layout da sinistra a destra) della vista A e della vista B. La barriera si sposta a seconda che il lato destro della vista A o della vista B si trovi all'estrema destra.

Per creare una barriera, segui questi passaggi:

  1. Fai clic su Linee guida nella barra degli strumenti, quindi fai clic su Aggiungi barriera verticale o Aggiungi barriera orizzontale.
  2. Nella finestra Struttura ad albero dei componenti, seleziona le viste che vuoi inserire all'interno della barriera e trascinale nel componente della barriera.
  3. Seleziona la barriera dalla struttura dei componenti, apri la finestra Attributi e imposta barrierDirection.

Ora puoi creare un vincolo da un'altra vista alla barriera.

Puoi anche limitare le viste che sono all'interno della barriera. In questo modo, puoi allineare tra loro tutte le viste della barriera, anche se non sai quale vista è la più lunga o la più alta.

Puoi anche includere una linea guida all'interno di una barriera per garantire la posizione "minima" della barriera.

Figura 13. La vista C è vincolata a una barriera, che si sposta in base alla posizione e alle dimensioni della vista A e della vista B.

Modifica il bias del vincolo

Quando aggiungi un vincolo a entrambi i lati di una vista e la dimensione della vista per la stessa dimensione è "fissa" o "a capo del contenuto", la vista viene centrata tra i due vincoli con un bias del 50% per impostazione predefinita. Puoi regolare la bias trascinando il cursore del bias nella finestra Attributi o trascinando la visualizzazione, come mostrato nel video 3.

Se invece vuoi che la visualizzazione amplia le proprie dimensioni per soddisfare i vincoli, cambia la dimensione in "corrisponde ai vincoli".

Video 3. Modifica del bias del vincolo.

Regolare le dimensioni di visualizzazione

Figura 14. Quando selezioni una vista, la finestra Attributi include controlli per le proporzioni di 1, 2 l'eliminazione dei vincoli, 3 la modalità di altezza o larghezza, 4 margini e il bias di vincolo di 5. Puoi anche evidenziare singoli vincoli nell'editor di layout facendovi clic nell'elenco dei vincoli 6.

Puoi utilizzare i punti di manipolazione agli angoli per ridimensionare una visualizzazione, ma questo definisce come hardcoded le dimensioni: la visualizzazione non viene ridimensionata per contenuti o dimensioni dello schermo diverse. Per selezionare una modalità di dimensione diversa, fai clic su una vista e apri la finestra Attributi sul lato destro dell'editor.

Nella parte superiore della finestra Attributi è presente lo strumento di controllo delle viste, che include i controlli per diversi attributi di layout, come mostrato nella Figura 14. Questa opzione è disponibile solo per le visualizzazioni in un layout vincolato.

Puoi modificare la modalità di calcolo di altezza e larghezza facendo clic sui simboli indicati con il callout 3 nella figura 14. Questi simboli rappresentano la modalità dimensioni nel seguente modo. Fai clic sul simbolo per alternare tra queste impostazioni:

  • Fissa: specifica una dimensione specifica nella seguente casella di testo o ridimensiona la visualizzazione nell'editor.
  • Aggrega contenuti: la visualizzazione si espande solo quanto necessario per adattarsi ai suoi contenuti.
    • layout_limitedwidth
    • Imposta questo valore su true per lasciare che la dimensione orizzontale cambi per rispettare i vincoli. Per impostazione predefinita, un widget impostato su WRAP_CONTENT non è limitato da vincoli.

  • Vincoli di corrispondenza: la visualizzazione si espande il più possibile per soddisfare i vincoli su ciascun lato, dopo aver tenuto conto dei margini della visualizzazione. Tuttavia, puoi modificare questo comportamento con i seguenti attributi e valori. Questi attributi hanno effetto solo quando imposti la larghezza di visualizzazione su "corrisponde ai vincoli":
    • layout_constraintLarghezza_min

      Questa operazione richiede una dimensione dp per la larghezza minima della visualizzazione.

    • layout_constraintLarghezza_max

      Questa operazione richiede una dimensione dp per la larghezza massima della visualizzazione.

    Tuttavia, se la dimensione specificata ha un solo vincolo, la vista si espande per adattarsi ai suoi contenuti. L'uso di questa modalità per l'altezza o la larghezza consente anche di impostare le proporzioni.

Imposta la dimensione come rapporto

Figura 15. La visualizzazione è impostata su 16:9 con la larghezza basata su un rapporto dell'altezza.

Puoi impostare la dimensione della visualizzazione su un rapporto, ad esempio 16:9, se almeno una delle dimensioni della vista è impostata su "vincoli di corrispondenza" (0dp). Per attivare il rapporto, fai clic su Attiva/disattiva vincolo di proporzioni (callout 1 nella figura 14) e inserisci il rapporto width:height nell'input visualizzato.

Se la larghezza e l'altezza sono entrambe impostate su "vincoli di corrispondenza", puoi fare clic su Attiva/disattiva vincolo di proporzioni per selezionare la dimensione basata su un rapporto dell'altra. La funzionalità di controllo delle viste indica quale dimensione è impostata come rapporto collegando i bordi corrispondenti con una linea continua.

Ad esempio, se imposti entrambi i lati su "vincoli di corrispondenza", fai clic due volte su Attiva/disattiva vincolo di proporzioni per impostare la larghezza in modo che corrisponda alle proporzioni dell'altezza. L'intera dimensione dipende dall'altezza della vista, che può essere definita in qualsiasi modo, come mostrato nella Figura 15.

Regolare i margini di visualizzazione

Per fare in modo che le visualizzazioni siano distribuite in modo uniforme, fai clic su Margine nella barra degli strumenti per selezionare il margine predefinito di ogni visualizzazione aggiunta al layout. Qualsiasi modifica apportata al margine predefinito si applica solo alle visualizzazioni aggiunte da quel momento in poi.

Puoi controllare il margine di ogni vista nella finestra Attributi facendo clic sul numero sulla riga che rappresenta ciascun vincolo. Nella figura 14, il callout 4 mostra che il margine inferiore è impostato su 16 dp.

Figura 16. Il pulsante Margine della barra degli strumenti.

Tutti i margini offerti dallo strumento sono fattori di 8 dp per aiutare le tue visualizzazioni ad allinearsi ai suggerimenti della griglia quadrata da 8 dp di Material Design.

Controllare gruppi lineari con una catena

Figura 17. Una catena orizzontale con due viste.

Una catena è un gruppo di viste collegate tra loro da vincoli di posizione bidirezionali. Le visualizzazioni di una catena possono essere distribuite in verticale o in orizzontale.

Figura 18. Esempi di ogni stile di catena.

Le catene possono essere definite in uno dei seguenti modi:

  1. Distribuzione:le visualizzazioni vengono distribuite in modo uniforme dopo che vengono presi in considerazione i margini. Questa è l'impostazione predefinita.
  2. Distribuito all'interno: la prima e l'ultima vista sono applicate ai vincoli su ciascuna estremità della catena, mentre il resto viene distribuito uniformemente.
  3. Ponderato: quando la catena è impostata su Distribuito o Distribuito all'interno, puoi riempire lo spazio rimanente impostando una o più viste per"corrispondere ai vincoli" (0dp). Per impostazione predefinita, lo spazio viene distribuito uniformemente tra ogni visualizzazione impostata su "vincoli di corrispondenza", ma puoi assegnare una ponderazione di importanza a ogni vista utilizzando gli attributi layout_constraintHorizontal_weight e layout_constraintVertical_weight. Funziona allo stesso modo di layout_weight in un layout lineare: la vista con il valore di ponderazione più elevato ottiene la maggior quantità di spazio, mentre le viste con la stessa ponderazione ottengono la stessa quantità di spazio.
  4. Confezionato: le visualizzazioni vengono raggruppate dopo che i margini vengono presi in considerazione. Puoi regolare il bias dell'intera catena (a sinistra o a destra oppure in alto o in basso) modificando il bias di visualizzazione della catena.

La visualizzazione "head" della catena, ovvero la visualizzazione più a sinistra in una catena orizzontale (in un layout da sinistra a destra) e la visualizzazione più in alto in una catena verticale, definisce lo stile della catena in XML. Tuttavia, puoi spostarti tra distribuito, distribuito all'interno e compresso selezionando una vista nella catena e facendo clic sul pulsante della catena che compare sotto la vista.

Per creare una catena, segui questi passaggi, come mostrato nel video 4:

  1. Seleziona tutte le viste da includere nella catena.
  2. Fai clic con il tasto destro del mouse su una delle visualizzazioni.
  3. Seleziona Catene.
  4. Seleziona Centra orizzontalmente o Centra verticalmente.

Video 4. Creazione di una catena orizzontale.

Ecco alcuni aspetti da considerare quando si utilizzano le catene:

  • Una vista può far parte sia di una catena orizzontale che di una catena verticale, in modo da poter creare layout a griglia flessibili.
  • Una catena funziona correttamente solo se ciascuna estremità è vincolata a un altro oggetto sullo stesso asse, come mostrato nella Figura 14.
  • Anche se l'orientamento di una catena è verticale o orizzontale, utilizzarne uno non allinea le viste in quella direzione. Per ottenere la posizione corretta per ogni vista nella catena, includi altri vincoli, ad esempio i vincoli di allineamento.

Creare automaticamente vincoli

Anziché aggiungere vincoli a tutte le viste man mano che li inserisci nel layout, puoi spostare ciascuna vista nelle posizioni che preferisci nell'Editor di layout e poi fare clic su Deduci vincoli per creare automaticamente vincoli.

Vincoli deduci scansiona il layout per determinare l'insieme di vincoli più efficace per tutte le viste. limita le visualizzazioni alle posizioni attuali fornendo al contempo flessibilità. Potresti dover apportare modifiche per fare in modo che il layout risponda a seconda delle dimensioni e degli orientamenti previsti.

Connessione automatica a Genitore è una funzionalità separata che puoi attivare. Quando è abilitata e aggiungi viste secondarie a una principale, questa funzionalità crea automaticamente due o più vincoli per ciascuna vista man mano che li aggiungi al layout, ma solo quando è opportuno vincolare la visualizzazione al layout principale. La connessione automatica non crea vincoli ad altre viste del layout.

La connessione automatica è disattivata per impostazione predefinita. Abilitala facendo clic su Abilita la connessione automatica al padre nella barra degli strumenti dell'Editor layout.

Animazioni per i fotogrammi chiave

All'interno di un elemento ConstraintLayout, puoi animare le modifiche apportate alle dimensioni e alla posizione degli elementi utilizzando ConstraintSet e TransitionManager.

Un ConstraintSet è un oggetto leggero che rappresenta i vincoli, i margini e la spaziatura interna di tutti gli elementi secondari all'interno di un elemento ConstraintLayout. Quando applichi un elemento ConstraintSet a una ConstraintLayout visualizzata, il layout aggiorna i vincoli di tutti i relativi elementi secondari.

Per creare un'animazione utilizzando ConstraintSet, specifica due file di layout che fungano da fotogrammi chiave di inizio e fine dell'animazione. Puoi quindi caricare ConstraintSet dal secondo file di fotogrammi chiave e applicarlo al ConstraintLayout visualizzato.

Il seguente esempio di codice mostra come animare lo spostamento di un singolo pulsante nella parte inferiore dello schermo.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}
// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Risorse aggiuntive

L'elemento ConstraintLayout viene utilizzato nell'app demo Girasole.