WEBVTT 1 00:00.770 --> 00:04.970 In questo video impareremo a conoscere le barriere di Jetpack Compose. 2 00:05.000 --> 00:11.990 Le barriere vengono utilizzate per creare vincoli rispetto ai bordi di più elementi. 3 00:12.020 --> 00:20.930 Le barriere possono essere utili quando è necessario allineare gli elementi in 4 00:20.960 --> 00:22.040 base al bordo più esterno degli altri elementi, come le linee guida. 5 00:22.040 --> 00:26.120 Abbiamo due tipi di barriere, verticali e orizzontali. 6 00:26.120 --> 00:34.820 L'unica differenza tra le barriere e le linee guida è che la posizione delle barriere è flessibile e si basa sempre 7 00:34.820 --> 00:44.480 sulle dimensioni degli elementi multipli dell'interfaccia utente contenuti al suo interno, mentre la posizione delle linee guida è sempre fissa. 8 00:44.720 --> 00:46.940 Continuiamo con il nostro esempio. 9 00:46.940 --> 00:52.490 E qui, all'interno del Constraintlayout, definirò una barriera. 10 00:52.760 --> 00:56.450 Per creare una barriera, dobbiamo iniziare con la val. 11 00:56.480 --> 01:03.550 Barriera uno equivale a creare una barriera. 12 01:03.580 --> 01:09.310 E qui dobbiamo specificare la barriera per la casella uno e la casella due. 13 01:09.340 --> 01:11.860 Scatola uno e scatola due. 14 01:11.890 --> 01:17.920 E per essere più chiaro, ho ridotto questa linea guida allo 0,05%. 15 01:17.950 --> 01:19.120 Lasciatemi correre. 16 01:19.120 --> 01:20.140 E questo è un bene. 17 01:20.170 --> 01:22.090 5% da sinistra. 18 01:22.090 --> 01:24.610 Questa è la linea guida, la linea guida verticale. 19 01:24.640 --> 01:26.440 Passiamo ora alla barriera. 20 01:26.470 --> 01:28.030 Sfruttate questa barriera. 21 01:28.030 --> 01:37.660 Abbiamo creato questa barriera utilizzando Crea e barriera, che può essere utilizzata per creare 22 01:37.660 --> 01:40.420 la barriera iniziale, creare la barriera superiore, creare la barriera inferiore e altre ancora. 23 01:40.420 --> 01:46.360 Ma per ora, a titolo dimostrativo, in questo esempio utilizziamo Create e barrier. 24 01:46.390 --> 01:54.160 In questo modo si creerà una barriera all'estremità che è il lato destro 25 01:54.160 --> 01:54.580 o il bordo destro della scatola numero uno e della scatola numero due. 26 01:54.610 --> 02:01.390 La barriera sarà posizionata sul bordo destro più lontano tra le due caselle. 27 02:01.390 --> 02:03.550 Lasciate che vi mostri la casella numero uno. 28 02:03.550 --> 02:05.920 Non dobbiamo modificare nulla. 29 02:05.950 --> 02:07.720 Anche la scatola numero due. 30 02:07.720 --> 02:15.730 E per il testo devo posizionare questo testo e creare una barriera tra le caselle e il testo. 31 02:15.730 --> 02:25.270 Per questo devo collegarlo alla barriera numero uno e non alla linea guida, e impostare il margine a 16 dpi. 32 02:25.300 --> 02:28.960 Eseguo l'applicazione ed eccoci qui. 33 02:28.990 --> 02:31.960 Si può notare che si tratta di una linea verticale. 34 02:31.990 --> 02:35.410 Linea guida verticale per il posizionamento della scatola numero uno. 35 02:35.410 --> 02:36.460 E la scatola numero due. 36 02:36.490 --> 02:41.890 Si tratta di una barriera verticale tra i riquadri e il testo. 37 02:41.890 --> 02:51.760 Quindi qui il testo è vincolato a una barriera che prenderà il bordo più lontano dei due componibili. 38 02:51.760 --> 02:56.560 Lasciate quindi che vi mostri e spieghi meglio e renda più chiaro il concetto. 39 02:56.560 --> 03:06.570 Se imposto la dimensione del riquadro numero due a 150 dpi, si può notare 40 03:06.570 --> 03:09.660 che la posizione del testo cambia in base alla dimensione del riquadro numero due. 41 03:09.690 --> 03:14.250 Se lo cambio, ad esempio, in 8080. 42 03:14.280 --> 03:19.140 Quindi, la casella numero due è più piccola della casella numero uno. 43 03:19.140 --> 03:28.290 Prenderà il bordo più lontano di entrambi i compositori di vincoli e imposterà una barriera. 44 03:28.290 --> 03:38.250 Quindi la barriera prenderà il bordo più lontano dell'interno componibile più grande e 45 03:38.250 --> 03:42.240 creerà una linea verticale e verticale tra le caselle e il testo. 46 03:42.270 --> 03:51.960 Quindi il nostro testo è collegato alla barriera e le barriere aiutano ad allineare gli 47 03:51.960 --> 04:00.030 elementi rispetto ai bordi combinati di più elementi, il che può essere utile per layout 48 04:00.030 --> 04:02.850 complessi, in cui gli elementi devono essere posizionati dinamicamente in base al loro contenuto.