WEBVTT

1
00:00.740 --> 00:01.790
Bentornati.

2
00:01.790 --> 00:05.000
In questo video parleremo delle linee
guida.

3
00:05.000 --> 00:12.590
Chi ha dimestichezza con gli strumenti di
progettazione grafica conosce già

4
00:12.590 --> 00:14.990
il concetto di linee guida, perché sono di
uso comune.

5
00:14.990 --> 00:22.580
Ma per coloro che non lo sono, una linea
guida è una guida visiva che non viene
vista in fase di esecuzione.

6
00:22.580 --> 00:30.140
Utilizzate per allineare altre viste nelle
linee guida di Constraintlayout, sono
aiutanti di layout invisibili

7
00:30.140 --> 00:34.880
che consentono di creare un posizionamento
e un allineamento precisi degli elementi
dell'interfaccia utente.

8
00:34.910 --> 00:43.040
Le linee guida fungono da linea di
riferimento all'interno del layout,
fornendo un modo per posizionare le

9
00:43.040 --> 00:49.760
viste rispetto a tali linee guida
piuttosto che ai bordi del layout padre o
di altre viste.

10
00:49.760 --> 00:52.670
Esistono due tipi di linee guida.

11
00:52.700 --> 00:55.940
Una linea guida può essere orizzontale o
verticale.

12
00:55.940 --> 01:01.940
Le linee guida verticali hanno una
larghezza pari a zero e un'altezza pari al
loro constraintlayout out.

13
01:01.940 --> 01:09.080
Le linee guida orizzontali permanenti
hanno un'altezza pari a zero e la
larghezza del loro genitore di layout di
vincolo.

14
01:09.110 --> 01:13.310
Entriamo in Android Studio e iniziamo a
utilizzare le linee guida.

15
01:13.310 --> 01:21.830
Se voglio allineare questi elementi
componibili sulla stessa linea verticale,
devo creare una linea

16
01:21.830 --> 01:30.140
guida, una linea guida verticale, e
impostarla, ad esempio, al 10% o al 25

17
01:30.140 --> 01:31.430
o a qualsiasi percentuale, e collegare gli
elementi componibili a questa linea guida.

18
01:31.430 --> 01:36.680
Voglio quindi che vi concentriate con me
per imparare a creare delle linee guida.

19
01:36.710 --> 01:44.630
Anche in questo caso, le linee guida
aiutano a creare layout coerenti e
adattivi, posizionando gli

20
01:44.630 --> 01:49.520
elementi rispetto a una percentuale o a
una distanza specifica dall'inizio o dalla
fine del genitore.

21
01:49.520 --> 01:58.190
A questo scopo, creeremo una nuova linea
guida utilizzando la linea guida uno
uguale.

22
01:58.190 --> 02:07.280
Per creare una linea guida dall'inizio,
dobbiamo posizionare gli elementi

23
02:07.280 --> 02:09.980
dal lato sinistro e allinearli
verticalmente dal lato sinistro.

24
02:09.980 --> 02:13.160
Per questo utilizzerò la linea guida per
la creazione.

25
02:13.160 --> 02:15.380
Dall'inizio aggiungere una frazione.

26
02:15.380 --> 02:18.980
È possibile vedere il galleggiante di
frazione o l'offset dp.

27
02:18.980 --> 02:25.340
Possiamo specificare 16 dp oppure posso
specificare una percentuale.

28
02:25.340 --> 02:28.400
Ad esempio 0,25 f.

29
02:28.430 --> 02:32.720
Si trova nel primo quarto dello schermo.

30
02:32.720 --> 02:33.680
Lasciate che vi mostri.

31
02:33.680 --> 02:44.720
Se imposto 0,15 F, devo collegare i
compositi che le caselle e il testo a
questa linea guida.

32
02:44.720 --> 02:53.690
Quindi questa linea guida, utilizzando il
metodo crea linea guida dall'inizio e
specificando 0,15 F,

33
02:53.690 --> 03:00.740
creerà una linea guida posizionata al 15%
dall'inizio o dal bordo sinistro del
Constraintlayout padre.

34
03:00.740 --> 03:09.260
Dobbiamo collegarci alla linea guida
numero uno anche per la casella

35
03:09.290 --> 03:10.880
numero due, dobbiamo specificare l'inizio
della linea guida numero uno.

36
03:10.880 --> 03:12.980
E per il testo.

37
03:12.980 --> 03:16.580
Allo stesso modo dobbiamo specificare la
linea guida numero uno.

38
03:16.580 --> 03:23.030
Quindi tutti i Composable sono collegati
alla linea guida numero uno dal lato
sinistro.

39
03:23.030 --> 03:24.920
Eseguiamo la nostra applicazione e
vediamo.

40
03:24.950 --> 03:25.700
Eccoci qua.

41
03:25.730 --> 03:26.840
Questa è la nostra applicazione.

42
03:26.840 --> 03:28.340
Questa è la prima scatola.

43
03:28.340 --> 03:29.570
Questa è la seconda scatola.

44
03:29.570 --> 03:35.600
E il testo oops l'ho impostato alla fine,
devo usare di nuovo l'avvio.

45
03:35.600 --> 03:36.950
Ed eccoci qui.

46
03:36.950 --> 03:46.520
I tre Composable sono allineati
verticalmente, collegati a una linea

47
03:46.520 --> 03:49.160
guida virtuale posizionata al 15%
dall'inizio del constraintlayout padre.

48
03:49.160 --> 03:51.290
Inoltre, posso impostarlo a 20.

49
03:51.320 --> 03:52.370
Ad esempio.

50
03:52.400 --> 03:56.300
Si può notare che posso impostare ad
esempio 30.

51
03:56.330 --> 04:03.470
Si può notare che questo è il potere
dell'utilizzo delle linee guida in
Constraintlayout.