Crea una UI reattiva con ConstraintLayout Parte di Android Jetpack.

Anche se un vincolo mancante non causa 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 aiutarti a evitare la mancanza di vincoli, l'Editor layout aggiunge automaticamente i vincoli con le funzionalità Collega automaticamente e deduci i vincoli.

Aggiungere ConstraintLayout al progetto

Per utilizzare ConstraintLayout nel tuo progetto:

1. Assicurati di aver dichiarato il repository maven.google.com nel file settings.gradle:

   Groovy

       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"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0"
   }
   

   Kotlin

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

3. Nella barra degli strumenti o nella notifica di sincronizzazione, fai clic su Sincronizza progetto con i file Gradle.

Ora puoi creare il layout con ConstraintLayout.

Convertire un layout

Per convertire un layout esistente in un layout con vincoli:

1. Apri il layout in Android Studio e fai clic sulla scheda Design nella parte inferiore della finestra dell'editor.
2. Nella finestra Component Tree (Albero dei componenti), fai clic con il tasto destro del mouse sul layout e poi su Convert LinearLayout to ConstraintLayout (Converti LinearLayout in ConstraintLayout).

Creare un nuovo layout

Per avviare un nuovo file di layout vincolato:

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

Aggiungere o rimuovere una limitazione

Per aggiungere un vincolo:

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

   Quando aggiungi una visualizzazione in un ConstraintLayout, viene visualizzata in un riquadro di delimitazione con maniglie di ridimensionamento quadrate su ogni angolo e maniglie di vincolo circolari su ogni lato.

2. Fai clic sulla visualizzazione per selezionarla.
3. Esegui una delle seguenti operazioni:
   • Fai clic sul punto di manipolazione di un vincolo e trascinalo in un punto di ancoraggio disponibile. Questo punto può essere il bordo di un'altra visualizzazione, il bordo del layout o una linea guida. Tieni presente che quando trascini il punto di manipolazione del vincolo, l'editor del layout mostra potenziali ancoraggi delle connessioni 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 visualizzazioni.

Quando crei vincoli, ricorda le seguenti regole:

• Ogni visualizzazione deve avere almeno due vincoli: uno orizzontale e uno verticale.
• Puoi creare vincoli solo tra un punto di manipolazione del vincolo 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 base possono essere vincolate solo ad altre linee di base.
• Ogni handle può essere utilizzato per un solo vincolo, ma è possibile creare più vincoli da viste diverse allo stesso punto di ancoraggio.

Per eliminare una limitazione, puoi eseguire una delle seguenti operazioni:

• Fai clic su una limitazione per selezionarla e poi su Elimina.

• Premi Ctrl e fai clic (Comando e fai clic su macOS) su un ancoraggio di 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'ancora di vincolo, come mostrato nella figura 6.

  

  Figura 6. Fai clic su un'ancora di vincolo per eliminarla.

Se aggiungi vincoli opposti a 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 della visualizzazione sono impostate su "Fissate" o "A capo automatico", nel qual caso la visualizzazione è centrata tra i vincoli. Se invece vuoi che la vista allunghi le dimensioni per soddisfare i vincoli, imposta le dimensioni su "Adatta ai vincoli". Se vuoi mantenere la dimensione corrente, ma spostare la vista in modo che non sia centrata, modifica la bias del vincolo.

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

Posizione del gruppo di base

Posizione ordine

Allineamento

Allineamento di base

Rispettare una linea guida

Limita a una barriera

Modificare il bias del vincolo

Quando aggiungi un vincolo a entrambi i lati di una visualizzazione e le dimensioni della visualizzazione per la stessa dimensione sono "Fisse" o "Adatta ai contenuti", la visualizzazione viene centrata tra i due vincoli con un bias del 50% per impostazione predefinita. Puoi regolare i bias trascinando il relativo cursore nella finestra Attributi o trascinando la visualizzazione, come mostrato nel video 3.

Se invece vuoi che la visualizzazione modifichi le dimensioni per soddisfare i vincoli, imposta la dimensione su "Adatta ai vincoli".

Regolare le dimensioni della visualizzazione

Puoi utilizzare i maniglie angolari per ridimensionare una visualizzazione, ma le dimensioni vengono impostate in modo fisso: la visualizzazione non si ridimensiona in base a contenuti o dimensioni dello schermo diversi. Per selezionare una modalità di dimensionamento diversa, fai clic su una visualizzazione e apri la finestra Attributi sul lato destro dell'editor.

Nella parte superiore della finestra Attributi si trova l'ispettore della visualizzazione, che include controlli per diversi attributi di layout, come mostrato nella figura 14. Questa opzione è disponibile solo per le visualizzazioni in un layout vincolato.

Puoi modificare il modo in cui vengono calcolate l'altezza e la larghezza facendo clic sui simboli indicati con il callout 3 nella figura 14. Questi simboli rappresentano la modalità di dimensione come segue. Fai clic sul simbolo per passare tra queste impostazioni:

• Fissa: specifica una dimensione specifica nella casella di testo seguente o ridimensionando la vista nell'editor.
• A capo: la visualizzazione si espande solo per adattarsi ai contenuti.
• layout_constrainedWidth

Imposta questo valore su true per consentire alla dimensione orizzontale di cambiare in modo da rispettare i vincoli. Per impostazione predefinita, un widget impostato su WRAP_CONTENT non è limitato da vincoli.

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

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

  • layout_constraintWidth_max

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

  Tuttavia, se la dimensione specificata ha un solo vincolo, la visualizzazione si espande in base ai relativi contenuti. L'utilizzo di questa modalità per l'altezza o la larghezza consente inoltre di impostare un rapporto di dimensioni.

Impostare la dimensione come proporzione

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

Se sia la larghezza che l'altezza sono impostate su "adatta ai vincoli", puoi fare clic su Attiva/disattiva vincolo proporzioni per selezionare la dimensione basata su un rapporto dell'altra. Controllo viste indica quale dimensione è impostata come rapporto collegando i bordi corrispondenti con una linea continua.

Ad esempio, se imposti entrambi i lati su "Adatta ai vincoli", fai clic due volte su Attiva/disattiva vincolo proporzioni per impostare la larghezza come proporzione dell'altezza. L'intera dimensione è dettata dall'altezza della visualizzazione, che può essere definita in qualsiasi modo, come mostrato nella figura 15.

Regolare i margini della visualizzazione

Per mantenere le visualizzazioni equidistanti, fai clic su Margine nella barra degli strumenti per selezionare il margine predefinito per 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 per ogni visualizzazione nella finestra Attributi facendo clic sul numero nella riga che rappresenta ciascun vincolo. Nella figura 14, il callout 4 mostra che il margine inferiore è impostato su 16 dp.

Figura 16. Pulsante Margine della barra degli strumenti.

Tutti i margini offerti dallo strumento sono fattori di 8 dp per allineare le visualizzazioni ai consigli della griglia quadrata di 8 dp di Material Design.

Controllare gruppi lineari con una catena

Una catena è un gruppo di visualizzazioni collegate tra loro con vincoli di posizione bidirezionali. Le visualizzazioni all'interno di una catena possono essere distribuite verticalmente o orizzontalmente.

Le catene possono essere definite in uno dei seguenti modi:

1. Distribuzione: le visualizzazioni vengono distribuite in modo uniforme dopo aver considerato i margini. Questa è l'impostazione predefinita.
2. Risparti all'interno:le visualizzazioni iniziali e finali vengono applicate ai vincoli su ciascun estremo della catena, mentre le altre vengono distribuite uniformemente.
3. Spessorata:quando la catena è impostata su distribuisci o distribuisci all'interno, puoi riempire lo spazio rimanente impostando una o più visualizzazioni su"adatta ai vincoli" (0dp). Per impostazione predefinita, lo spazio viene distribuito in modo uniforme tra ogni visualizzazione impostata su "adatta ai vincoli", ma puoi assegnare un peso di importanza a ogni visualizzazione utilizzando gli attributi layout_constraintHorizontal_weight e layout_constraintVertical_weight. Il funzionamento è lo stesso di layout_weight in un layout lineare: la visualizzazione con il valore di peso più elevato riceve lo spazio maggiore e le visualizzazioni con lo stesso peso ricevono la stessa quantità di spazio.
4. In pacchetti:le visualizzazioni vengono raggruppate dopo aver tenuto conto dei margini. Puoi regolare la distorsione dell'intera catena, verso sinistra o verso destra o verso l'alto o verso il basso, modificando la distorsione della vista "principale" della catena.

La visualizzazione "principale" 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 passare da Spaiato, Spaiato all'interno e Rigoroso selezionando una visualizzazione della serie e facendo clic sul pulsante della serie che viene visualizzato sotto la visualizzazione.

Per creare una catena, procedi nel seguente modo, 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 viste.
3. Seleziona Catene.
4. Seleziona Centra orizzontalmente o Centra verticalmente.

Ecco alcuni aspetti da considerare quando utilizzi le catene:

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

Creare automaticamente vincoli

Invece di aggiungere vincoli a ogni vista man mano che le posizioni nel layout, puoi spostare ciascuna vista nelle posizioni che preferisci nell'Editor del layout e fare clic su Deduci vincoli per creare automaticamente i vincoli.

L'opzione Deduce vincoli esegue la scansione del layout per determinare l'insieme di vincoli più efficace per tutte le visualizzazioni. Limita le visualizzazioni alle posizioni attuali offrendo al contempo flessibilità. Potresti dover apportare modifiche per fare in modo che il layout sia adattabile come previsto per dimensioni e orientamenti dello schermo diversi.

Connessione automatica a genitore è una funzionalità separata che puoi attivare. Quando è attiva e aggiungi visualizzazioni secondarie a una principale, questa funzionalità crea automaticamente due o più vincoli per ogni visualizzazione man mano che le aggiungi al layout, ma solo se è 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. Per attivarla, fai clic su Attiva Collegamenti automatici al layout principale nella barra degli strumenti di Layout Editor.

Animazioni con fotogrammi chiave

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

Un ConstraintSet è un oggetto leggero che rappresenta i vincoli, i margini e i margini di tutti gli elementi secondari all'interno di un ConstraintLayout. Quando applichi un ConstraintSet a un ConstraintLayout visualizzato, il layout aggiorna i vincoli di tutti i suoi elementi secondari.

Per creare un'animazione utilizzando ConstraintSet, specifica due file di layout che fungono da fotogrammi chiave di inizio e fine per l'animazione. Puoi quindi caricare un 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 della schermata.

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

ConstraintLayout viene utilizzato nell'app demo Sunflower.