Inserire un modello di dati personalizzato nella libreria dell'interfaccia utente per un'applicazione

Per la documentazione dettagliata e gli argomenti di avvio rapido sulla libreria dell'interfaccia utente Web, vedere il libro della raccolta dell'interfaccia utente Web.

Per altre informazioni, vedere Modello di dati utente personalizzato nella libreria dell'interfaccia utente Web.

Per altre informazioni, vedere la libreria dell'interfaccia utente Android open source e il codice dell'applicazione di esempio.

Personalizzazione della visualizzazione partecipante locale

La libreria dell'interfaccia utente offre agli sviluppatori la possibilità di offrire un'esperienza personalizzata relativa alle informazioni sui partecipanti. All'avvio, è possibile inserire facoltativamente i dati dei partecipanti locali. Questi dati locali non vengono condivisi con il server ed è possibile usarli per personalizzare il nome visualizzato e l'avatar dell'utente locale.

Opzioni locali

CallCompositeLocalOptions è il modello di dati che può avere CallCompositeParticipantViewData e CallCompositeSetupScreenViewData. Rappresenta il partecipante locale.

Per impostazione predefinita, per i partecipanti remoti, la libreria dell'interfaccia utente visualizza displayName le informazioni inserite in RemoteOptions. Queste informazioni vengono inviate al server back-end Servizi di comunicazione di Azure. Se CallCompositeParticipantViewData viene inserito, il partecipante displayName e avatar le informazioni vengono visualizzate in tutti i componenti avatar in locale.

Analogamente, per CallCompositeSetupScreenViewDatatitle e subtitle in CallCompositeSetupScreenViewData sovrascrivere rispettivamente il titolo e il sottotitolo della barra di spostamento nella schermata premente. Per impostazione predefinita, la libreria dell'interfaccia utente visualizza Setup come titolo e niente come sottotitolo.

Dati di visualizzazione partecipanti locali

CallCompositeParticipantViewData è una classe che imposta displayName, avatarBitmape scaleType per il controllo avatar. Questa classe viene passata a CallCompositeLocalOptions per personalizzare le informazioni di visualizzazione dei partecipanti locali. Questa classe è contenuta nell'oggetto CallCompositeLocalOptions che rappresenta le opzioni usate localmente nel dispositivo che effettua la chiamata.

Questa istanza di displayName differisce dalle displayName informazioni passate tramite CallCompositeRemoteOptions:

• L'istanza CallCompositeParticipantViewData di displayName viene usata solo in locale come override.
• L'istanza CallCompositeRemoteOptions di displayName viene passata al server e condivisa con altri partecipanti.

Se non si specifica l'istanza CallCompositeParticipantViewData di displayName, l'applicazione usa l'istanza CallCompositeRemoteOptions di displayName.

Configurare i dati della visualizzazione schermata

CallCompositeSetupScreenViewData è un oggetto che imposta title e subtitle per la barra di spostamento nella schermata di configurazione della chiamata. Se subtitle non è definito, il sottotitolo è nascosto. In questo caso, title è necessario impostare subtitle, ma subtitle è facoltativo quando title è impostato. Questa classe viene archiviata localmente e le relative informazioni non vengono inviate al server.

Utilizzo

Per usare CallCompositeLocalOptions, passare l'istanza di CallCompositeParticipantViewData e/o CallCompositeSetupScreenViewDatae e inserire CallCompositeLocalOptions in callComposite.launch.

val participantViewData: CallCompositeParticipantViewData = CallCompositeParticipantViewData()
    .setAvatarBitmap((Bitmap) avatarBitmap)
    .setScaleType((ImageView.ScaleType) scaleType)
    .setDisplayName((String) displayName)

val setupScreenViewData: CallCompositeSetupScreenViewData = CallCompositeSetupScreenViewData()
    .setTitle((String) title)
    .setSubtitle((String) subTitle)

val localOptions: CallCompositeLocalOptions = CallCompositeLocalOptions()
    .setParticipantViewData(participantViewData)
    .setSetupScreenViewData(setupScreenViewData)

callComposite.launch(callLauncherActivity, remoteOptions, localOptions)

final CallCompositeParticipantViewData participantViewData = new CallCompositeParticipantViewData()
    .setAvatarBitmap((Bitmap) avatarBitmap)
    .setScaleType((ImageView.ScaleType) scaleType)
    .setDisplayName((String) displayName);

final CallCompositeSetupScreenViewData setupScreenViewData = new CallCompositeSetupScreenViewData()
    .setTitle((String) title)
    .setSubtitle((String) subTitle);

final CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions()
    .setParticipantViewData(participantViewData)
    .setSetupScreenViewData(setupScreenViewData);

callComposite.launch(callLauncherActivity, remoteOptions, localOptions);

Visualizzazione dell'installazione	Visualizzazione esperienza di chiamata

Personalizzazione della visualizzazione partecipante remoto

In alcuni casi, potresti voler fornire sostituzioni locali per i partecipanti remoti per consentire avatar e titoli personalizzati.

Il processo è simile al processo partecipante locale, ma i dati sono impostati quando i partecipanti partecipano alla chiamata. Gli sviluppatori devono aggiungere un listener quando i partecipanti remoti partecipano alla chiamata e quindi chiamare un metodo per impostare CallCompositeParticipantViewData gli utenti remoti.

Utilizzo

Per impostare i dati di visualizzazione per i partecipanti remoti, impostare setOnRemoteParticipantJoinedHandler. In caso di join del partecipante remoto, usare setRemoteParticipantViewData per callComposite inserire i dati di visualizzazione per i partecipanti remoti. L'identificatore del partecipante CommunicationIdentifier identifica in modo univoco un partecipante remoto.

Chiama per setRemoteParticipantViewData restituire un risultato di CallCompositeSetParticipantViewDataResult, con i valori seguenti:

• CallCompositeSetParticipantViewDataResult.SUCCESS
• CallCompositeSetParticipantViewDataResult.PARTICIPANT_NOT_IN_CALL

callComposite.addOnRemoteParticipantJoinedEventHandler { remoteParticipantJoinedEvent -> 
                remoteParticipantJoinedEvent.identifiers.forEach { identifier ->
                    // get displayName, bitmap for identifier
                    callComposite.setRemoteParticipantViewData(identifier,
                        CallCompositeParticipantViewData().setDisplayName("displayName")) // setAvatarBitmap for bitmap
                }
            }

    callComposite.addOnRemoteParticipantJoinedEventHandler( (remoteParticipantJoinedEvent) -> {
                for (CommunicationIdentifier identifier: remoteParticipantJoinedEvent.getIdentifiers()) {
                    // get displayName, bitmap for identifier
                    callComposite.setRemoteParticipantViewData(identifier,
                            new CallCompositeParticipantViewData().setDisplayName("displayName")); // setAvatarBitmap for bitmap
                }
            });

Elenco partecipanti

Per altre informazioni, vedere la libreria dell'interfaccia utente iOS open source e il codice dell'applicazione di esempio.

Inserimento dei dati nella visualizzazione partecipante locale

La libreria dell'interfaccia utente offre agli sviluppatori la possibilità di offrire un'esperienza personalizzata. All'avvio è possibile inserire opzioni facoltative per i dati locali. Questo oggetto può contenere un'immagine dell'interfaccia utente che rappresenta l'avatar per il rendering e un nome visualizzato da visualizzare facoltativamente. Nessuna di queste informazioni viene inviata a Servizi di comunicazione di Azure. Viene mantenuto in locale nella libreria dell'interfaccia utente.

Opzioni locali

LocalOptions è un modello di ParticipantViewData dati costituito da e SetupScreenViewData.

Per ParticipantViewData, per impostazione predefinita, la libreria dell'interfaccia utente visualizza displayName le informazioni inserite in RemoteOptions. Queste informazioni vengono inviate al server back-end Servizi di comunicazione di Azure. Se ParticipantViewData viene inserito, il partecipante displayName e avatar le informazioni vengono visualizzate in tutti i componenti avatar.

Per , per SetupScreenViewDataimpostazione predefinita, la libreria dell'interfaccia utente visualizza Il programma di installazione come titolo e niente come sottotitolo. Le title informazioni e subtitle in SetupScreenViewData sovrascrivono rispettivamente il titolo e il sottotitolo della barra di spostamento nella schermata premente.

Dati di visualizzazione partecipanti locali

ParticipantViewData è un oggetto che imposta l'immagine dell'interfaccia displayName utente e avatar per i componenti avatar. Questa classe viene inserita nella libreria dell'interfaccia utente per impostare le informazioni sull'avatar. Viene archiviato in locale e non viene mai inviato al server.

Configurare i dati della visualizzazione schermata

SetupScreenViewData è un oggetto che imposta title e subtitle per la barra di spostamento nella schermata premete (nota anche come visualizzazione di configurazione). Se si definisce SetupScreenViewData, è necessario specificare title anche perché si tratta di un campo obbligatorio. Tuttavia, subtitle non è obbligatorio.

Se non si definisce subtitle, è nascosto. Questa classe viene archiviata localmente e le relative informazioni non vengono inviate al server.

Utilizzo

// LocalOptions (data not sent to the server)
let localParticipantViewData = ParticipantViewData(avatar: <Some UIImage>,
                                                   displayName: "<DISPLAY_NAME>")
let localSetupScreenViewData = SetupScreenViewData(title: "<NAV_TITLE>",
                                                               subtitle: "<NAV_SUBTITLE>")
let localOptions = LocalOptions(participantViewData: localParticipantViewData, 
                                setupScreenViewData: localSetupScreenViewData)
// RemoteOptions (data sent to the server)
let remoteOptions = RemoteOptions(for: .groupCall(groupId: UUID()),
                                  credential: <Some CommunicationTokenCredential>,
                                  displayName: "<DISPLAY_NAME>")
// Launch
callComposite.launch(remoteOptions: remoteOptions, localOptions: localOptions)

Visualizzazione dell'installazione	Visualizzazione esperienza di chiamata

Inserimento dati di visualizzazione partecipanti remoti

Durante l'aggiunta al partecipante remoto, è possibile inserire i dati di visualizzazione per il partecipante remoto. Questi dati di visualizzazione partecipante possono contenere un'immagine dell'interfaccia utente che rappresenta l'avatar per il rendering e un nome visualizzato da visualizzare facoltativamente. Nessuna di queste informazioni viene inviata a Servizi di comunicazione di Azure. Viene mantenuto in locale nella libreria dell'interfaccia utente.

Utilizzo

Per impostare i dati di visualizzazione per i partecipanti remoti, impostare onRemoteParticipantJoined il completamento per il gestore eventi. In caso di join del partecipante remoto, usare set(remoteParticipantViewData:, for:, completionHandler:) per CallComposite inserire i dati di visualizzazione per i partecipanti remoti. L'identificatore del partecipante CommunicationIdentifier identifica in modo univoco un partecipante remoto. Usare il gestore di completamento facoltativo per restituire il risultato dell'operazione di impostazione.

callComposite.events.onRemoteParticipantJoined = { [weak callComposite] identifiers in
  for identifier in identifiers {
    // map identifier to displayName
    let participantViewData = ParticipantViewData(displayName: "<DISPLAY_NAME>")
    callComposite?.set(remoteParticipantViewData: participantViewData,
                       for: identifier) { result in
      switch result {
      case .success:
        print("Set participant view data succeeded")
      case .failure(let error):
        print("Set participant view data failed with \(error)")
      }
    }
  }
}

Elenco partecipanti