WEBVTT 00:00:00.000 --> 00:00:02.715 >> Ciao a tutti. Io sono Olia. 00:00:02.715 --> 00:00:05.310 Sono Program Manager on.NET Team. 00:00:05.310 --> 00:00:08.355 Super eccitato di essere un parte di questo evento. 00:00:08.355 --> 00:00:10.980 Sarò con voi ragazzi tutto il giorno oggi 00:00:10.980 --> 00:00:14.610 l'introduzione di altoparlanti e esecuzione di domande con James. 00:00:14.610 --> 00:00:18.930 Abbiamo appena sentito un incredibile nota chiave, molto stimolante. 00:00:18.930 --> 00:00:21.585 Ora, sono super entusiasta di presentare 00:00:21.585 --> 00:00:24.720 i nostri prossimi oratori, Javier e Gerald. 00:00:24.720 --> 00:00:29.230 Parleranno su visualizzazione dei dati. 00:00:29.390 --> 00:00:32.340 >> Ciao. Sì, eccoci qui. 00:00:32.340 --> 00:00:33.790 >> Ciao. 00:00:34.070 --> 00:00:37.640 >> Grazie mille. Quindi lasciate che 00:00:37.640 --> 00:00:40.580 me basta andare in direttamente e condividere il mio schermo. 00:00:40.580 --> 00:00:44.330 Qui andiamo, e sempre questa sessione è iniziata. 00:00:44.330 --> 00:00:47.105 Quindi sì, come già accennato, 00:00:47.105 --> 00:00:50.060 stiamo andando a parlare di oggi visualizzando i tuoi dati, 00:00:50.060 --> 00:00:51.965 quindi stiamo andando a parlare informazioni su CollectionView, 00:00:51.965 --> 00:00:54.725 CarouselView, una coppia di altre cose. 00:00:54.725 --> 00:00:57.110 Penso, David e Maddy 00:00:57.110 --> 00:01:00.290 già condiviso alcuni dei bontà che stiamo andando a mostrare. 00:01:00.290 --> 00:01:02.720 Ma faremo del nostro meglio per darvi un po 'di più 00:01:02.720 --> 00:01:05.375 di un'immersione profonda e vi mostrerà cosa 00:01:05.375 --> 00:01:08.000 è in realtà possibile con tutti questi controlli impressionante 00:01:08.000 --> 00:01:11.195 che sono a Xamarin Moduli disponibili oggi. 00:01:11.195 --> 00:01:13.055 Quindi questo siamo noi, 00:01:13.055 --> 00:01:17.080 allora almeno saprai che ascolterai. 00:01:17.080 --> 00:01:22.085 Mi chiamo Gerald Versluis paesi Bassi, 00:01:22.085 --> 00:01:23.840 e il mio buon amico Javier, 00:01:23.840 --> 00:01:28.280 siamo entrambi parte della Xamarin Forms Team, Ingegneri Software. 00:01:28.280 --> 00:01:31.070 Quindi sì, stiamo creando alcune delle cose 00:01:31.070 --> 00:01:34.490 che, si spera, godere di utilizzando. 00:01:34.490 --> 00:01:37.280 Oggi parleremo su queste cose fondamentalmente. 00:01:37.280 --> 00:01:39.245 Abbiamo molto da coprire. 00:01:39.245 --> 00:01:42.620 Quindi stiamo andando ad avere un sacco di diverse demo che combinano 00:01:42.620 --> 00:01:46.495 tutti questi controlli impressionante e Caratteristiche. Quindi cerca di stare al passo. 00:01:46.495 --> 00:01:47.690 Se avete domande, 00:01:47.690 --> 00:01:49.340 per favore contattate qualcuno di noi, 00:01:49.340 --> 00:01:51.470 siamo felici di rispondere a qualsiasi domanda. 00:01:51.470 --> 00:01:53.810 Javier e io cambieremo un paio di volte. 00:01:53.810 --> 00:01:55.430 Quindi, se vedete il vostro schermo 00:01:55.430 --> 00:01:57.470 tremolante o qualsiasi altra cosa altro divertente in corso, 00:01:57.470 --> 00:01:58.940 non ti preoccupare, siamo tutti noi, 00:01:58.940 --> 00:02:01.775 non sei tu. Iniziamo. 00:02:01.775 --> 00:02:04.475 Parlerò un po' a proposito di CollectionView prima, 00:02:04.475 --> 00:02:07.025 e Javier prenderà il sopravvento. 00:02:07.025 --> 00:02:10.250 Sì, come ho detto, faremo passare un paio di volte. 00:02:10.250 --> 00:02:13.055 Così ogni volta che si sente un bellissimo accento spagnolo, 00:02:13.055 --> 00:02:15.180 poi Javier ha preso il sopravvento. 00:02:16.660 --> 00:02:19.265 Iniziamo con CollectionView.Let's start with the CollectionView. 00:02:19.265 --> 00:02:20.960 CollectionView è fondamentalmente 00:02:20.960 --> 00:02:23.285 il successore spirituale del controllo ListView. 00:02:23.285 --> 00:02:29.155 Il ListView che tutti conosciamo o voi conoscere e amare, l'abbiamo usato tutti. 00:02:29.155 --> 00:02:31.970 Ma sì, puoi amare esso, si può odiare. 00:02:31.970 --> 00:02:35.105 Il fatto è che avevamo bisogno di fondamentalmente tutte le nostre applicazioni. 00:02:35.105 --> 00:02:36.830 Dobbiamo mostrare i dati nelle nostre app, 00:02:36.830 --> 00:02:38.960 questo è fondamentalmente il fondamentale di 00:02:38.960 --> 00:02:42.290 ogni applicazione che si sta utilizzando. 00:02:42.290 --> 00:02:45.230 Ma sì, c'è stato alcune cose con 00:02:45.230 --> 00:02:47.990 ListView che potrebbe essere migliorato. 00:02:47.990 --> 00:02:50.615 Ecco perché siamo venuti con l'ultima vista. 00:02:50.615 --> 00:02:52.940 Abbiamo preso tutti gli insegnamenti da 00:02:52.940 --> 00:02:56.390 il ListView e metterlo in questo nuovo controllo, 00:02:56.390 --> 00:03:01.730 ed è possibile utilizzare questo per mostrare tutti i dati in diversi layout. 00:03:01.730 --> 00:03:03.320 Hai più flessibilità, 00:03:03.320 --> 00:03:06.545 e soprattutto è più prestazioni che mai. 00:03:06.545 --> 00:03:11.045 Così si può vedere verso il basso qui un piccolo campione, 00:03:11.045 --> 00:03:13.500 dove è possibile definire il controllo CollectionView. 00:03:13.500 --> 00:03:15.680 Tutto questo funziona naturalmente in XAML e 00:03:15.680 --> 00:03:19.580 codifica proprio come sei utilizzato da Xamarin Forms. 00:03:19.580 --> 00:03:23.150 È possibile specificare l'origine dell'elemento proprio come sul ListView. 00:03:23.150 --> 00:03:26.480 Ma ora, è anche possibile specificare il layout degli elementi. 00:03:26.480 --> 00:03:27.500 Così si può specificare, 00:03:27.500 --> 00:03:29.900 vuoi verticale o orizzontale, 00:03:29.900 --> 00:03:33.710 e si può anche dire che si fa forse vuole averlo in una griglia. 00:03:33.710 --> 00:03:35.990 Quindi sì, c'è già 00:03:35.990 --> 00:03:39.020 una certa flessibilità che si può vedere accadendo proprio qui. 00:03:39.020 --> 00:03:41.180 Queste sono tutte le cose che puoi 00:03:41.180 --> 00:03:44.060 utilizzare oggi fuori dalla scatola con CollectionView. 00:03:44.060 --> 00:03:45.470 Quindi, se abbiamo data binding, 00:03:45.470 --> 00:03:47.480 quindi è possibile utilizzare i modelli di dati, 00:03:47.480 --> 00:03:49.670 selettori di modelli, naturalmente. 00:03:49.670 --> 00:03:51.275 È possibile utilizzare i diversi layout. 00:03:51.275 --> 00:03:55.175 Sulla destra qui, si può vedere il layout della griglia, ad esempio. 00:03:55.175 --> 00:03:57.170 È possibile utilizzare la selezione degli elementi, 00:03:57.170 --> 00:03:59.630 in modo da poter fare clic su un elemento in 00:03:59.630 --> 00:04:03.840 CollectionView e fare la vostra magia su questo. 00:04:03.840 --> 00:04:06.290 È possibile eseguire il drill-down a un vista dettagliata da lì. 00:04:06.290 --> 00:04:07.715 Abbiamo la vista vuota. 00:04:07.715 --> 00:04:09.875 Così ogni volta che si potrebbe mescolare questo con 00:04:09.875 --> 00:04:13.370 una barra di ricerca e non c'è risultati per l'azione di ricerca, 00:04:13.370 --> 00:04:16.400 si può pop-up questo vuoto vista senza sudore. 00:04:16.400 --> 00:04:20.840 Non è necessario sostituire visualizzazioni nella propria struttura ad albero visuale. 00:04:20.840 --> 00:04:23.510 Puoi farlo direttamente dal controllo CollectionView. 00:04:23.510 --> 00:04:25.715 Abbiamo anche migliorato lo scorrimento. 00:04:25.715 --> 00:04:28.430 Così ora avete un evento con un sacco di informazioni. 00:04:28.430 --> 00:04:30.920 È possibile determinare la velocità qualcuno sta scorrendo, 00:04:30.920 --> 00:04:32.390 da che parte scorrono, 00:04:32.390 --> 00:04:34.865 e avremo anche per scorrere fino al metodo. 00:04:34.865 --> 00:04:36.770 Così si può facilmente scorrere a 00:04:36.770 --> 00:04:38.900 un certo punto in CollectionView. 00:04:38.900 --> 00:04:42.530 Questo è solo un paio di cose che abbiamo implementato in 00:04:42.530 --> 00:04:46.730 questo nuovo controllo incredibile che è Xamarin Forms in questo momento. 00:04:46.730 --> 00:04:51.695 Quindi cerchiamo di saltare rapidamente in Visual Studio e mostrare alcune demo. 00:04:51.695 --> 00:04:55.450 Speriamo che ci siamo. 00:04:55.450 --> 00:04:57.530 Così qui abbiamo Visual Studio per Mac. 00:04:57.530 --> 00:04:59.750 Se non l'avete mai visto prima, 00:04:59.750 --> 00:05:03.155 si può semplicemente usare Visual Studio su un Mac in questo momento. 00:05:03.155 --> 00:05:06.140 Prima di tutto andiamo in qualche demo visiva. 00:05:06.140 --> 00:05:09.505 Così ho l'iOS emulatore aperto proprio qui. 00:05:09.505 --> 00:05:12.575 Javier ed io abbiamo creato una piccola applicazione di esempio. 00:05:12.575 --> 00:05:17.330 Ora, badate bene, queste demo sono preso dalla nostra galleria app, 00:05:17.330 --> 00:05:19.430 che fa parte del Repository Xamarin Forms, 00:05:19.430 --> 00:05:21.350 dove eseguiamo tutti i nostri test. 00:05:21.350 --> 00:05:25.160 Quindi potrebbe non necessariamente essere una bella applicazione, 00:05:25.160 --> 00:05:27.350 ma è funzionale, e abbiamo 00:05:27.350 --> 00:05:30.290 alcuni più bella campioni da mostrarvi. 00:05:30.290 --> 00:05:33.620 È possibile stile questo in qualsiasi modo si desiderae alla fine di questa sessione. 00:05:33.620 --> 00:05:37.160 Quindi non essere confuso se non sembra del tutto incredibile, 00:05:37.160 --> 00:05:39.920 ma concentrarsi su ciò che è funzionalmente accadendo qui. 00:05:39.920 --> 00:05:42.320 Quindi abbiamo preso l'ordine del giorno, 00:05:42.320 --> 00:05:43.490 ed ecco tutte le cose diverse, 00:05:43.490 --> 00:05:44.630 abbiamo il CollectionView, 00:05:44.630 --> 00:05:48.185 il CarouselView, IndicatorView e tutte le cose. 00:05:48.185 --> 00:05:51.445 Ma andiamo con il CollectionView in questo momento. 00:05:51.445 --> 00:05:55.845 Come ho detto, si può semplicemente andare con 00:05:55.845 --> 00:05:59.600 una raccolta di stringhe abbiamo proprio qui. 00:05:59.600 --> 00:06:01.310 Questo è tutto. 00:06:01.310 --> 00:06:03.110 Questa è solo una raccolta di stringhe. 00:06:03.110 --> 00:06:05.840 Si collega che fino al sorgente dell'oggetto e boom, 00:06:05.840 --> 00:06:08.505 si dispone di un oggetto CollectionView con le corde. 00:06:08.505 --> 00:06:10.490 Come potete vedere, questo è anche 00:06:10.490 --> 00:06:13.130 con la selezione funzionalità abilitate. 00:06:13.130 --> 00:06:15.560 Così è possibile selezionare gli elementi proprio qui, 00:06:15.560 --> 00:06:17.630 e in base all'evento selezionato o 00:06:17.630 --> 00:06:19.865 il comando che si collega a questo, 00:06:19.865 --> 00:06:23.160 si potrebbe andare al schermata successiva da qui. 00:06:23.360 --> 00:06:26.990 Come potete vedere, c'è un sacco di roba qui, 00:06:26.990 --> 00:06:30.005 quindi probabilmente si vuole dai un'occhiata a te stesso. 00:06:30.005 --> 00:06:32.944 Tutte le funzionalità sono 00:06:32.944 --> 00:06:35.630 elencati e si può avere un gioco con questo. 00:06:35.630 --> 00:06:38.990 Quindi la maggior parte di queste cose sarà hanno anche una diversa varianza in 00:06:38.990 --> 00:06:42.800 codice in forse XAML e orizzontale, verticale. 00:06:42.800 --> 00:06:45.845 Come ho detto, questo è anche utilizzato per eseguire i nostri test su. 00:06:45.845 --> 00:06:47.660 Quindi c'è un sacco di roba qui dentro. 00:06:47.660 --> 00:06:49.220 L'altra cosa che Voglio mostrarvi 00:06:49.220 --> 00:06:51.590 qui che questo combina un paio di cose che 00:06:51.590 --> 00:06:55.265 Ho parlato prima è il selettore del modello di dati. 00:06:55.265 --> 00:06:59.765 Quindi questo modello seleziona ogni volta che è un giorno feriale. 00:06:59.765 --> 00:07:02.780 Utilizza un modello per un vantaggio per qualche motivo. 00:07:02.780 --> 00:07:07.400 Ogni volta che è un fine settimana, vedere questa altra icona qui. 00:07:07.400 --> 00:07:10.490 Quindi questo si ripete per un paio di volte. 00:07:10.490 --> 00:07:12.140 Ma si può facilmente filtrare questo. 00:07:12.140 --> 00:07:14.660 Quindi, se vado solo per Lunedi, 00:07:14.660 --> 00:07:16.580 la scoperta non è davvero ottimizzata, 00:07:16.580 --> 00:07:17.970 quindi questo richiede un po' , 00:07:17.970 --> 00:07:19.670 e dovrei premere "Invio", 00:07:19.670 --> 00:07:21.320 vedrete tutti i lunedì. 00:07:21.320 --> 00:07:24.200 Se cerchiamo qualcosa che non è qui, 00:07:24.200 --> 00:07:26.870 quindi un giorno di lunedì, si può vedere questo è 00:07:26.870 --> 00:07:29.720 la vista vuota perché non lo facciamo hanno i risultati della ricerca qui. 00:07:29.720 --> 00:07:31.715 Così si aprirà la vista vuota, 00:07:31.715 --> 00:07:35.180 e questo è proprio quello che si otterrà fuori dalla scatola 00:07:35.180 --> 00:07:40.210 ogni volta che la tua collezione non avere oggetti lì dentro. 00:07:40.210 --> 00:07:43.170 Allora, cosa abbiamo di più? Naturalmente tutto questo 00:07:43.170 --> 00:07:45.844 funziona con collezioni osservabili. 00:07:45.844 --> 00:07:48.800 Così si può solo prendere questo e si può vedere 00:07:48.800 --> 00:07:52.490 qui abbiamo un paio di controlli qui in alto. 00:07:52.490 --> 00:07:54.380 Abbiamo anche intestazioni e piè di pagina. 00:07:54.380 --> 00:07:57.410 Penso che Javier mostrerà un po 'su questo. 00:07:57.410 --> 00:07:59.630 Ma qui abbiamo oggetti, 00:07:59.630 --> 00:08:02.210 e perché si tratta di un raccolta osservabile, 00:08:02.210 --> 00:08:05.300 è possibile osservare eventuali modifiche che accadrà in questa collezione. 00:08:05.300 --> 00:08:07.580 Quindi possiamo rimuovere un paio di qui, 00:08:07.580 --> 00:08:10.700 e si vede che aggiornamenti automatici. 00:08:10.700 --> 00:08:13.970 Ogni volta che vogliamo inserire un paio di cose, 00:08:13.970 --> 00:08:16.550 sarà qui inserito in alto. 00:08:16.550 --> 00:08:19.070 Posso anche specificare un indice diverso da 00:08:19.070 --> 00:08:22.160 inserirlo in un posizione, se voglio. 00:08:22.160 --> 00:08:26.705 Quindi sì, e posso anche spostare un paio di queste cose in giro. 00:08:26.705 --> 00:08:32.085 Così si vede che questo funziona all'istante. 00:08:32.085 --> 00:08:33.780 Molto performante, sembra buono, 00:08:33.780 --> 00:08:37.870 ha questa animazione dissolvenza. Sembra incredibile. 00:08:38.820 --> 00:08:41.650 Allora, cosa abbiamo di più? Abbiamo punti di snap. 00:08:41.650 --> 00:08:43.510 Questo è anche qualcosa che abbiamo introdotto. 00:08:43.510 --> 00:08:45.310 Quindi, se non l'avete mai visto prima, 00:08:45.310 --> 00:08:47.930 prendiamo una lista verticale questa volta. 00:08:48.030 --> 00:08:51.310 Punti di snap significano fondamentalmente che ogni volta che si scorre, 00:08:51.310 --> 00:08:52.690 Voglio dire, ora non fa niente. 00:08:52.690 --> 00:08:53.800 Ma ogni volta che selezioniamo 00:08:53.800 --> 00:08:57.670 un punto di snap qui e l'abbiamo impostato come obbligatorio, 00:08:57.670 --> 00:09:00.520 poi si vede ogni volta che scorro qui e l'ho impostato su qualcosa, 00:09:00.520 --> 00:09:04.150 si scatta per ottenere un un certo elemento ed è possibile 00:09:04.150 --> 00:09:08.275 influenzare tale comportamento impostando qui l'inizio o il centro. 00:09:08.275 --> 00:09:10.240 Quindi ogni volta che lo preno al centro, 00:09:10.240 --> 00:09:11.755 centrare un elemento. 00:09:11.755 --> 00:09:14.740 Così in questo momento, vedete due elementi qui, 00:09:14.740 --> 00:09:16.015 ma ora comincio a scorrere, 00:09:16.015 --> 00:09:19.600 e ogni volta che non ho un oggetto al centro qui, 00:09:19.600 --> 00:09:24.430 farà in modo che scatta ad un elemento centrale proprio qui. 00:09:24.430 --> 00:09:26.530 Quindi questo sembrerà bello nei vostri disegni, 00:09:26.530 --> 00:09:28.390 e si può fare lavorare comunque si desidera. 00:09:28.390 --> 00:09:30.940 È possibile configurare un paio di 00:09:30.940 --> 00:09:33.730 di cose qui per renderlo lavorare con il vostro disegno. 00:09:33.730 --> 00:09:35.500 Allora, cosa abbiamo di più? 00:09:35.500 --> 00:09:37.915 Dobbiamo anche scorrere troppo, ho già parlato. 00:09:37.915 --> 00:09:40.480 Anche in questo caso, più opzioni qui tra cui scegliere. 00:09:40.480 --> 00:09:43.060 Scegliamone solo uno e possiamo dire, "Ok, 00:09:43.060 --> 00:09:46.570 scorrere fino all'indice, quindi abbiamo un numero di articoli qui di nuovo," 00:09:46.570 --> 00:09:51.175 come ho detto, non necessariamente molto bella, ma funziona. 00:09:51.175 --> 00:09:54.235 Quindi, se dico scorrere a indice e dico 10, 00:09:54.235 --> 00:09:56.065 che non è in vista proprio qui, 00:09:56.065 --> 00:09:57.385 e lo faccio, 00:09:57.385 --> 00:09:59.845 allora farà in modo che scorre fino a 10. 00:09:59.845 --> 00:10:02.470 Perché ho impostato la pergamena su posizione per rendere visibile, 00:10:02.470 --> 00:10:03.670 sarà solo renderlo visibile. 00:10:03.670 --> 00:10:05.065 Così sarà alla fine ora. 00:10:05.065 --> 00:10:07.900 Ma posso anche configurare questo per essere al centro iniziale o alla fine. 00:10:07.900 --> 00:10:11.275 Quindi, se ho impostato questo per essere al per iniziare e premo di nuovo "Vai", 00:10:11.275 --> 00:10:14.900 farà in modo che questo viene presentato all'inizio. 00:10:17.130 --> 00:10:19.450 Cos'ho di più? 00:10:19.450 --> 00:10:22.090 [non udibile] , stiamo andando per vedere che più tardi. 00:10:22.090 --> 00:10:23.620 Vista vuota, abbiamo già visto che 00:10:23.620 --> 00:10:25.510 un po'e anche la selezione. 00:10:25.510 --> 00:10:28.015 Ma cerchiamo di solo rapidamente immergersi in questo. 00:10:28.015 --> 00:10:29.980 Abbiamo più modalità di selezione. 00:10:29.980 --> 00:10:33.550 Così si può avere singolo o selezioni multiple qui o nessuna, 00:10:33.550 --> 00:10:35.320 che è anche una possibilità. 00:10:35.320 --> 00:10:37.600 Così in questo momento, posso selezionare qualsiasi cosa. 00:10:37.600 --> 00:10:39.580 Ma quando l'ho impostato su single, 00:10:39.580 --> 00:10:41.320 quindi è possibile selezionare uno delle opzioni qui. 00:10:41.320 --> 00:10:43.990 Si può vedere che anche funziona nel layout della griglia, 00:10:43.990 --> 00:10:49.240 e si può vedere qui tutti i informazioni provenienti dall'evento. 00:10:49.240 --> 00:10:51.520 Possiamo anche fare più. 00:10:51.520 --> 00:10:56.860 Quindi in questo momento, vedete che io avere una selezione di multipli. 00:10:56.860 --> 00:10:59.230 Vorrei andare nel codice proprio qui, 00:10:59.230 --> 00:11:02.380 ma vedo che sto prendendo un po 'di tempo, 00:11:02.380 --> 00:11:06.400 quindi penso che mi limiterò a consegnarlo a Javier in questo momento e Javier 00:11:06.400 --> 00:11:10.360 può quindi mostrare un po' di codice e tuffati in questo. 00:11:10.360 --> 00:11:12.475 Allora Javier, portalo via. 00:11:12.475 --> 00:11:16.630 >> Cercherò. Quindi cerchiamo di continuare con più personale 00:11:16.630 --> 00:11:19.330 sulla visualizzazione di raccolta perché in 00:11:19.330 --> 00:11:22.405 fatto abbiamo un pazzo quantità di campioni. 00:11:22.405 --> 00:11:28.900 Quindi non so esattamente dove si lascia il campione. 00:11:28.900 --> 00:11:31.390 Permettetemi di eseguire, in questo caso, 00:11:31.390 --> 00:11:35.720 utilizzando androide, tutto ciò che che si utilizza con iOS. Quindi vediamo. 00:11:39.360 --> 00:11:42.760 >> Mi limiterò a parlare mentre si ottiene questo in esecuzione. 00:11:42.760 --> 00:11:44.980 Sapevo che stavi andando per mostrare Android. 00:11:44.980 --> 00:11:46.825 Voglio dire, sono tutte forme Xamarin. 00:11:46.825 --> 00:11:49.165 Quindi, qualunque cosa abbiamo implementato, 00:11:49.165 --> 00:11:52.600 si può fare questo su Android ogni volta che l'emulatore funziona e si 00:11:52.600 --> 00:11:56.365 può farlo su iOS e sarà entrambi mostrano risultati simili. 00:11:56.365 --> 00:12:02.350 Quindi sì, è per questo che ho ha scelto di farlo su iOS. 00:12:02.350 --> 00:12:07.000 >> Quindi sento che ho un problema con il simulatore. 00:12:07.000 --> 00:12:10.150 Non so perché è non funziona. Nulla? 00:12:10.150 --> 00:12:12.895 >> Va bene. Vuoi me di continuare? 00:12:12.895 --> 00:12:16.120 >> Sì. Si prega di continuare con la demo. 00:12:16.120 --> 00:12:17.230 >> Va bene. 00:12:17.230 --> 00:12:20.245 >> Ho fatto un errore e mi preparo 00:12:20.245 --> 00:12:21.925 tutte le demo, 00:12:21.925 --> 00:12:23.815 come un'ora fa, 00:12:23.815 --> 00:12:28.555 Sento che forse non era l'idea migliore. 00:12:28.555 --> 00:12:33.955 >> Nessun modo. Mi limiterò a riempire il tempo. 00:12:33.955 --> 00:12:35.305 Fammi sapere ogni volta che sei pronto. 00:12:35.305 --> 00:12:38.845 Quindi vediamo. 00:12:38.845 --> 00:12:40.420 Ci siamo. Ci scusiamo per il 00:12:40.420 --> 00:12:42.370 schermi lampeggianti e tutto, eccoci qua. 00:12:42.370 --> 00:12:44.530 Vediamo tutto quello che abbiamo di più qui. 00:12:44.530 --> 00:12:49.555 Quindi cosa puoi fare di più con visualizzazione di raccolta, abbiamo la selezione. 00:12:49.555 --> 00:12:51.220 È anche possibile eseguire il raggruppamento. 00:12:51.220 --> 00:12:54.250 Quindi questo è anche qualcosa che si potrebbe sapere dalla visualizzazione elenco. 00:12:54.250 --> 00:12:56.815 Quindi qui abbiamo qualche raggruppamento 00:12:56.815 --> 00:13:00.550 e vedo che abbiamo un po 'di supereroi qui dentro. 00:13:00.550 --> 00:13:04.270 Questo ha un'intestazione e un piè di pagina per gruppo. 00:13:04.270 --> 00:13:08.215 Così qui abbiamo i Vendicatori con tutti i membri ci 00:13:08.215 --> 00:13:10.480 e i Fantastici Quattro e i difensori 00:13:10.480 --> 00:13:13.135 e tutti i tipi di altri supereroi. 00:13:13.135 --> 00:13:16.200 Sono per lo più raggruppati in un gruppo, 00:13:16.200 --> 00:13:19.350 come ci si aspetterebbe, che è anche qualcosa che si potrebbe fare. 00:13:19.350 --> 00:13:20.835 Penso che stiamo lavorando 00:13:20.835 --> 00:13:24.120 su effettivamente scattare queste intestazioni di gruppo qui, 00:13:24.120 --> 00:13:27.330 in modo che qualcosa che sta ancora arrivando. 00:13:27.330 --> 00:13:28.860 Ma almeno hai 00:13:28.860 --> 00:13:31.350 la possibilità di fare questi gruppi in questo momento. 00:13:31.350 --> 00:13:34.005 È anche possibile eseguire questa operazione senza modelli, 00:13:34.005 --> 00:13:37.990 quindi non sembra così buono. 00:13:37.990 --> 00:13:40.150 Javier, ce l'hai su e in esecuzione di nuovo perché 00:13:40.150 --> 00:13:42.310 Sto solo nuotando qui. 00:13:42.310 --> 00:13:45.080 Mi limiterò ad andare a Spaziatura degli elementi. 00:13:45.420 --> 00:13:48.250 Che è anche qualcosa che si può fare. 00:13:48.250 --> 00:13:51.820 Quindi usiamolo con un griglia, questo è sempre buono. 00:13:51.820 --> 00:13:54.460 Qui è possibile specificare 00:13:54.460 --> 00:13:57.610 quanto spazio ci dovrebbe essere tra i diversi elementi. 00:13:57.610 --> 00:14:02.470 Quindi, se comincio a giocare qui e dico 10 e aggiornare la spaziatura, 00:14:02.470 --> 00:14:04.750 si può vedere che tra le colonne, 00:14:04.750 --> 00:14:07.230 ci sarà 10 spaziatura. 00:14:07.230 --> 00:14:13.260 Posso anche farlo tra il righe perché si tratta di una visualizzazione griglia. 00:14:13.260 --> 00:14:16.775 Quindi ogni volta che lo faccio, 00:14:16.775 --> 00:14:19.510 allora si dovrebbe anche vedere la spaziatura qui. 00:14:19.510 --> 00:14:21.310 Ecco, questo è qualcosa che vi darà anche 00:14:21.310 --> 00:14:23.230 più controllo su come le cose 00:14:23.230 --> 00:14:29.030 guardare e per farlo funzionare con il tuo design migliore. 00:14:30.000 --> 00:14:33.520 Va bene. Ce l'hai fatta? 00:14:33.520 --> 00:14:34.600 >> Posso continuare se vuoi. 00:14:34.600 --> 00:14:36.680 >> Ok. Sì. 00:14:42.270 --> 00:14:46.810 >> Fammi scambiare lo schermo. 00:14:46.810 --> 00:14:48.850 Hai parlato, credo, 00:14:48.850 --> 00:14:52.585 spaziatura e poi possiamo continuare parlando di tutte le cose, 00:14:52.585 --> 00:14:54.430 come la dimensione dell'elemento. 00:14:54.430 --> 00:14:57.370 Ci sono diversi opzioni qui, ma io 00:14:57.370 --> 00:15:00.310 vogliono parlare del all'interno di questa strategia, 00:15:00.310 --> 00:15:04.120 sottoproprietà, dove si possono utilizzare valori diversi. 00:15:04.120 --> 00:15:07.630 Ci sono un valore che questo è il primo elemento. 00:15:07.630 --> 00:15:11.290 Ciò significa che calcoleremo la dimensione del primo elemento, 00:15:11.290 --> 00:15:15.310 e useremo lo stesso dimensioni per tutte le celle. 00:15:15.310 --> 00:15:18.025 Ma, naturalmente, ci sono 00:15:18.025 --> 00:15:22.015 opzioni per calcolare la dimensione di tutte le diverse dimensioni, 00:15:22.015 --> 00:15:25.165 come si può vedere in questo campione specifico, 00:15:25.165 --> 00:15:28.840 tutte le vendite di diverse dimensioni. 00:15:28.840 --> 00:15:30.400 Allora, qual è la differenza? 00:15:30.400 --> 00:15:33.820 La differenza in questo caso riguarda le prestazioni. 00:15:33.820 --> 00:15:36.985 Se tutte le cellule hanno un una certa dimensione della distanza, 00:15:36.985 --> 00:15:41.080 basta calcolare, una volta è qualcosa di interessante. 00:15:41.080 --> 00:15:43.930 Poi, naturalmente, abbiamo hanno parlato prima. 00:15:43.930 --> 00:15:45.760 Abbiamo l'opzione per impostare 00:15:45.760 --> 00:15:48.265 l'intestazione e il piè di pagina della visualizzazione della raccolta. 00:15:48.265 --> 00:15:53.740 Possiamo usare flussi semplici ma possiamo anche usare 00:15:53.740 --> 00:15:57.640 modelli e possiamo 00:15:57.640 --> 00:16:01.495 direttamente incatenare la visibilità dell'intestazione e, 00:16:01.495 --> 00:16:04.190 naturalmente, dal piè di pagina. 00:16:05.790 --> 00:16:10.675 L'ultimo, e penso che questa è solo demo, 00:16:10.675 --> 00:16:12.850 bene, [incomprensibile] aspetto molto, molto bello, 00:16:12.850 --> 00:16:13.975 ma questo è incredibile. 00:16:13.975 --> 00:16:17.545 Dai un'occhiata a questo prestazioni straordinarie. 00:16:17.545 --> 00:16:19.990 Voglio fermarmi un po' in 00:16:19.990 --> 00:16:22.900 il campione perché ciò che stiamo vedendo qui è 00:16:22.900 --> 00:16:26.560 un controllo CollectionView annidato e che 00:16:26.560 --> 00:16:29.860 significa che ogni cosa che 00:16:29.860 --> 00:16:33.220 stavamo vedendo prima era user CollectionView, 00:16:33.220 --> 00:16:36.955 dove ogni elemento è un altro CollectionView. 00:16:36.955 --> 00:16:39.550 Quindi stiamo nidificando tutti questi CollectionViews da creare 00:16:39.550 --> 00:16:44.260 questo layout in cui probabilmente avete visto. 00:16:44.260 --> 00:16:47.500 Ad esempio, i valori multimediali applicazione, applicazione di streaming, 00:16:47.500 --> 00:16:49.720 ed è molto semplice da creare, 00:16:49.720 --> 00:16:53.425 e, sì, funziona molto bene. 00:16:53.425 --> 00:16:58.060 Penso che possiamo continuare concentrarsi su CollectionView, 00:16:58.060 --> 00:17:01.570 ma saltiamo ad un altro controllo. 00:17:01.570 --> 00:17:06.775 In questo caso, CarouselView è un altro controllo molto bello. 00:17:06.775 --> 00:17:10.720 Uno dei punti molto belli che è 00:17:10.720 --> 00:17:14.515 condivisione di un sacco di codice con CollectionView, 00:17:14.515 --> 00:17:17.530 e per impostazione predefinita, otteniamo un sacco di funzionalità 00:17:17.530 --> 00:17:20.755 dal controllo CollectionView che lavora nel CarouselView. 00:17:20.755 --> 00:17:24.730 Ma cerchiamo di avere un po 'di tempo 00:17:24.730 --> 00:17:29.965 con Gerald parlando del CarouselView con ulteriori dettagli. 00:17:29.965 --> 00:17:32.545 >> Beh, hai detto tutto già. 00:17:32.545 --> 00:17:36.430 Vediamo. Saltiamo nel CarouselView. 00:17:36.430 --> 00:17:37.960 Quindi, come ha già detto Javier, 00:17:37.960 --> 00:17:41.050 è costruito in cima fondamentalmente del controllo CollectionView. 00:17:41.050 --> 00:17:45.280 Così il CarouselView è 00:17:45.280 --> 00:17:47.334 fondamentalmente la cosa che probabilmente 00:17:47.334 --> 00:17:50.530 sapere dal web e altre applicazioni popolari. 00:17:50.530 --> 00:17:53.815 Così la maggior parte del tempo hanno appena mostrano un elenco orizzontale che 00:17:53.815 --> 00:17:57.295 diapositive piastrelle o roba. 00:17:57.295 --> 00:17:59.050 Quindi pensa Netflix, voglio dire, 00:17:59.050 --> 00:18:03.265 stiamo tutti lavorando da casa ora quindi ormai sappiamo tutti Netflix. 00:18:03.265 --> 00:18:05.725 Hai queste righe in cui hai 00:18:05.725 --> 00:18:07.510 tutto questo CarouselViews dove si può solo 00:18:07.510 --> 00:18:10.060 scorrere tutti i serie e film, 00:18:10.060 --> 00:18:14.260 e ogni tessera è una serie o un film. 00:18:14.260 --> 00:18:19.150 Quindi questo è fondamentalmente tutto CarouselViews proprio lì. 00:18:19.150 --> 00:18:21.220 Questo è ciò che abbiamo implementato anche qui. 00:18:21.220 --> 00:18:24.040 Si può vedere un po' campione qui in basso. 00:18:24.040 --> 00:18:27.625 Quindi è fondamentalmente solo una visione specializzata 00:18:27.625 --> 00:18:32.680 l'oggetto CollectionView che ha un caso d'uso molto specifico. 00:18:32.680 --> 00:18:34.780 Così si può usare che per mostrare 00:18:34.780 --> 00:18:37.555 i dati in un modo molto attraente. 00:18:37.555 --> 00:18:41.410 E 'molto popolare in applicazioni moderne di oggi. 00:18:41.410 --> 00:18:44.965 E 'più adatto per dati di lunghezza limitata. 00:18:44.965 --> 00:18:47.230 Ciò non significa che le prestazioni 00:18:47.230 --> 00:18:49.810 qualcosa che non lavorare per questo controllo, 00:18:49.810 --> 00:18:53.515 ma è solo più adatto per ancora un numero limitato 00:18:53.515 --> 00:18:55.360 di elementi nella tua collezione 00:18:55.360 --> 00:18:57.880 che si desidera che gli utenti per scorrere. 00:18:57.880 --> 00:19:01.810 È possibile utilizzare un sacco di cose che sono anche in CollectionView. 00:19:01.810 --> 00:19:03.520 Così si può anche usare l'orientamento, 00:19:03.520 --> 00:19:05.620 è anche possibile utilizzare layout, se lo si desidera. 00:19:05.620 --> 00:19:08.575 I modelli di dati saranno anche per questo controllo. 00:19:08.575 --> 00:19:10.600 Funziona perfettamente insieme con 00:19:10.600 --> 00:19:13.795 IndicatorView che ci sarà vedere un po 'più tardi. 00:19:13.795 --> 00:19:16.450 Questo controllo è in anteprima in questo momento. 00:19:16.450 --> 00:19:18.445 Quindi, se si desidera utilizzare questo oggi, 00:19:18.445 --> 00:19:22.990 è possibile, ma è necessario abilitare con la bandiera sperimentale. 00:19:22.990 --> 00:19:26.110 Così vedrete questo in un paio di 00:19:26.110 --> 00:19:30.040 scorre più per altri controlli che sono in anteprima pure. 00:19:30.040 --> 00:19:33.520 Poi basta ricordare che ci stiamo ancora lavorando. 00:19:33.520 --> 00:19:34.840 Alcune cose possono cambiare, 00:19:34.840 --> 00:19:37.960 ma sì, la maggior parte dei roba dovrebbe solo funzionare. 00:19:37.960 --> 00:19:41.635 Quindi andiamo rapidamente e facciamo un piccola demo di questo pure. 00:19:41.635 --> 00:19:44.390 Questo dovrebbe funzionare. 00:19:45.480 --> 00:19:49.375 Ancora una volta, mi limiterò a pop in a questa applicazione demo qui. 00:19:49.375 --> 00:19:51.610 Qui abbiamo il CarouselView. 00:19:51.610 --> 00:19:52.750 Quindi questo grande bottone, 00:19:52.750 --> 00:19:55.045 non dimenticate di premere che perché 00:19:55.045 --> 00:19:58.255 che consente l'effettiva bandiera sperimentale. 00:19:58.255 --> 00:19:59.770 Qui abbiamo un paio di opzioni. 00:19:59.770 --> 00:20:01.225 Quindi possiamo farlo nel codice, 00:20:01.225 --> 00:20:03.340 orizzontale o verticale, e abbiamo 00:20:03.340 --> 00:20:05.860 qualche scatto e anche un vuoto vedere quel genere di cose. 00:20:05.860 --> 00:20:09.280 Quindi vediamo se riusciamo a ottenere questo. 00:20:09.280 --> 00:20:12.070 Qui potete vedere così abbiamo cinque elementi. 00:20:12.070 --> 00:20:15.070 Posso facilmente aggiornare questo a 50 e avrei dovuto 00:20:15.070 --> 00:20:18.265 un sacco di altri oggetti carosello qui. 00:20:18.265 --> 00:20:20.740 Quindi abbiamo una piccola barra di scorrimento qui. 00:20:20.740 --> 00:20:22.960 Così si può vedere che abbiamo un sacco di oggetti e si 00:20:22.960 --> 00:20:25.180 può vedere un sacco di cose in corso qui quando sto scorrendo. 00:20:25.180 --> 00:20:27.835 Quindi questo genera l'evento di scorrimento 00:20:27.835 --> 00:20:30.025 in modo da poter vedere quale elemento è visibile, 00:20:30.025 --> 00:20:31.270 il primo, l'ultimo, 00:20:31.270 --> 00:20:33.040 anche il Delta e l'offset. 00:20:33.040 --> 00:20:35.200 Ecco, questo è quello di cui ho parlato prima. 00:20:35.200 --> 00:20:38.365 Un sacco di dati in arrivo da quell'evento di scorrimento. 00:20:38.365 --> 00:20:41.110 Inoltre, qui la spaziatura è solo qualcosa che 00:20:41.110 --> 00:20:43.615 può utilizzare in modo da ottenere un un po' più di spazio, 00:20:43.615 --> 00:20:45.310 10 non è molto, 00:20:45.310 --> 00:20:46.690 100 è un po' troppo, 00:20:46.690 --> 00:20:51.235 ma si ottiene l'idea in modo si può giocare con questo. 00:20:51.235 --> 00:20:57.085 Inoltre, avete qualcosa che abbiamo chiamare PeekAreaInsets, credo. 00:20:57.085 --> 00:21:00.640 Così si può vedere questo piccolo elementi qui a sinistra e 00:21:00.640 --> 00:21:02.215 a destra e si può 00:21:02.215 --> 00:21:04.660 determinare quanto di l'elemento che vedrai. 00:21:04.660 --> 00:21:08.575 Così sembra un po 'divertente ogni volta che si cambia questo durante l'esecuzione, 00:21:08.575 --> 00:21:11.440 ma si può vedere che si può prendere in giro un po' 00:21:11.440 --> 00:21:14.740 dell'elemento che è in precedenza o successivo. 00:21:14.740 --> 00:21:16.540 Si può anche vedere che sta trascinando. 00:21:16.540 --> 00:21:20.680 Quindi questo è per lo più per vedere se il l'utente sta trascinando sì o no, 00:21:20.680 --> 00:21:23.890 e abbiamo alcune altre proprietà Come possiamo animare questo? 00:21:23.890 --> 00:21:25.210 Possiamo strisciare questo? 00:21:25.210 --> 00:21:27.549 Il rimbalzo. Quindi, in pratica, 00:21:27.549 --> 00:21:29.890 ogni volta che si raggiunge l'inizio o alla fine dell'elenco, 00:21:29.890 --> 00:21:33.950 fa rimbalzare in questo modo o si ferma? 00:21:34.710 --> 00:21:37.075 Naturalmente, anche qui, 00:21:37.075 --> 00:21:39.445 il go-to cosa in modo da poter andare a 00:21:39.445 --> 00:21:44.240 un certo elemento in questo CarouselView. 00:21:46.080 --> 00:21:49.270 Così anche qui, vedo che ho una scheda 00:21:49.270 --> 00:21:51.850 aperto per lo snap. Sì, scusa? 00:21:51.850 --> 00:21:54.490 >> Sotto le pergamene, se si 00:21:54.490 --> 00:21:57.715 tornare molto rapidamente a l'elenco dei campioni, 00:21:57.715 --> 00:22:00.475 si centra il carosello verticaleView, 00:22:00.475 --> 00:22:05.590 per notare che è più comune per avere CarouselView orizzontale. 00:22:05.590 --> 00:22:09.715 Ma, naturalmente, è possibile creare verticali senza problemi. 00:22:09.715 --> 00:22:13.750 >> Sì, nessun problema. Anche se, qui abbiamo 00:22:13.750 --> 00:22:15.700 hanno il meccanismo di aggancio in modo 00:22:15.700 --> 00:22:18.355 questo non ha qualsiasi scatto a tutti. 00:22:18.355 --> 00:22:20.260 Spiacenti, ha lo snap. 00:22:20.260 --> 00:22:23.020 Quindi dovrei solo rallentare questo verso il basso e lo vedrete. 00:22:23.020 --> 00:22:26.020 Così ogni volta che non atterrò su un elemento specifico, 00:22:26.020 --> 00:22:30.070 farà in modo che sarà andare alla partenza proprio qui. 00:22:30.070 --> 00:22:33.550 Ma penso di avere un po' codice aperto per questo qui. 00:22:33.550 --> 00:22:35.530 Quindi, per tutte queste cose 00:22:35.530 --> 00:22:37.660 abbiamo reso il più facile come possibile l'utilizzo. 00:22:37.660 --> 00:22:39.280 Quindi qui, si può solo dire, 00:22:39.280 --> 00:22:41.095 creare un nuovo CarouselView. 00:22:41.095 --> 00:22:43.270 È possibile specificare il layout da utilizzare. 00:22:43.270 --> 00:22:45.520 Abbiamo un po 'predefinito per voi. 00:22:45.520 --> 00:22:49.690 Potrebbe essere possibile creare i propri layout in questo momento. 00:22:49.690 --> 00:22:54.020 Javier, lo sai? O forse lo permetterà in futuro. 00:22:54.210 --> 00:22:56.890 È possibile utilizzare itemTemplates, 00:22:56.890 --> 00:22:59.230 il colore di sfondo o peekAreaInsets, 00:22:59.230 --> 00:23:02.510 L'ho già detto. 00:23:02.790 --> 00:23:07.000 Questo è fondamentalmente tutto ciò che serve per fare per impostare un nuovo CarouselView 00:23:07.000 --> 00:23:11.390 e utilizzare tutto questo discreto caratteristiche proprio qui. 00:23:14.340 --> 00:23:16.465 Così IndicatorView, sì, 00:23:16.465 --> 00:23:18.580 questo è qualcosa che è strettamente accoppiato con 00:23:18.580 --> 00:23:21.055 il CarouselView come Ne ho già parlato. 00:23:21.055 --> 00:23:24.775 Quindi, se avete il CarouselView, 00:23:24.775 --> 00:23:26.710 si potrebbe anche sapere che un sacco di 00:23:26.710 --> 00:23:29.410 questi controlli hanno questo puntini poco a 00:23:29.410 --> 00:23:31.840 il fondo che mostra 00:23:31.840 --> 00:23:35.680 quanti elementi ci sono nell'attuale CarouselView, 00:23:35.680 --> 00:23:39.010 ma anche, quale indice attualmente selezionato. 00:23:39.010 --> 00:23:41.860 Quindi questo è quello che vogliamo fare con il IndicatorView. 00:23:41.860 --> 00:23:44.200 Anche in questo caso, anche in anteprima, 00:23:44.200 --> 00:23:48.625 qui si vede un po' di codice di come usarlo. 00:23:48.625 --> 00:23:52.435 Abbiamo le opzioni per, naturalmente, fare un po 'di layout con quello, 00:23:52.435 --> 00:23:54.339 come si desidera centrarlo orizzontalmente, 00:23:54.339 --> 00:23:58.510 verticalmente, ma anche di che colore vuoi indicarlo come fatto. 00:23:58.510 --> 00:24:00.760 Quale colore dovrebbe indicatore selezionato 00:24:00.760 --> 00:24:04.030 essere e che forma si desidera utilizzare. 00:24:04.030 --> 00:24:08.155 Quindi potete vedere qui un piccolo campione, 00:24:08.155 --> 00:24:11.080 su questa diapositiva qui, il colore, 00:24:11.080 --> 00:24:12.310 L'ho già detto, 00:24:12.310 --> 00:24:14.290 la forma, ma si può anche utilizzare un modello. 00:24:14.290 --> 00:24:19.180 Così si può anche dare il proprio modello per l'indicatore, 00:24:19.180 --> 00:24:20.920 e, naturalmente, si può dare una dimensione, 00:24:20.920 --> 00:24:23.305 in modo da poterlo rendere più grande o più piccolo. 00:24:23.305 --> 00:24:26.860 Quindi saltiamo rapidamente anche in questo. 00:24:26.860 --> 00:24:29.270 Abbiamo un sacco di demo. 00:24:30.530 --> 00:24:35.325 Così il mio puntatore del mouse a volte scompare quando cambio. 00:24:35.325 --> 00:24:39.540 Ci siamo. Così qui abbiamo hanno il IndicatorView. 00:24:39.540 --> 00:24:41.550 Ancora una volta, non dimenticate di abilitarlo. 00:24:41.550 --> 00:24:43.290 Questo è molto galleria semplice. 00:24:43.290 --> 00:24:46.020 Ne abbiamo solo uno. Su iOS, 00:24:46.020 --> 00:24:48.270 ci dimentichiamo di usare il salvare le cose zona qui. 00:24:48.270 --> 00:24:50.400 Quindi è un po' in basso qui, 00:24:50.400 --> 00:24:52.740 ma si può vedere, ogni volta che Vado al prossimo, 00:24:52.740 --> 00:24:56.255 si può vedere quello selezionato si apre verso quello successivo, 00:24:56.255 --> 00:24:59.440 e tutto questo funziona bene con il CarouselView. 00:24:59.440 --> 00:25:04.000 Possiamo impostare questo su blu se vuoi, 00:25:04.000 --> 00:25:06.505 e si può vedere che è ancora nero. 00:25:06.505 --> 00:25:08.500 Si può giocare con il dimensioni qui un po' , 00:25:08.500 --> 00:25:11.050 in modo da poterlo rendere più grande o piccolo, 00:25:11.050 --> 00:25:15.370 e si può anche solo pop sopra a 00:25:15.370 --> 00:25:17.380 quadrato o possiamo fare 00:25:17.380 --> 00:25:20.815 un piccolo logo Xbox fuori utilizzando i modelli. 00:25:20.815 --> 00:25:25.195 Questo funziona solo su Android che vedo. 00:25:25.195 --> 00:25:27.535 Perché questo è probabilmente utilizzando un font icona, 00:25:27.535 --> 00:25:31.510 Javier, che non viene aggiunto all'uso. 00:25:31.510 --> 00:25:33.730 >> Ma basta ricordare che abbiamo chiave da 00:25:33.730 --> 00:25:37.450 predefinite il cerchio e il rettangolo 00:25:37.450 --> 00:25:41.590 perché sono probabilmente il viste degli indicatori più comuni 00:25:41.590 --> 00:25:43.795 utilizzando in applicazioni generali, 00:25:43.795 --> 00:25:47.200 comune applicazione, ma con il modello di indicatore, 00:25:47.200 --> 00:25:49.990 è possibile utilizzare un altro modello e impostare 00:25:49.990 --> 00:25:54.219 qualsiasi tipo di contenuto all'interno di ogni indicatore. 00:25:54.219 --> 00:25:58.000 >> Yep. Così ho subito cambiato oltre ad Android e qui è possibile 00:25:58.000 --> 00:26:01.180 vedere stiamo usando questo la piccola cosa 00:26:01.180 --> 00:26:02.950 qui per mostrare anche il modello. 00:26:02.950 --> 00:26:07.885 Così si può caricare tutto in indicatori quello che vuoi. 00:26:07.885 --> 00:26:12.325 Quindi, ancora una volta, questo è molto semplice da inizializzare. 00:26:12.325 --> 00:26:14.800 Abbiamo il CarouselView, 00:26:14.800 --> 00:26:17.395 si dispone di IndicatorView, 00:26:17.395 --> 00:26:20.245 e poi basta dire CarouselView.IndicatorView 00:26:20.245 --> 00:26:21.985 è questa istanza qui, 00:26:21.985 --> 00:26:23.290 e saranno collegati tra loro. 00:26:23.290 --> 00:26:24.340 Saprà automaticamente 00:26:24.340 --> 00:26:27.340 quanti elementi ci sono in base all'origine dell'elemento. 00:26:27.340 --> 00:26:30.760 Un'ultima cosa che voglio notare rapidamente è l'IndicatoreView 00:26:30.760 --> 00:26:33.850 viene costruito come un controllo separato perché in futuro, 00:26:33.850 --> 00:26:36.025 potremmo aprirlo a anche altri controlli. 00:26:36.025 --> 00:26:38.830 In questo momento, è possibile utilizzare per il CarouselView, 00:26:38.830 --> 00:26:41.155 ma chissà che cosa il futuro potrebbe portare? 00:26:41.155 --> 00:26:43.210 Quindi in questo modo avremo 00:26:43.210 --> 00:26:46.315 la flessibilità di utilizzarlo per altri controlli. 00:26:46.315 --> 00:26:49.945 >> Va bene, Javier, vuoi per parlare di RefreshView? 00:26:49.945 --> 00:26:51.610 >> Sì, in realtà. 00:26:51.610 --> 00:26:54.265 Quindi continuiamo con più controlli. 00:26:54.265 --> 00:26:58.135 In questo caso, continuiamo con RefreshView. 00:26:58.135 --> 00:27:02.140 Quindi, soprattutto nel rilascio, 00:27:02.140 --> 00:27:06.595 uno dei modelli comuni in L'esperienza utente per fare riferimento ai dati è 00:27:06.595 --> 00:27:11.890 pull-to-refresh effetto che si suggeriscono di recuperare i dati. 00:27:11.890 --> 00:27:13.630 Paulo cos'è questa cosa, 00:27:13.630 --> 00:27:16.615 abbiamo incluso un nuovo controllo chiamato RefreshView, 00:27:16.615 --> 00:27:21.070 che si mette come un involucro in qualsiasi contenuto scorrevole. 00:27:21.070 --> 00:27:23.800 Questo è l'importante cosa perché si 00:27:23.800 --> 00:27:28.640 solo la maggior parte degli aggiornamenti contenuto scorrevole. 00:27:28.710 --> 00:27:30.955 Per usare, è abbastanza facile. 00:27:30.955 --> 00:27:32.230 Alla fine, come diciamo noi, 00:27:32.230 --> 00:27:34.750 blocchiamo qualsiasi controllo. 00:27:34.750 --> 00:27:38.410 In questo caso, stiamo usando un ListView intorno a RefreshView. 00:27:38.410 --> 00:27:40.960 Le due proprietà principali per rinfrescarsi. 00:27:40.960 --> 00:27:42.205 Ecco come è un booleano, 00:27:42.205 --> 00:27:45.250 che, naturalmente, possiamo legare e 00:27:45.250 --> 00:27:49.300 utilizzare utilizzando MVPA e tutti i cose che probabilmente amano. 00:27:49.300 --> 00:27:52.225 Possiamo usare anche un comando per 00:27:52.225 --> 00:27:55.735 indicare ed eseguire il logica per aggiornare l'elenco. 00:27:55.735 --> 00:27:58.225 Naturalmente, ci sono anche le opzioni relative 00:27:58.225 --> 00:28:00.310 con personalizzazione del controllo. 00:28:00.310 --> 00:28:05.005 Così è possibile personalizzare ciò che è il colore dell'indicatore di aggiornamento, 00:28:05.005 --> 00:28:08.425 qual è il colore del sfondo di RefreshView. 00:28:08.425 --> 00:28:11.819 Tutta questa roba, che di nuovo, 00:28:11.819 --> 00:28:15.300 ci accingiamo a vedere con una rapida demo. 00:28:15.300 --> 00:28:20.230 Quindi passo al campione precedente. 00:28:25.530 --> 00:28:31.850 Non so perché sto perdendo che toccano a volte. 00:28:33.150 --> 00:28:37.104 È pazzesco. Non so se questo è con la presentazione, 00:28:37.104 --> 00:28:43.210 ma si può vedere in questo simulatore, il resto sta funzionando. 00:28:43.210 --> 00:28:47.180 >> Lavorare con gli stivali emulatore molto rapidamente in questi giorni, giusto? 00:28:48.600 --> 00:28:51.400 >> Ora sta funzionando. Non lo so. 00:28:51.400 --> 00:28:54.295 Vabbè. In questo caso 00:28:54.295 --> 00:28:56.965 abbiamo molti campioni, ma alla fine, 00:28:56.965 --> 00:28:58.450 la cosa importante è che si 00:28:58.450 --> 00:29:00.265 può essere utilizzato con qualsiasi contenuto scorrevole, 00:29:00.265 --> 00:29:03.190 e questo significa che, naturalmente, è possibile 00:29:03.190 --> 00:29:08.080 aggiornare qualsiasi contenuto che sta utilizzando il ScrollView. 00:29:08.080 --> 00:29:10.975 Naturalmente, è possibile utilizzare ListView, CollectionView, 00:29:10.975 --> 00:29:16.300 e CarouselView per attivare il pull-to-refresh. 00:29:16.300 --> 00:29:18.910 Si può usare, naturalmente, 00:29:18.910 --> 00:29:22.030 con il regolatore e anche noi 00:29:22.030 --> 00:29:25.330 può richiamare direttamente il comando per, ad esempio, 00:29:25.330 --> 00:29:28.420 premendo un pulsante, mostrare 00:29:28.420 --> 00:29:32.305 IndicatorViews e RefreshView nello stesso modo. 00:29:32.305 --> 00:29:34.480 Naturalmente, ha anche funzionato con 00:29:34.480 --> 00:29:38.590 altri tipi di controlli come WebView. 00:29:38.590 --> 00:29:43.015 Ora, penso che questo sia caricando il blocco Xamarin, 00:29:43.015 --> 00:29:47.210 e possiamo tirare per rinfrescarlo. 00:29:47.730 --> 00:29:51.280 Un punto interessante è che, 00:29:51.280 --> 00:29:54.160 in molti dei controlli che stiamo mostrando oggi, 00:29:54.160 --> 00:29:56.439 siamo una piattaforma specifica. 00:29:56.439 --> 00:29:59.800 Ricordate che la nostra logica è specifiche per alcune piattaforme. 00:29:59.800 --> 00:30:01.420 In questo caso, in Windows, 00:30:01.420 --> 00:30:03.400 è possibile impostare questo rilevamento bianco. 00:30:03.400 --> 00:30:05.500 È possibile scorrere dall'alto, 00:30:05.500 --> 00:30:07.465 in basso, a sinistra o a destra. 00:30:07.465 --> 00:30:08.575 Nelle altre piattaforme, 00:30:08.575 --> 00:30:11.515 funziona solo dall'alto per impostazione predefinita. 00:30:11.515 --> 00:30:13.240 Il codice è molto semplice. 00:30:13.240 --> 00:30:20.720 Let's me just jump for sample da riutilizzare con ListView. 00:30:27.210 --> 00:30:29.740 Quindi eccoci qui, 00:30:29.740 --> 00:30:33.400 il ListView, naturalmente, legato alla nostra lista di elementi, 00:30:33.400 --> 00:30:35.290 e stiamo usando RefreshView. 00:30:35.290 --> 00:30:37.240 Per personalizzare il controllo, stiamo usando 00:30:37.240 --> 00:30:39.400 l'opzione RefreshColor e BackgroundColor, proprietà, 00:30:39.400 --> 00:30:42.100 ma ancora una volta, il più proprietà importanti sono 00:30:42.100 --> 00:30:45.610 la proprietà di aggiornamento e il comando. 00:30:45.610 --> 00:30:48.490 Con il pulsante che eseguire l'aggiornamento, 00:30:48.490 --> 00:30:51.070 ma l'unica cosa che abbiamo stanno facendo è eseguire lo stesso 00:30:51.070 --> 00:30:55.400 comando associato al comando RefreshView. 00:30:55.440 --> 00:30:59.860 Continuando con più controlli perché abbiamo 00:30:59.860 --> 00:31:03.985 hanno un mucchio di demo e più cose da rivedere, 00:31:03.985 --> 00:31:06.025 vediamo il SwipeView. 00:31:06.025 --> 00:31:08.500 Allo stesso modo in cui che abbiamo visto prima, 00:31:08.500 --> 00:31:11.320 refreshView che consentono di eseguire 00:31:11.320 --> 00:31:14.740 il gesto pull-to-refresh senza 00:31:14.740 --> 00:31:17.650 essere associati con un controllo specifico. 00:31:17.650 --> 00:31:18.790 Come abbiamo visto prima, 00:31:18.790 --> 00:31:21.025 funziona con qualsiasi Contenuto [non udibile]. 00:31:21.025 --> 00:31:27.385 Ora, abbiamo un'opzione in un elenco di elementi, ad esempio, 00:31:27.385 --> 00:31:34.975 per eseguire un azione in uno degli elementi. 00:31:34.975 --> 00:31:38.725 Per questo stiamo permettendo un colpo 00:31:38.725 --> 00:31:42.790 comandando senza bisogno di modificare lo stato dell'app. 00:31:42.790 --> 00:31:45.295 Per fare questo introduciamo il SwipeView, 00:31:45.295 --> 00:31:49.135 il SwipeView ci permettono di scorrere in qualsiasi direzione, 00:31:49.135 --> 00:31:51.745 possiamo usare anche scorrere verso l'alto, verso il basso, 00:31:51.745 --> 00:31:53.395 da sinistra, e da destra, 00:31:53.395 --> 00:31:54.970 e abbiamo diverse modalità. 00:31:54.970 --> 00:31:56.200 Lasciate che vi spieghi molto rapidamente 00:31:56.200 --> 00:31:59.350 le due diverse modalità perché sono molto, molto diversi. 00:31:59.350 --> 00:32:03.055 Abbiamo in una mano la modalità Reveal, 00:32:03.055 --> 00:32:07.300 in questa modalità abbiamo strisciare per aprire SwipeView. 00:32:07.300 --> 00:32:09.340 Vedremo i diversi comandi, 00:32:09.340 --> 00:32:13.540 e per eseguire quel comando abbiamo bisogno per toccarne esplicitamente uno. 00:32:13.540 --> 00:32:17.425 Nella modalità Esegui è totalmente diverso, 00:32:17.425 --> 00:32:19.240 abbiamo solo bisogno di strisciare, 00:32:19.240 --> 00:32:22.510 e se passiamo la soglia di scorrimento 00:32:22.510 --> 00:32:27.190 comando associato con ogni elemento, 00:32:27.190 --> 00:32:28.990 con ogni comando verrà eseguito, 00:32:28.990 --> 00:32:33.490 e se non solo il SwipeView verrà chiuso. 00:32:33.490 --> 00:32:35.949 Come altri controlli precedenti, 00:32:35.949 --> 00:32:38.740 questo controllo è ancora in anteprima 00:32:38.740 --> 00:32:45.930 e questo richiede l'uso di la bandiera sperimentale. 00:32:45.930 --> 00:32:52.330 Quindi qui abbiamo di base demo utilizzando il Controllo SwipeView. 00:32:52.330 --> 00:32:55.045 Naturalmente, quello che stiamo vedendo qui è 00:32:55.045 --> 00:32:58.690 il contenuto Swipe che può essere qualsiasi tipo di contenuto. 00:32:58.690 --> 00:33:02.455 Siamo qui dove vediamo layout di base con un livello, 00:33:02.455 --> 00:33:05.290 e poi il SwipeItem è 00:33:05.290 --> 00:33:08.755 un elemento di base che ci permette di impostare un testo, 00:33:08.755 --> 00:33:10.705 un'icona, un colore di sfondo, 00:33:10.705 --> 00:33:15.865 e poi, naturalmente, hanno comandi e metodi da richiamare. 00:33:15.865 --> 00:33:20.785 Come si può vedere nella GIF che vedremo più tardi con una demo, 00:33:20.785 --> 00:33:23.740 è possibile scorrere in qualsiasi direzione. 00:33:23.740 --> 00:33:27.535 Abbiamo anche il BehaviorOnInvoked utilizzato, 00:33:27.535 --> 00:33:30.970 il comportamento che sarà avere il SwipeView quando 00:33:30.970 --> 00:33:34.825 premiamo o tocchiamo uno qualsiasi dei comandi. 00:33:34.825 --> 00:33:37.255 Abbiamo auto di default, 00:33:37.255 --> 00:33:40.855 ciò significa che SwipeView per impostazione predefinita verrà chiuso. 00:33:40.855 --> 00:33:44.545 Naturalmente, possiamo impostare questo in modo esplicito con l'opzione Chiudi, 00:33:44.545 --> 00:33:47.245 ma ci sono un altro l'opzione RemainOpen, 00:33:47.245 --> 00:33:50.260 e con questa opzione significa che se tocchiamo 00:33:50.260 --> 00:33:54.400 uno dei comandi SwipeView rimarrà aperto. 00:33:54.400 --> 00:33:59.290 Per eseguire e richiamare qualsiasi azione è facile usare I comandi, 00:33:59.290 --> 00:34:02.770 o in questo caso, il metodo richiamato, 00:34:02.770 --> 00:34:05.260 e usarlo in Collection è 00:34:05.260 --> 00:34:09.025 molto simile al utilizzo di RefreshView. 00:34:09.025 --> 00:34:10.870 Stiamo usando il sito, per esempio, 00:34:10.870 --> 00:34:16.780 Il DataTemplate di ItemTemplate da un oggetto CollectionView da utilizzare e 00:34:16.780 --> 00:34:20.845 consentono di avere opzioni contestuali 00:34:20.845 --> 00:34:24.295 in ogni elemento della raccolta. 00:34:24.295 --> 00:34:29.170 Ultima cosa, abbiamo visto SwipeItem prima di essere 00:34:29.170 --> 00:34:31.644 elementi molto semplici consentono 00:34:31.644 --> 00:34:34.480 per personalizzare un po' il colore di sfondo, 00:34:34.480 --> 00:34:35.950 è possibile impostare l'icona, 00:34:35.950 --> 00:34:37.000 è possibile impostare il testo, 00:34:37.000 --> 00:34:42.655 ma cosa succede se si desidera un personalizzato contenuti all'interno di uno degli elementi? 00:34:42.655 --> 00:34:45.280 Bene, introduciamo anche un altro SwipeItem, 00:34:45.280 --> 00:34:49.975 Penso che [non udibile] SwipeItemView che consentono qualsiasi tipo di vista, 00:34:49.975 --> 00:34:52.285 in modo da consentire qualsiasi tipo di contenuti qui dentro. 00:34:52.285 --> 00:34:58.525 Così è possibile creare un contenuto personalizzato all'interno di uno degli elementi di scorrimento rapido. 00:34:58.525 --> 00:35:03.200 Vediamo una demo rivedere tutta questa roba. 00:35:03.840 --> 00:35:07.060 Permettetemi di passare di nuovo all'emulatore, 00:35:07.060 --> 00:35:10.100 vediamo se continuare a lavorare. 00:35:13.830 --> 00:35:19.720 Così bene, si può scorrere in qualsiasi direzione, 00:35:19.720 --> 00:35:24.950 si può usare anche nelle collezioni, 00:35:25.740 --> 00:35:31.435 beh, mi permetta di muovermi in fretta a SwipeView personalizzato. 00:35:31.435 --> 00:35:34.420 Questa sembra essere una visualizzazione dei contenuti, 00:35:34.420 --> 00:35:38.035 ma se si passa a una qualsiasi delle direzioni, 00:35:38.035 --> 00:35:41.800 è possibile accedere a più layout, 00:35:41.800 --> 00:35:44.515 e alla fine sono SwipeItems. 00:35:44.515 --> 00:35:48.295 Gerald ed io abbiamo un po 'molto 00:35:48.295 --> 00:35:52.675 belle e belle demo preparato con tutta questa roba. 00:35:52.675 --> 00:35:55.869 Abbiamo tempo [incomprensibile] per rivedere tutto, 00:35:55.869 --> 00:35:59.800 ma mi permetta di spostare molto rapidamente per tutte queste demo, 00:35:59.800 --> 00:36:01.390 per esempio, in questo, 00:36:01.390 --> 00:36:03.610 Gerald se vuoi parlare molto rapidamente su di esso. 00:36:03.610 --> 00:36:07.030 >> sì. Quindi questo combina tutte le cose. 00:36:07.030 --> 00:36:08.650 Così in alto ci si vede 00:36:08.650 --> 00:36:12.280 un CarouselView con un IndicatorView proprio sopra di esso, 00:36:12.280 --> 00:36:15.370 e un altro CarouselView proprio laggiù. 00:36:15.370 --> 00:36:16.780 Così si può vedere si può creare 00:36:16.780 --> 00:36:19.330 bellissimi disegni con tutto questo insieme. 00:36:19.330 --> 00:36:23.065 In basso ci probabilmente vedere un CollectionView. 00:36:23.065 --> 00:36:25.135 Quindi sì, voglio dire, 00:36:25.135 --> 00:36:30.265 non lasciate che il design funzionale di la nostra applicazione demo si ottiene fuori pista. 00:36:30.265 --> 00:36:34.495 Si può certamente creare molto cose impressionanti con questo. 00:36:34.495 --> 00:36:36.460 Così Javier, vuoi per mostrare rapidamente 00:36:36.460 --> 00:36:43.240 RefreshView Custom Animazione Teatro? 00:36:43.240 --> 00:36:45.010 >> Facciamo vedere molto rapidamente, 00:36:45.010 --> 00:36:48.820 in modo da poter personalizzare il colori di RefreshView, 00:36:48.820 --> 00:36:50.020 ma in questo caso, per esempio, 00:36:50.020 --> 00:36:51.610 cosa succede se si desidera creare 00:36:51.610 --> 00:36:54.610 un effetto pull-to-refresh personalizzato? 00:36:54.610 --> 00:36:57.370 Beh, puoi farlo molto semplice. 00:36:57.370 --> 00:37:02.559 Ancora una volta, quello che sto facendo qui sta solo usando il SwipeView, 00:37:02.559 --> 00:37:04.420 Sto usando l'elemento superiore da usare 00:37:04.420 --> 00:37:06.640 una bellissima animazione Lottie 00:37:06.640 --> 00:37:10.465 che ho fatto solo basato sul tempo di esecuzione. 00:37:10.465 --> 00:37:13.420 Così si può mescolare tutti questi tipi di 00:37:13.420 --> 00:37:16.540 controlli e cose per creare molto, 00:37:16.540 --> 00:37:19.130 delle rie di essere d'azione molto belle. 00:37:21.690 --> 00:37:26.110 Abbiamo altre demo, ma non molto tempo. 00:37:26.110 --> 00:37:28.825 Così raggiungiamo fino alla fine. 00:37:28.825 --> 00:37:33.130 Permettetemi di condividere molto rapidamente dove potete trovare tutte queste demo, 00:37:33.130 --> 00:37:37.420 e ci sono un sacco di più demo e cose che abbiamo 00:37:37.420 --> 00:37:41.380 perché abbiamo meno tempo, 00:37:41.380 --> 00:37:46.090 che tutte queste demo necessario passare uno per uno. 00:37:46.090 --> 00:37:48.850 Ma si può trovare tutto in questi due link. 00:37:48.850 --> 00:37:51.190 Speriamo che sia utile per voi, 00:37:51.190 --> 00:37:55.009 e non so se abbiamo domande. 00:37:55.890 --> 00:37:59.170 >> Sì, abbiamo appena una domanda veloce 00:37:59.170 --> 00:38:01.885 prima di consegnare agli altoparlanti successivi, 00:38:01.885 --> 00:38:05.770 e cioè, è la visualizzazione di raccolta 00:38:05.770 --> 00:38:10.460 hanno il caricamento pigro e caratteristica dati infiniti? 00:38:11.910 --> 00:38:15.700 >> Penso, voglio dire, 00:38:15.700 --> 00:38:18.370 si è in grado di implementarlo da soli. 00:38:18.370 --> 00:38:21.400 Probabilmente potremmo fare più in quella zona 00:38:21.400 --> 00:38:24.670 per sostenervi fuori dalla scatola. 00:38:24.670 --> 00:38:26.800 Ma in questo momento, si può fare con 00:38:26.800 --> 00:38:30.535 il SwipeEvents è possibile vedere quale elemento viene visualizzato, 00:38:30.535 --> 00:38:33.610 e così si può iniziare caricamento nei nuovi dati. 00:38:33.610 --> 00:38:36.385 Quindi sì, è sicuramente possibile. 00:38:36.385 --> 00:38:37.180 >> Perfetto. 00:38:37.180 --> 00:38:38.890 >> Quindi, per impostazione predefinita, il CollectionView hanno 00:38:38.890 --> 00:38:41.575 alcuni comandi per rilevare quando si raggiunge la fine, 00:38:41.575 --> 00:38:43.810 e molti più dati, e tutta questa roba. 00:38:43.810 --> 00:38:46.300 Quindi tutto questo tipo di roba è possibile. 00:38:46.300 --> 00:38:47.845 >> Molto più facile che con ListView. 00:38:47.845 --> 00:38:48.655 >> sì. 00:38:48.655 --> 00:38:51.850 >> Suona alla grande. Va bene. Grazie mille per il tuo discorso, 00:38:51.850 --> 00:38:54.805 e ora, lo rima a James. 00:38:54.805 --> 00:38:56.965 >> Fantastico. Grazie mille 00:38:56.965 --> 00:38:59.605 Olia, Gerald e Javier. 00:38:59.605 --> 00:39:02.560 Super impressionante. Amo tutte le caratteristiche sorprendenti che stanno accadendo. 00:39:02.560 --> 00:39:05.200 Ora, sono davvero eccitato perché vivono dall'Italia, 00:39:05.200 --> 00:39:07.870 Codrina è qui per parlare a noi su come possiamo 00:39:07.870 --> 00:39:10.630 effettivamente testare il nostro applicazioni Xamarin, 00:39:10.630 --> 00:39:12.700 l'interfaccia utente e il codice sorgente. 00:39:12.700 --> 00:39:16.625 Codrina, ho intenzione di pop it verso di voi e portarlo via. 00:39:16.625 --> 00:39:19.560 >> Grazie, James. Ciao a tutti 00:39:19.560 --> 00:39:24.105 e ho intenzione di condividere il mio schermo, 00:39:24.105 --> 00:39:28.570 e sarò pronto per iniziare.