Utiliser des onglets Chrome personnalisés dans votre application Android – Le démarrage

Écrit par

Carole B.

dans

Table des matières

Utiliser des onglets Chrome personnalisés dans votre application Android – Le démarrage

Joseph Muller

Dans 2015 cependant, Onglets Chrome personnalisés ont été introduits comme une troisième option qui n’impliquait aucun sacrifice. En bref, les onglets personnalisés (Chrome) sont un composant léger que vous pouvez utiliser pour naviguer sur Internet dans ton application. Ils nécessitent moins de frais techniques, permettent des personnalisations visuelles et sont presque deux fois plus rapides que les deux anciennes options.

Applications tierces

Les avantages

  • Rapide et facile. Si vous avez une URL, vous pouvez la renvoyer rapidement vers le système Android et en finir avec elle.

Les inconvénients

  • Transitions lourdes. Passer de l’interface de l’application mobile à une activité entièrement distincte peut être choquant.

WebView

Les avantages

  • Transitions légères. Étant donné que WebView est intégré dans la mise en page de votre application, l’utilisateur ne remarquera aucun changement radical lors de la navigation entre les activités ou les fragments.

Les inconvénients

  • Pas de cookies partagés. Sans accès aux données enregistrées de l’utilisateur, la navigation sera plus lente

Onglets personnalisés Chrome

Les avantages

  • Implémentation simple. Vous n’avez pas à vous soucier de la gestion des demandes de pages ou de l’octroi d’autorisations aux sites Web.

Les inconvénients

Alors que la plupart des gens semblent apprécier la commodité des onglets personnalisés, quelques personnes ont exprimé leurs critiques.

  • Un seul onglet. C’est vrai, vous ne pouvez ouvrir qu’un seul onglet dans l’onglet Personnalisé à la fois et la seule façon d’accéder à un navigateur réel est via le menu « plus »

Implémentation de l’onglet personnalisé de base

Dépendances

Ajouter le dépendance la plus récente dans votre fichier gradle.build

implementation 'androidx.browser:browser:1.2.0'

Cela peut provoquer un problème de construction, mais vous pouvez résoudre ce problème en ajoutant cette aussi

implementation 'com.google.guava:listenablefuture:9999.0-empty-to-avoid-conflict-with-guava'

la mise en oeuvre

Si vous utilisez un fragment, tout ce dont vous avez besoin est ce morceau de code:

Étapes pertinentes

  1. le CustomTabsIntent.Builder est déclaré comme une variable de classe

Félicitations, votre application utilise maintenant des onglets personnalisés!

Implémentation avancée de l’onglet personnalisé

Dépendances

Les dépendances pour cela sont les mêmes qu’avant.

implementation 'androidx.browser:browser:1.2.0'
implementation 'com.google.guava:listenablefuture:9999.0-empty-to-avoid-conflict-with-guava'

la mise en oeuvre

C’est un peu plus compliqué et il y a encore quelques pièces en mouvement.

Étapes pertinentes

  1. le CustomTabsServiceConnection, CustomTabsClient, CustomTabsSession, et CustomTabsIntent.Builder sont déclarés comme des variables

Pour les apprenants visuels comme moi:

Diagramme des composants des onglets personnalisés

Cette version présente plusieurs avantages par rapport à l’alternative plus simple. Pour commencer, vous pouvez utiliser le onNavigationEvent() dans la classe CustomTabsCallback pour effectuer des actions en fonction du statut de l’onglet personnalisé (par exemple, s’il a commencé ou terminé le chargement d’une nouvelle page).

Vous pouvez également utiliser CustomTabsServiceClient pour réchauffer() Chrome et CustomTabsSession pour deviner quels liens peuvent être ouverts par l’utilisateur avec mayLaunchUrl().

client.warmup(0L)
session.mayLaunchUrl(Uri.parse("www.google.com"),null,null)

Vous pouvez ajouter plusieurs URL à l’aide d’un paquet et la clé KEY_URL comme ça:

val urlBundles = mutableListOf()
val otherUrls: Bundle = bundleOf(
CustomTabsService.KEY_URL to Uri.parse("www.wikipedia.org")
)
urlBundles.add(otherUrls)

The Simple Stuff

  • Changer les couleurs de la barre d’outils
// Change tab toolbar color
builder.setToolbarColor(ContextCompat.getColor(main, R.color.black)) 
builder.setSecondaryToolbarColor(ContextCompat.getColor(main,R.color.colorAccent))
// Toggle title in header toolbar
builder.setShowTitle(true)
// Add share option to more menu
builder.addDefaultShareMenuItem()
// Change close icon
AppCompatResources.getDrawable(main, R.drawable.close_icon)?.let {
DrawableCompat.setTint(it, Color.WHITE)
builder.setCloseButtonIcon(it.toBitmap())
}
// Hide URL bar on scrolling
builder.enableUrlBarHiding()

+ Plus de publications