WEBVTT

1
00:00.950 --> 00:01.970
Bentornati.

2
00:01.970 --> 00:07.250
Abbiamo creato i riferimenti usando il
comando create refs per i Composable.

3
00:07.250 --> 00:15.530
Il secondo passo consiste nel creare la
casella compostabile e utilizzare il
vincolo come e passare la casella uno come
parametro.

4
00:15.560 --> 00:23.450
La funzione constraint as di Jetpack
Compose è Constraintlayout e consente di
definire

5
00:23.450 --> 00:29.270
i vincoli per un composable rispetto ad
altri composable o al layout padre.

6
00:29.300 --> 00:30.260
Qui abbiamo.

7
00:30.260 --> 00:35.990
La scatola è un componibile, cioè un
contenitore che può contenere altri
componibili o contenuti.

8
00:35.990 --> 00:40.130
In questo esempio, lo coloriamo
semplicemente di rosso.

9
00:40.160 --> 00:44.300
Il modificatore viene utilizzato per
applicare i modificatori alla casella.

10
00:44.300 --> 00:50.900
I modificatori definiscono il layout, il
comportamento e l'aspetto dei Composable e
noi li abbiamo impostati a 100 dpi.

11
00:50.930 --> 00:55.190
Lo sfondo è rosso e vincolato come la
casella numero uno.

12
00:55.190 --> 00:55.850
Vincolo.

13
00:55.850 --> 01:05.300
Come si usa per definire i vincoli per la
scatola, prende una scatola di riferimento
creata

14
01:05.300 --> 01:10.160
con la funzione create Refs e una funzione
Lambda in cui sono definiti i vincoli.

15
01:10.190 --> 01:17.780
Questa è l'espressione lambda in cui sono
definiti i vincoli, quindi all'interno di
questa lambda del vincolo.

16
01:17.780 --> 01:18.110
Come.

17
01:18.110 --> 01:23.780
Per la casella numero uno, definiremo i
vincoli di questa casella.

18
01:23.780 --> 01:26.360
Cominciamo con la parte superiore.

19
01:26.390 --> 01:28.790
Collegamento al punto due in alto.

20
01:28.820 --> 01:31.190
Qui è necessario collegarlo al genitore.

21
01:31.190 --> 01:38.420
Utilizzerò quindi parent dot top e
imposterò il margine uguale a 16 dpi.

22
01:38.450 --> 01:48.200
In questo modo il bordo superiore del
riquadro numero uno sarà collegato al
bordo

23
01:48.200 --> 01:52.340
superiore del layout del vincolo padre,
con un margine di 16 dpi dall'alto.

24
01:52.340 --> 02:02.150
Inoltre, utilizzeremo il collegamento del
punto iniziale con il punto iniziale del
genitore e imposteremo il margine su
Attraverso 16 profondità.

25
02:02.270 --> 02:08.540
Inoltre, abbiamo quattro lati di partenza
superiori per ogni componibile.

26
02:08.570 --> 02:10.970
Consentitemi di testare questa
applicazione.

27
02:10.970 --> 02:15.500
Quindi chiamerò questo Constraintlayout
nel Constraintlayout.

28
02:15.500 --> 02:22.010
All'interno di questa attività principale
viene eseguita la funzione di contenuto
della schermata Constraintlayout.

29
02:22.010 --> 02:23.540
Ed eccoci qui.

30
02:23.570 --> 02:27.260
Si può notare che questa è la nostra
scatola rossa.

31
02:27.260 --> 02:29.000
Questa è la casella numero uno.

32
02:29.000 --> 02:31.190
È possibile vedere questa linea.

33
02:31.190 --> 02:40.220
Collegamento superiore due imposta il
bordo superiore del riquadro numero uno
come collegato

34
02:40.220 --> 02:43.670
al bordo superiore del Constraintlayout
padre con un margine di 16 dpi dall'alto.

35
02:43.670 --> 02:47.480
Anche startlink ai set.

36
02:47.480 --> 02:49.610
Il margine da sinistra.

37
02:49.610 --> 02:54.290
Start significa sinistra, ok e significa
destra.

38
02:54.290 --> 03:03.140
Questa riga imposta l'inizio o il bordo
sinistro del riquadro numero uno come

39
03:03.140 --> 03:07.100
collegato alla pagina iniziale del
constraintlayout padre con un margine di
16 dpi.

40
03:07.130 --> 03:14.300
Fin dall'inizio possiamo testare, ad
esempio, 40 dpi e 100 dpi.

41
03:14.330 --> 03:17.540
Ripartiamo dall'alto ed eccoci al punto di
partenza.

42
03:17.570 --> 03:24.140
Questo imposterà un margine dall'alto di
140 dpi dal lato sinistro.

43
03:24.140 --> 03:28.250
Questa è la potenza dell'uso di
Constraintlayout.

44
03:28.280 --> 03:37.160
Ora creiamo un altro riquadro e
colleghiamo questi riquadri tra loro e, in

45
03:37.160 --> 03:41.600
base alla loro posizione all'interno
dell'ambito del Constraintlayout, creerò
un altro riquadro.

46
03:41.600 --> 03:44.750
Ecco quindi la scatola.

47
03:44.750 --> 03:46.490
Questa è la seconda scatola.

48
03:46.490 --> 03:53.600
Creare un altro modificatore di casella
dimensione punto 250 dpi.

49
03:53.810 --> 04:00.050
Impostare lo sfondo sul colore punto verde
e vincolare come.

50
04:00.050 --> 04:07.850
Qui è necessario impostare l'href Come ho
detto, il vincolo come

51
04:07.850 --> 04:09.590
funzione prende due parametri, il
riferimento e il blocco del vincolo.

52
04:09.590 --> 04:11.660
Siamo interessati al rif.

53
04:11.660 --> 04:19.700
Quindi è necessario specificare il
riferimento creato con la funzione create
ref.

54
04:19.700 --> 04:24.800
Abbiamo quindi tre riferimenti: la casella
numero uno, la casella numero due e un
testo.

55
04:25.280 --> 04:28.490
Dobbiamo utilizzare la casella di
riferimento numero due.

56
04:28.520 --> 04:36.440
E all'interno di questa espressione lambda
del vincolo, mentre definiamo i vincoli di

57
04:36.440 --> 04:41.300
questo riquadro, inizierò con il punto
superiore che collega il riquadro numero
uno.

58
04:41.300 --> 04:47.060
Si può specificare sia verso altri
componibili che verso il genitore.

59
04:47.090 --> 04:57.290
Collegherò al riquadro numero uno il punto
inferiore e imposterò il margine a 20

60
04:57.290 --> 05:00.380
dp Startlink due punti iniziali del
genitore e margine uguale a 30 DP.

61
05:00.410 --> 05:03.570
Eseguiamo la nostra applicazione e
vediamola in azione.

62
05:03.570 --> 05:05.790
Qui abbiamo creato un'altra scatola.

63
05:05.790 --> 05:10.080
Impostiamo i vincoli all'interno di questa
espressione lambda.

64
05:10.080 --> 05:13.170
Abbiamo due vincoli, quello superiore e
quello iniziale.

65
05:13.170 --> 05:16.020
Quindi questo è il nostro secondo
riquadro, di colore verde.

66
05:16.020 --> 05:22.590
Si può notare che utilizzando il
collegamento superiore al riquadro numero
uno il margine inferiore è 20.

67
05:22.620 --> 05:30.780
In questo modo il bordo superiore del
riquadro numero due è collegato al bordo

68
05:30.780 --> 05:33.450
inferiore del riquadro numero uno, con un
margine di 20 DP tra i due.

69
05:33.450 --> 05:42.780
Inoltre, possiamo notare che Startlink due
imposta il margine, ovvero imposta
l'inizio o il

70
05:42.810 --> 05:46.950
lato sinistro del riquadro numero due come
collegato al bordo iniziale del genitore.

71
05:46.950 --> 05:53.910
Quindi la casella numero due è collegata
al genitore dal lato sinistro e dall'alto
alla casella.

72
05:53.910 --> 05:54.720
Numero uno.

73
05:54.720 --> 05:58.380
Qui impostiamo da sinistra un margine di
30 DP.

74
05:58.410 --> 06:03.930
Continuiamo con questo esempio e creiamo
un altro testo componibile.

75
06:03.930 --> 06:06.720
Ecco quindi il terzo componibile.

76
06:06.720 --> 06:08.490
Sarà un testo.

77
06:12.810 --> 06:16.110
Vincolo come l'uso del modificatore.

78
06:16.140 --> 06:20.310
È sempre necessario impostare i
riferimenti nella prima fase.

79
06:20.310 --> 06:26.550
Quindi utilizzare questo riferimento con
un vincolo come funzione all'interno del
vincolo come funzione.

80
06:26.550 --> 06:33.630
Dobbiamo passare questa espressione lambda
e impostare i vincoli all'interno del
punto superiore del collegamento due.

81
06:33.660 --> 06:36.420
Dobbiamo collegarlo alla casella numero
due.

82
06:36.450 --> 06:47.670
Quindi il pulsante box two dot imposta il
margine a 16 dpi, il che va

83
06:47.670 --> 06:50.160
bene, e il link dot two parent dot end
imposta il margine a 16 dpi.

84
06:50.370 --> 06:52.590
Eseguire l'applicazione ed ecco che si
parte.

85
06:52.620 --> 06:53.730
Questo è il nostro testo.

86
06:53.730 --> 07:01.380
È vincolato alla parte inferiore del
riquadro numero due con margine 16 dpi e
fine al genitore.

87
07:01.380 --> 07:08.790
Ma qui abbiamo un errore Se notate che
questo testo non è collegato al

88
07:08.790 --> 07:17.070
lato destro del genitore, che è qui, è
collegato al genitore qui perché

89
07:17.070 --> 07:19.800
il genitore non viene recuperato e non
riempie la dimensione massima dell'intero
schermo.

90
07:19.800 --> 07:25.470
Questo problema sarà risolto utilizzando
il modificatore per questo
constraintlayout.

91
07:25.470 --> 07:28.590
Quindi modificatore equivale a
modificatore punto di riempimento.

92
07:28.620 --> 07:30.030
Larghezza massima.

93
07:30.030 --> 07:32.820
Eseguiamo di nuovo l'operazione e vediamo
i cambiamenti.

94
07:32.820 --> 07:37.380
Ora si può notare che i vincoli sono
applicati correttamente.

95
07:37.410 --> 07:43.980
Il top dall'alto è 16 dpi e da destra è 16
DPI.

96
07:44.010 --> 07:45.150
Congratulazioni! Questa è una

97
07:45.150 --> 07:48.750
rapida introduzione a Constraintlayout.

98
07:48.780 --> 07:55.590
Ora siamo pronti per un'immersione
profonda nel Constraintlayout e per
iniziare a costruire un progetto
complesso.