Bentornati.
Abbiamo creato i riferimenti usando il comando create refs per i Composable.
Il secondo passo consiste nel creare la casella compostabile e utilizzare il vincolo come e passare la casella uno come parametro.
La funzione constraint as di Jetpack Compose è Constraintlayout e consente di definire
i vincoli per un composable rispetto ad altri composable o al layout padre.
Qui abbiamo.
La scatola è un componibile, cioè un contenitore che può contenere altri componibili o contenuti.
In questo esempio, lo coloriamo semplicemente di rosso.
Il modificatore viene utilizzato per applicare i modificatori alla casella.
I modificatori definiscono il layout, il comportamento e l'aspetto dei Composable e noi li abbiamo impostati a 100 dpi.
Lo sfondo è rosso e vincolato come la casella numero uno.
Vincolo.
Come si usa per definire i vincoli per la scatola, prende una scatola di riferimento creata
con la funzione create Refs e una funzione Lambda in cui sono definiti i vincoli.
Questa è l'espressione lambda in cui sono definiti i vincoli, quindi all'interno di questa lambda del vincolo.
Come.
Per la casella numero uno, definiremo i vincoli di questa casella.
Cominciamo con la parte superiore.
Collegamento al punto due in alto.
Qui è necessario collegarlo al genitore.
Utilizzerò quindi parent dot top e imposterò il margine uguale a 16 dpi.
In questo modo il bordo superiore del riquadro numero uno sarà collegato al bordo
superiore del layout del vincolo padre, con un margine di 16 dpi dall'alto.
Inoltre, utilizzeremo il collegamento del punto iniziale con il punto iniziale del genitore e imposteremo il margine su Attraverso 16 profondità.
Inoltre, abbiamo quattro lati di partenza superiori per ogni componibile.
Consentitemi di testare questa applicazione.
Quindi chiamerò questo Constraintlayout nel Constraintlayout.
All'interno di questa attività principale viene eseguita la funzione di contenuto della schermata Constraintlayout.
Ed eccoci qui.
Si può notare che questa è la nostra scatola rossa.
Questa è la casella numero uno.
È possibile vedere questa linea.
Collegamento superiore due imposta il bordo superiore del riquadro numero uno come collegato
al bordo superiore del Constraintlayout padre con un margine di 16 dpi dall'alto.
Anche startlink ai set.
Il margine da sinistra.
Start significa sinistra, ok e significa destra.
Questa riga imposta l'inizio o il bordo sinistro del riquadro numero uno come
collegato alla pagina iniziale del constraintlayout padre con un margine di 16 dpi.
Fin dall'inizio possiamo testare, ad esempio, 40 dpi e 100 dpi.
Ripartiamo dall'alto ed eccoci al punto di partenza.
Questo imposterà un margine dall'alto di 140 dpi dal lato sinistro.
Questa è la potenza dell'uso di Constraintlayout.
Ora creiamo un altro riquadro e colleghiamo questi riquadri tra loro e, in
base alla loro posizione all'interno dell'ambito del Constraintlayout, creerò un altro riquadro.
Ecco quindi la scatola.
Questa è la seconda scatola.
Creare un altro modificatore di casella dimensione punto 250 dpi.
Impostare lo sfondo sul colore punto verde e vincolare come.
Qui è necessario impostare l'href Come ho detto, il vincolo come
funzione prende due parametri, il riferimento e il blocco del vincolo.
Siamo interessati al rif.
Quindi è necessario specificare il riferimento creato con la funzione create ref.
Abbiamo quindi tre riferimenti: la casella numero uno, la casella numero due e un testo.
Dobbiamo utilizzare la casella di riferimento numero due.
E all'interno di questa espressione lambda del vincolo, mentre definiamo i vincoli di
questo riquadro, inizierò con il punto superiore che collega il riquadro numero uno.
Si può specificare sia verso altri componibili che verso il genitore.
Collegherò al riquadro numero uno il punto inferiore e imposterò il margine a 20
dp Startlink due punti iniziali del genitore e margine uguale a 30 DP.
Eseguiamo la nostra applicazione e vediamola in azione.
Qui abbiamo creato un'altra scatola.
Impostiamo i vincoli all'interno di questa espressione lambda.
Abbiamo due vincoli, quello superiore e quello iniziale.
Quindi questo è il nostro secondo riquadro, di colore verde.
Si può notare che utilizzando il collegamento superiore al riquadro numero uno il margine inferiore è 20.
In questo modo il bordo superiore del riquadro numero due è collegato al bordo
inferiore del riquadro numero uno, con un margine di 20 DP tra i due.
Inoltre, possiamo notare che Startlink due imposta il margine, ovvero imposta l'inizio o il
lato sinistro del riquadro numero due come collegato al bordo iniziale del genitore.
Quindi la casella numero due è collegata al genitore dal lato sinistro e dall'alto alla casella.
Numero uno.
Qui impostiamo da sinistra un margine di 30 DP.
Continuiamo con questo esempio e creiamo un altro testo componibile.
Ecco quindi il terzo componibile.
Sarà un testo.
Vincolo come l'uso del modificatore.
È sempre necessario impostare i riferimenti nella prima fase.
Quindi utilizzare questo riferimento con un vincolo come funzione all'interno del vincolo come funzione.
Dobbiamo passare questa espressione lambda e impostare i vincoli all'interno del punto superiore del collegamento due.
Dobbiamo collegarlo alla casella numero due.
Quindi il pulsante box two dot imposta il margine a 16 dpi, il che va
bene, e il link dot two parent dot end imposta il margine a 16 dpi.
Eseguire l'applicazione ed ecco che si parte.
Questo è il nostro testo.
È vincolato alla parte inferiore del riquadro numero due con margine 16 dpi e fine al genitore.
Ma qui abbiamo un errore Se notate che questo testo non è collegato al
lato destro del genitore, che è qui, è collegato al genitore qui perché
il genitore non viene recuperato e non riempie la dimensione massima dell'intero schermo.
Questo problema sarà risolto utilizzando il modificatore per questo constraintlayout.
Quindi modificatore equivale a modificatore punto di riempimento.
Larghezza massima.
Eseguiamo di nuovo l'operazione e vediamo i cambiamenti.
Ora si può notare che i vincoli sono applicati correttamente.
Il top dall'alto è 16 dpi e da destra è 16 DPI.
Congratulazioni! Questa è una
rapida introduzione a Constraintlayout.
Ora siamo pronti per un'immersione profonda nel Constraintlayout e per iniziare a costruire un progetto complesso.