WEBVTT

1
00:01.430 --> 00:04.100
Bentornati in Jetpack Compose.

2
00:04.100 --> 00:10.640
La barra delle applicazioni superiore è un
componente utilizzato per implementare una
barra

3
00:10.640 --> 00:12.080
delle applicazioni superiore, che è un
elemento standard nelle applicazioni
Material Design.

4
00:12.110 --> 00:17.780
Questo componente aiuta a fornire un
contesto strutturato e di navigazione a
un'applicazione.

5
00:17.780 --> 00:22.010
Per creare una barra delle applicazioni in
alto, utilizzeremo la barra delle
applicazioni in alto.

6
00:22.010 --> 00:23.090
Componibile.

7
00:23.120 --> 00:33.800
Qui lo rimuovo e creo una nuova funzione
componibile

8
00:33.800 --> 00:34.790
per rendere più pulito e comprensibile
ogni passaggio.

9
00:34.790 --> 00:41.360
Inizierò con la creazione di una nuova
funzione compostabile, denominata barra
delle applicazioni superiore.

10
00:41.360 --> 00:48.020
E all'interno di questa funzione
componibile, creerò Top App Bar.

11
00:48.050 --> 00:53.720
Approfondiamo il controllo composito della
barra delle applicazioni superiore e il
clic sinistro del mouse.

12
00:53.720 --> 00:58.250
Oppure si può passare il mouse e ottenere
i dettagli di questa composizione.

13
00:58.250 --> 01:00.920
Abbiamo il titolo un componibile.

14
01:00.920 --> 01:03.470
Per il titolo della barra delle
applicazioni.

15
01:03.470 --> 01:08.800
Possiamo usare il composable text per
visualizzare qualsiasi testo come titolo.

16
01:08.830 --> 01:09.760
Il modificatore.

17
01:09.790 --> 01:11.620
L'icona di navigazione.

18
01:11.650 --> 01:18.250
Un elemento componibile che specifica
l'icona sul lato sinistro della barra
delle azioni dell'applicazione.

19
01:18.280 --> 01:23.830
Un compositore per le icone di azione
aggiuntive sul lato destro della barra
delle applicazioni.

20
01:23.830 --> 01:26.290
Quindi l'icona di navigazione a sinistra.

21
01:26.290 --> 01:33.610
L'icona delle azioni visualizza le icone
sul lato destro della finestra, i colori
degli inserti e il comportamento di
scorrimento.

22
01:33.640 --> 01:37.420
Visualizziamo un titolo per questa barra
delle applicazioni.

23
01:37.600 --> 01:44.050
Creerò un nuovo testo componibile e qui la
barra delle applicazioni in alto.

24
01:44.080 --> 01:50.320
Un altro parametro che possiamo modificare
è il colore di sfondo.

25
01:50.320 --> 01:55.450
Quindi creerò un inizio con colori uguali
a.

26
01:55.480 --> 02:04.030
Se andiamo alla barra delle applicazioni
componibile, vediamo che dobbiamo fornire
i colori della barra delle applicazioni in
alto, quindi inizierò

27
02:04.030 --> 02:10.080
con i valori predefiniti della barra delle
applicazioni in alto e con i colori della
barra delle applicazioni in alto.

28
02:10.080 --> 02:16.770
All'interno di questa funzione
specificherò il colore del contenitore e
il colore del titolo.

29
02:16.770 --> 02:18.510
Da dove ho preso questi.

30
02:18.510 --> 02:24.540
Per ottenere i colori della barra delle
applicazioni superiore, è possibile andare
sul controllo e sulla sinistra.

31
02:24.540 --> 02:31.470
Scorrendo verso il basso è possibile
vedere il colore del contenitore, lo
scorrimento del contenitore, il colore

32
02:31.470 --> 02:35.100
della navigazione, dell'icona, il colore
del contenuto del titolo e il colore del
contenuto dell'icona dell'azione.

33
02:35.100 --> 02:40.680
Vi sto insegnando a pensare, a risolvere i
problemi.

34
02:40.710 --> 02:43.170
Ok, quindi non sono io a scrivere i
codici.

35
02:43.170 --> 02:46.500
Non sto facendo un copia incolla e una
lezione su di loro.

36
02:46.500 --> 02:51.480
No, vi sto mostrando come pensare, come
risolvere i vostri problemi.

37
02:51.480 --> 02:59.850
Quindi, se devo specificare nuovamente i
colori di questa barra superiore,

38
02:59.880 --> 03:00.870
devo pensare di fornire i colori della
barra superiore dell'applicazione.

39
03:00.870 --> 03:05.520
E da dove li ottengo, posso ottenerli
dalle impostazioni predefinite della barra
delle applicazioni in alto.

40
03:05.520 --> 03:12.290
Se vado alle impostazioni predefinite
della barra delle applicazioni superiore,
posso scorrere verso il basso e impostare
i colori della barra delle applicazioni
superiore.

41
03:12.290 --> 03:19.820
All'interno di questo metodo sono presenti
i parametri colore

42
03:19.820 --> 03:20.510
del contenitore, colore del contenitore
scorrevole e altre funzioni.

43
03:20.510 --> 03:23.390
Sono quindi interessato a questo colore di
contenitore.

44
03:23.390 --> 03:30.110
Quindi, all'interno di questo parametro,
devo specificare il parametro

45
03:30.110 --> 03:30.440
colore del contenitore da cui devo
specificare i colori.

46
03:30.440 --> 03:34.400
È possibile ricavarli dal punto di colore,
ad esempio il rosso.

47
03:34.430 --> 03:35.930
È il colore del contenitore.

48
03:35.960 --> 03:41.300
Per specificare il colore del contenitore
del titolo posso impostare il colore punto
blu.

49
03:41.330 --> 03:43.430
Ok, questo è molto semplice.

50
03:43.430 --> 03:52.340
Eseguiamo questa applicazione dopo aver
specificato la barra delle applicazioni
superiore come barra delle applicazioni
superiore, eseguiamo l'applicazione.

51
03:54.440 --> 03:56.120
Ed eccoci qui, ragazzi.

52
03:56.120 --> 03:58.190
È possibile vedere la barra delle
applicazioni in alto.

53
03:58.220 --> 04:00.230
Il colore del contenitore è rosso.

54
04:00.260 --> 04:03.500
Il colore del contenuto del titolo è blu.

55
04:03.770 --> 04:08.810
Rendiamolo verde e vediamo se il colore si
sposa bene con il blu.

56
04:08.810 --> 04:09.860
Ed ecco che si va avanti.

57
04:09.860 --> 04:11.420
Ora va meglio, ok.

58
04:11.450 --> 04:16.940
Un altro parametro è l'icona di
navigazione.

59
04:16.940 --> 04:21.740
Se andiamo nella barra delle applicazioni,
la barra di navigazione superiore.

60
04:21.770 --> 04:23.420
L'icona di navigazione.

61
04:23.420 --> 04:28.070
È una funzione componibile e l'unità è
uguale a lambda.

62
04:28.070 --> 04:35.180
Quindi ho bisogno di specificare un altro
pulsante composito a forma di icona.

63
04:35.210 --> 04:36.980
Qui il pulsante dell'icona.

64
04:36.980 --> 04:41.420
È simile al pulsante, ma con l'icona come
simbolo.

65
04:41.420 --> 04:46.880
Ad esempio, creare un messaggio di
brindisi per l'utente.

66
04:54.500 --> 04:57.230
Si può vedere il toast che dice
all'utente.

67
04:57.230 --> 04:59.210
Si fa clic sull'icona della navigazione.

68
04:59.210 --> 05:08.960
Circondiamo questo pulsante icona e
specifichiamo un'icona al suo interno,
perché ho bisogno di visualizzare
un'icona.

69
05:08.960 --> 05:15.770
Quindi, qui il pittore e all'interno del
pittore dovrei menzionare la risorsa
dell'icona.

70
05:15.770 --> 05:20.500
Possiamo utilizzare icone già pronte
nell'SDK di Android.

71
05:20.500 --> 05:29.350
Andate quindi nella cartella disegnabile
New Vector Asset e nella

72
05:29.350 --> 05:30.400
clip art cercate menu e selezionate
l'icona del menu.

73
05:30.400 --> 05:31.240
Fare clic su OK.

74
05:31.240 --> 05:32.920
Fare clic su Avanti e su Fine.

75
05:32.920 --> 05:37.420
Si può notare che il vettore del menu di
base è stato creato.

76
05:37.450 --> 05:44.350
Passiamo ora all'attività principale e
utilizziamo questa risorsa appena creata.

77
05:44.380 --> 05:55.270
Utilizzerò Painter Resource e otterrò la
nostra linea di base disegnabile menu
contenuto descrizione

78
05:55.270 --> 05:58.570
menu Ok, ora eseguiamo la nostra
applicazione e vediamo la barra superiore
dell'applicazione.

79
05:58.570 --> 06:00.100
Ed eccoci qui.

80
06:00.100 --> 06:01.510
Questa è la nostra applicazione.

81
06:01.510 --> 06:03.940
L'icona del menu è visibile qui.

82
06:03.940 --> 06:05.170
Fare clic su di esso.

83
06:05.170 --> 06:07.240
Si fa clic sull'icona della navigazione.

84
06:07.240 --> 06:09.310
Il messaggio di brindisi appare corretto.

85
06:09.340 --> 06:16.570
Questa è l'icona di navigazione per creare
icone aggiuntive e azioni aggiuntive

86
06:16.570 --> 06:19.090
per la barra delle applicazioni, possiamo
usare le azioni delle azioni.

87
06:19.090 --> 06:23.010
È necessario specificare un'altra icona
per il pulsante.

88
06:24.750 --> 06:29.160
Copio e incollo questo messaggio di
brindisi e lo incollo qui.

89
06:29.160 --> 06:32.580
Fate clic sull'icona dell'azione qui.

90
06:32.580 --> 06:37.680
È necessario sostituirla con un'icona
contestuale dell'applicazione.

91
06:37.680 --> 06:42.600
Allo stesso modo dovrei usare il pittore e
la descrizione del contenuto.

92
06:42.600 --> 06:47.040
Creiamo un'altra icona nel drawable nello
stesso modo.

93
06:47.070 --> 06:51.210
Nuova risorsa vettoriale qui Amo questa
icona.

94
06:51.210 --> 06:53.790
Fare clic su OK per costruire la linea di
base.

95
06:53.790 --> 06:55.920
Quindi, fare clic su Fine.

96
06:55.920 --> 07:02.040
In questo caso è necessario utilizzare la
risorsa Painter o la creazione di punti
disegnabili.

97
07:02.040 --> 07:06.000
E la descrizione del contenuto è
un'impostazione.

98
07:06.030 --> 07:08.070
Eseguiamo la nostra applicazione.

99
07:08.070 --> 07:09.540
Ed eccoci qui.

100
07:09.540 --> 07:12.750
Possiamo vedere l'azione appena creata.

101
07:12.750 --> 07:13.380
Fare clic su di esso.

102
07:13.380 --> 07:15.330
Si fa clic sull'icona dell'azione.

103
07:15.330 --> 07:23.460
In questo video abbiamo imparato a creare
una barra superiore personalizzata per le
nostre applicazioni.