Crea una UI reattiva con ConstraintLayout Parte di Android Jetpack.

Figura 1. L'editor mostra la vista C sotto la 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, il layout Editor indica i vincoli mancanti come errore nella barra degli strumenti. Per visualizzare errori e altri avvisi, fai clic su Mostra avvisi ed errori. . Per aiutarti a evitare vincoli, l'editor layout aggiunge automaticamente per te i vincoli Connettere e dedurre automaticamente i vincoli le funzionalità di machine learning.

Aggiungi ConstraintLayout al tuo progetto

Per utilizzare ConstraintLayout nel tuo progetto, procedi come segue:

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

   Alla moda

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

   Kotlin

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

2. Aggiungi la libreria come dipendenza a livello di modulo build.gradle, come mostrato nell'esempio seguente. Ultime novità potrebbe essere diversa da quella mostrata nell'esempio.

   Alla moda

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

   Kotlin

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

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

Ora è tutto pronto per creare il tuo layout con ConstraintLayout.

Convertire un layout

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

Per convertire un layout esistente in un layout con vincoli:

1. Apri il layout in Android Studio e fai clic sulla scheda Design in fondo alla finestra dell'editor.
2. Nella finestra Struttura dei componenti, fai clic con il tasto destro del mouse sul layout e fai clic su Converti LinearLayout in ConstraintLayout.

Crea un nuovo layout

Per avviare un nuovo file di layout del 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" per il radice Tag.
3. Fai clic su Fine.

Aggiungi o rimuovi un vincolo

Per aggiungere un vincolo:

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

   Quando aggiungi una vista in un ConstraintLayout, questa viene visualizzata in riquadro di delimitazione con punti di manipolazione di ridimensionamento quadrati in ogni angolo e punti di manipolazione del vincolo 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. Può trattarsi del bordo di un'altra vista, del bordo del layout o di una una linea guida. Nota che quando trascini il punto di manipolazione del vincolo, il layout L'editor mostra potenziali ancoraggi di connessioni e overlay blu.

   • Fai clic su Crea una connessione nella sezione Layout della finestra Attributi, come mostrato come mostrato nella figura 4.

     

     Figura 4. Il Layout della finestra Attributi ti consente di creare e connessioni a Internet.

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

Quando crei vincoli, ricorda le seguenti regole:

• Ogni visualizzazione deve avere almeno due vincoli: uno orizzontale e uno verticale.
• Puoi creare vincoli solo tra il punto di manipolazione di un vincolo e un ancoraggio punto di accesso che condivide lo stesso piano. Un piano verticale, il piano di sinistra e di destra lati di una vista possono essere vincolati solo a un altro piano verticale; le basi di riferimento possono limitare solo ad altre basi.
• Ogni handle può essere utilizzato per un solo vincolo, ma puoi creare più vincoli da diverse viste allo stesso punto di ancoraggio.

Puoi eliminare un vincolo in uno dei seguenti modi:

• Fai clic su un vincolo per selezionarlo, quindi fai clic su Elimina.

• Ctrl+clic (Comando+clic su macOS) e di ancoraggio del vincolo. Il vincolo diventa rosso per indicare che puoi fare clic per come mostrato nella Figura 5.

  

  Figura 5. Un vincolo rosso indica su cui puoi fare clic per eliminarla.

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

  

  Figura 6. Fai clic su un vincolo per eliminarlo.

Se aggiungi vincoli opposti a una vista, le linee di vincolo diventano avvolte come una molla per indicare le forze opposte, come mostrato nel video 2. La è più visibile quando le dimensioni di visualizzazione sono impostate su "fisse" o "wrapper contenuti" nel qual caso la vista è centrata tra i vincoli. Se invece vuoi la visualizzazione estendendone le dimensioni in modo da soddisfare i vincoli, cambia la dimensione in "corrisponde a vincoli". Se vuoi mantenere la dimensione corrente, ma spostare la visualizzazione in modo che non sia centrata, regola la parzialità dei vincoli.

Puoi usare i vincoli per ottenere diversi tipi di comportamento del layout, descritti nelle sezioni seguenti.

Posizione padre

Fissa il lato di una vista al bordo corrispondente del layout.

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

Figura 7. Un vincolo orizzontale l'elemento principale.

Posizione ordine

Definisci l'ordine di visualizzazione di due visualizzazioni, verticalmente o in orizzontale.

Nella figura 8, B è vincolato a essere sempre a destra di A, mentre C è vincolato al di sotto di A. Tuttavia, questi vincoli non implicano l'allineamento, per cui B può si muovono ancora su e giù.

Figura 8. Orizzontale e verticale di blocco.

Allineamento

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

Nella figura 9, il lato sinistro di B è allineato a quello sinistro di A. Se vuoi per allineare i centri vista, crea un vincolo su entrambi i lati.

Per eseguire l'offset dell'allineamento, trascina la vista verso l'interno dal vincolo. Ad esempio, la figura 10 mostra la lettera B con un allineamento di offset di 24 dp. L'offset è definita dal margine della visualizzazione vincolata.

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

Figura 9. Un allineamento orizzontale di blocco.

Figura 10. Un offset orizzontale un vincolo di allineamento.

Allineamento di riferimento

Allinea la base del testo di una vista a quella di un'altra vista.

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

Per creare un vincolo di riferimento, fai clic con il pulsante destro del mouse sulla visualizzazione di testo che vuoi vincolare e quindi fai clic su Mostra base di riferimento. Quindi fai clic sul testo base e trascina la linea su un'altra base di riferimento.

Figura 11. Un allineamento di riferimento di blocco.

Rispettare una linea guida

Puoi aggiungere una linea guida verticale o orizzontale che ti consenta di e non è 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 bordo del layout.

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

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

Figura 12. Una visualizzazione vincolata a un una linea guida.

Vincola a una barriera

Come una linea guida, una barriera è una linea invisibile che puoi vincolare visualizzazioni, ad eccezione di una barriera che non definisce la propria posizione. Invece, la barriera si sposta in base alla posizione delle visualizzazioni al suo interno. Questo è utile quando vuoi limitare una vista a un insieme di viste anziché vista specifica.

Ad esempio, nella figura 13, la vista C è vincolata al lato destro di una ostacolo. La barriera è impostata alla fine (o sul lato destro, in modo da layout) di entrambe le viste A e B. La barriera si sposta a seconda che lato destro della vista A o della vista B è più a destra.

Per creare una barriera:

1. Fai clic su Linee guida. nella barra degli strumenti e poi fai clic su Aggiungi barriera verticale o Aggiungi barriera orizzontale.
2. Nella finestra Struttura dei componenti, seleziona le viste che vuoi all'interno dell' barriera e trascinarle all'interno del componente della barriera.
3. Seleziona la barriera dall'Albero dei componenti e apri Attributi e poi imposta la barrierDirection.

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

Puoi anche limitare le viste che si trovano all'interno della barriera che ostacolo. In questo modo, puoi allineare tra loro tutte le visualizzazioni della barriera anche se non sai qual è la visualizzazione più lunga o più alta.

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

Figura 13. La vista C è vincolata a una barriera che si sposta in base alla posizione e alle dimensioni di entrambe le viste A e B.

Regola la parzialità del vincolo

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

Se invece vuoi che la visualizzazione espanda le sue dimensioni per soddisfare i vincoli, cambia la dimensione in "corrisponde a vincoli".

Regolare le dimensioni della visualizzazione

Figura 14. Quando selezioni una visualizzazione, La finestra Attributi include i controlli per 1 rapporto di dimensione, 2 Eliminando i vincoli, 3 modalità di altezza o larghezza, 4 margini e 5 Bias dei vincoli. Puoi anche evidenziare i singoli vincoli nell'Editor layout facendo clic su di essi nella 6 elenco di vincoli.

Puoi utilizzare i punti di manipolazione agli angoli per ridimensionare una vista, ma questa operazione applica l'hardcode dimensioni: la visualizzazione non viene ridimensionata a seconda dei contenuti o di dimensioni dello schermo diverse. A selezionare una modalità di dimensionamento diversa, fare clic su una visualizzazione e aprire la sezione Attributi sul lato destro dell'editor.

Nella parte superiore della finestra Attributi si trova la finestra di ispezione delle visualizzazioni, che include i controlli per diversi attributi di layout, come mostrato nella Figura 14. Questo è disponibile solo per le viste con il layout a vincolo.

Per modificare la modalità di calcolo dell'altezza e della larghezza, fai clic sul indicati con il callout 3 nella Figura 14. Questi simboli rappresentano la modalità dimensioni come segue. Fai clic sul simbolo per attivare/disattivare tra queste impostazioni:

• Fissa: specifica una dimensione specifica nella casella di testo seguente o in base a ridimensionando la visualizzazione nell'editor.
• Aggrega contenuti: la visualizzazione si espande solo nella misura necessaria per adattarsi alla relativa visualizzazione contenuti.
• layout_restrictedwidth

Imposta questo elemento su true per lasciare che la dimensione orizzontale venga modificata in rispettino 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 i vincoli su ogni lato, dopo aver tenuto conto dei margini della vista. Tuttavia, può modificare questo comportamento con i seguenti attributi e valori. Questi hanno effetto solo quando imposti la larghezza della visualizzazione su "corrisponde a vincoli":
  • layout_constraintwidth_min

    Viene utilizzata una dimensione dp per la larghezza minima della visualizzazione.

  • layout_constraintwidth_max

    Viene utilizzata una dimensione dp per la larghezza massima della visualizzazione.

  Tuttavia, se la dimensione specificata ha un solo vincolo, la visualizzazione si espande per adattarlo ai contenuti. Questa modalità viene usata anche per l'altezza o la larghezza consente di impostare un rapporto delle dimensioni.

Imposta la dimensione come rapporto

Figura 15. La visualizzazione è impostata su 16:9 con la larghezza in base a un rapporto tra l'altezza.

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

Se sia la larghezza che l'altezza sono impostate su "corrispondenza vincoli", puoi fare clic Attiva/disattiva il vincolo di proporzioni per selezionare la dimensione basata su un rapporto dell'altro. La finestra di ispezione delle viste indica quale dimensione è impostata come una rapporto unendo i bordi corrispondenti con una linea continua.

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

Modificare i margini della visualizzazione

Per distribuire le visualizzazioni in modo uniforme, fai clic su Margine. nella barra degli strumenti per selezionare il margine predefinito per ogni vista aggiunta alla layout. Qualsiasi modifica apportata al margine predefinito si applica solo alle viste aggiungi da quel momento in poi.

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

Figura 16. Il Margine della barra degli strumenti .

Tutti i margini offerti dallo strumento sono fattori di 8 dp per facilitare l'allineamento delle visualizzazioni secondo i suggerimenti di griglia quadrata di 8 dp di Material Design.

Controllare gruppi lineari con una catena

Figura 17. Una catena orizzontale con due visualizzazioni.

Una catena è un gruppo di visualizzazioni collegate tra loro tramite immagini vincoli di posizione. Le viste all'interno di una catena possono essere distribuite in verticale o orizzontale.

Figura 18. Esempi di ogni catena lo stile del testo.

Le catene possono essere definite in uno dei seguenti modi:

1. Distribuzione: le visualizzazioni vengono distribuite uniformemente dopo che i margini sono stati preso in considerazione. Questa è l'impostazione predefinita.
2. Distribuisci all'interno: la prima e l'ultima visualizzazione sono apposto nella sezione vincoli su ciascuna estremità della catena, mentre il resto è uniforme distribuiti in tempo reale.
3. Ponderata: quando la catena è impostata su spread o distribuito all'interno, puoi riempire lo spazio rimanente impostandone uno o più visualizzazioni e "vincoli di corrispondenza" (0dp). Per impostazione predefinita, lo spazio è e uniformemente distribuite tra le viste impostate sui "limiti di corrispondenza" ma puoi assegnare un peso di importanza a ciascuna vista utilizzando layout_constraintHorizontal_weight e layout_constraintVertical_weight. Funziona come layout_weight in una layout lineare: la vista con il valore di ponderazione più alto ottiene la maggiore quantità di spazio, e le visualizzazioni che hanno la stessa ponderazione riceveranno la stessa quantità di spazio.
4. Confezionato: le visualizzazioni vengono raggruppate dopo aver valutato i margini. . Puoi regolare i bias dell'intera catena: a destra o a sinistra, verso l'alto o verso il basso modificando la "testa" della catena pregiudizi di visualizzazione.

La "testa" della catena vista: la visualizzazione più a sinistra in una catena orizzontale (in un layout da sinistra a destra) e più in alto in una catena verticale: definisce lo stile della catena in XML. Tuttavia, puoi alternare tra spread, spread all'interno e compresso selezionando una visualizzazione qualsiasi nella catena e facendo clic sul pulsante della catena che appare 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 viste.
3. Seleziona Catene.
4. Seleziona Centra orizzontalmente o Centra verticalmente.

Ecco alcuni aspetti da considerare quando si utilizzano le catene:

• Una vista può far parte di una catena sia orizzontale che verticale, 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.
• Sebbene l'orientamento di una catena sia verticale o orizzontale, l'uso di una non allinea le viste in quella direzione. Per ottenere la posizione corretta ciascuna visualizzazione nella catena, includono altri vincoli, vincoli di allineamento.

Creazione automatica dei vincoli

Invece di aggiungere vincoli a ogni visualizzazione quando li posizioni nel layout, puoi spostare ciascuna vista nelle posizioni che preferisci nell'Editor layout e quindi fai clic su Deduci vincoli. per creare automaticamente i vincoli.

Deduci vincoli scansiona il layout per determinare l'insieme più efficace. dei vincoli per tutte le viste. Vincola le visualizzazioni alle posizioni correnti offrendo al contempo flessibilità. Potresti dover apportare modifiche per il layout si adatta alle dimensioni e agli orientamenti dei vari schermi.

Connessione automatica a genitore è una funzionalità separata che puoi attivare. Quando viene attivata e aggiungi le viste secondarie a un genitore, questa funzionalità crea due o più vincoli per ogni vista man mano che li aggiungi ma solo quando è opportuno vincolare la visualizzazione all'elemento principale layout. La connessione automatica non crea vincoli ad altre viste del layout.

La connessione automatica è disattivata per impostazione predefinita. Per abilitarla, fai clic su Attiva Connessione automatica al genitore nella barra degli strumenti dell'Editor layout.

Animazioni dei fotogrammi chiave

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

Un ConstraintSet è un oggetto leggero che rappresenta vincoli, margini e spaziatura interna di tutti gli elementi secondari in un ConstraintLayout. Quando applichi ConstraintSet a un visualizzato ConstraintLayout, il layout aggiorna i vincoli di a tutti i relativi figli.

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

L'esempio di codice seguente mostra come animare lo spostamento di un singolo pulsante nell' 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

ConstraintLayout è utilizzato in Girasole app demo.