Implementation guide

een compleet voorbeeld is beschikbaar op de GitHub voorbeeldtoepassing. Het bevat herbruikbare klassen om de gebruikersinterface aan te passen, verbinding te maken met de achtergrondservice en de levenscyclus van zowel de toepassing als de aangepaste tabactiviteit af te handelen.

Als u de richtlijnen van deze pagina volgt, zult u in staat zijn om een geweldige integratie te maken.

de eerste stap voor een aangepaste Tabs-integratie is het toevoegen van de Androidx-Browserbibliotheek aan uw project. Open het app/build.gradle bestand en voeg de browserbibliotheek toe aan de sectie afhankelijkheden.

dependencies {
...
implementation "androidx.browser:browser:1.3.0"
}

zodra de Browserbibliotheek aan uw project is toegevoegd, zijn er twee sets van mogelijke aanpassingen:

  • aanpassen van de gebruikersinterface en interactie met de aangepaste tabbladen.
  • de pagina sneller laden en de toepassing levend houden.

de UI-aanpassingen worden gedaan met behulp van deCustomTabsIntent en deCustomTabsIntent.Builder klassen; de prestatieverbeteringen worden bereikt door de CustomTabsClient te gebruiken om verbinding te maken met de Custom Tabs service, de browser op te warmen en te laten weten welke URL ‘ s zullen worden geopend.

een aangepast tabblad Openen #

A CustomTabsIntent.Builder kan worden gebruikt om een aangepast tabblad in te stellen. Eenmaal gereed, bel CustomTabsIntent.Builder.build om een CustomTabsIntent aan te maken en start de gewenste Url met CustomTabsIntent.launchUrl.

String url = ¨https://paul.kinlan.me/¨;
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
CustomTabsIntent customTabsIntent = builder.build();
customTabsIntent.launchUrl(this, Uri.parse(url));

Configureer de kleur van de adresbalk #

een van de belangrijkste (en eenvoudigste te implementeren) aspecten van aangepaste tabbladen is de mogelijkheid voor u om de kleur van de adresbalk te wijzigen om consistent te zijn met het thema van uw app.

het fragment hieronder verandert de achtergrondkleur voor de adresbalk. colorInt is een int die een Colorspecificeert.

int coolorInt = Color.parseColor("#FF0000"); //red
builder.setToolbarColor(colorInt);

Configureer een aangepaste actieknop # 

builder.setActionButton(icon, description, pendingIntent, tint);

Screenshot van de actieknop in de Tumblr app

als de ontwikkelaar van uw app hebt u volledige controle over de actieknop die aan uw gebruikers wordt gepresenteerd in het tabblad browser.

in de meeste gevallen zal dit een primaire actie zijn, zoals Share, of een andere veelvoorkomende activiteit die uw gebruikers zullen uitvoeren.

de knop actie wordt weergegeven als een bundel met een pictogram van de knop actie en een PendingIntent die door de browser wordt aangeroepen wanneer uw gebruiker op de knop Actie drukt. Het pictogram is currenlty 24dp in hoogte en 24-48 dp in breedte.

Het kan worden aangepast door CustomTabsIntentBuilder#setActionButton:

  • icon is een Bitmap te gebruiken als de afbeeldingsbron voor de actieknop.
  • description is een String worden gebruikt als een toegankelijke beschrijving voor de knop.
  • pendingIntent is een PendingIntent om te starten wanneer op de actieknop of het menu-item werd getikt. De browser zal PendingIntent#send aanroepen bij tikken na het toevoegen van de url als gegevens. De client-app kan Intent#getDataString aanroepen om de url te verkrijgen.
  • tint is een boolean die bepaalt of de actieknop getint moet worden.

Configureer een aangepast menu # 

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

schermafbeelding van het menu in de Twitter-app

de browser heeft een uitgebreid menu met acties die gebruikers vaak in een browser zullen uitvoeren, hoewel ze mogelijk niet relevant zijn voor de context van uw toepassing.

aangepaste tabbladen hebben een reeks standaard acties die door de browser worden geleverd. Deze acties kunnen items bevatten zoals “Forward”, “Page Info”, “Refresh”, “Find in Page” of “Open in Browser”.

als ontwikkelaar kunt u maximaal vijf menu-items toevoegen en aanpassen die verschijnen tussen de pictogramrij en voetitems.

een menu-item wordt toegevoegd door CustomTabsIntent.Builder#addMenuItem aan te roepen met titel en een PendingIntent die browser zal aanroepen namens u wanneer de gebruiker tikt op het item worden doorgegeven als parameters.

configureer aangepaste enter – en exit-animaties #

veel Android-toepassingen gebruiken aangepaste entry – en Exit-animaties bij het overschakelen tussen activiteiten op Android. Aangepaste tabbladen is niet anders, u kunt de entry en exit (wanneer de gebruiker terugdrukt) animaties om ze consistent te houden met de rest van uw applicatie.

builder.setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left);
builder.setExitAnimations(this, R.anim.slide_in_left, R.anim.slide_out_right);

Warm de browser op om pagina ‘ s sneller te laten laden #

standaard, wanneer CustomTabsIntent#launchUrl wordt aangeroepen, zal de browser draaien en de URL starten. Dit kan kostbare tijd in beslag nemen en invloed hebben op de perceptie van gladheid.

wij zijn van mening dat gebruikers een bijna onmiddellijke ervaring nodig hebben, dus hebben we een Service aangeboden waarmee uw app verbinding kan maken en de browser en zijn eigen componenten kan laten opwarmen. Aangepaste tabbladen bieden ook de mogelijkheid voor u, de ontwikkelaar om de browser te vertellen de waarschijnlijke set van webpagina ‘ s die de gebruiker zal bezoeken. Browsers kunnen dan:

  • DNS-pre-resolutie van het hoofddomein
  • DNS-pre-resolutie van de meest waarschijnlijke subbronnen
  • Pre-verbinding met de bestemming uitvoeren, inclusief https/TLS-onderhandeling.

het proces voor het opwarmen van de browser is als volgt:

  • gebruik CustomTabsClient#bindCustomTabsService om verbinding te maken met de service.
  • zodra de service is verbonden, bel CustomTabsClient#warmup om de browser achter de schermen te starten.
  • aanroep CustomTabsClient#newSession om een nieuwe sessie aan te maken. Deze sessie wordt gebruikt voor alle aanvragen voor de API.
  • voeg optioneel eenCustomTabsCallback als parameter toe bij het aanmaken van een nieuwe sessie, zodat u weet dat een pagina geladen is.
  • vertel de browser welke pagina ‘ s de gebruiker waarschijnlijk zal laden met CustomTabsSession#mayLaunchUrl
  • noem de CustomTabsIntent.Builder constructor die de aangemaakte CustomTabsSession als parameter passeert.

verbinden met de aangepaste Tabs-Service #

deCustomTabsClient#bindCustomTabsService methode neemt de complexiteit weg van het verbinden met de aangepaste Tabs-service.

Maak een klasse aan die CustomTabsServiceConnection uitbreidt en gebruik onCustomTabsServiceConnected om een instantie van CustomTabsClientte krijgen. Deze instantie zal nodig zijn bij de volgende stappen.

// Package name for the Chrome channel the client wants to connect to. This
// depends on the channel name.
// Stable = com.android.chrome
// Beta = com.chrome.beta
// Dev = com.chrome.dev
public static final String CUSTOM_TAB_PACKAGE_NAME = "com.android.chrome"; // Change when in stable
CustomTabsServiceConnection connection = new CustomTabsServiceConnection() {
@Override
public void onCustomTabsServiceConnected(ComponentName name, CustomTabsClient client) {
mCustomTabsClient = client;
}
@Override
public void onServiceDisconnected(ComponentName name) {
}
};
boolean ok = CustomTabsClient.bindCustomTabsService(this, mPackageNameToBind, connection);

Warm het Browserproces op #

boolean warmup(long flags)

verwarmt het browserproces en laadt de eigen bibliotheken. Warmup is asynchroon, de retourwaarde geeft aan of het verzoek is geaccepteerd. Meerdere succesvolle gesprekken zal ook terugkeren true.

geeft true terug indien succesvol.

Maak een nieuwe tabsessie #

boolean newSession(CustomTabsCallback callback)

sessie wordt gebruikt in volgende oproepen om mayLaunchUrl-aanroep, de CustomTabsIntent en het tabblad gegenereerd aan elkaar te koppelen. De hier verstrekte callback wordt geassocieerd met de gemaakte sessie. Alle updates voor de gemaakte sessie (zie aangepaste tabbladen Callback hieronder) worden ook ontvangen via deze callback. Geeft terug of een sessie succesvol is aangemaakt. Meerdere oproepen met dezelfde CustomTabsCallback of een null-waarde zullen false retourneren.

vertel de browser welke URL ‘ s de gebruiker waarschijnlijk zal openen #

boolean mayLaunchUrl(Uri url, Bundle extras, List<Bundle> otherLikelyBundles)

Deze aangepaste Tabssessiemethode vertelt de browser van een waarschijnlijke toekomstige navigatie naar een URL. De methode warmup() moet als eerste worden aangeroepen als een beste praktijk. De meest waarschijnlijke URL moet eerst worden opgegeven. Optioneel kan een lijst met andere mogelijke URL ‘ s worden verstrekt. Ze worden als minder waarschijnlijk behandeld dan de eerste en moeten in afnemende volgorde van prioriteit worden gesorteerd. Deze extra URL ‘ s kunnen worden genegeerd. Alle eerdere oproepen naar deze methode zullen worden deprioritized. Geeft terug of de bewerking succesvol is voltooid.

Custom Tabs Connection Callback #

void onNavigationEvent(int navigationEvent, Bundle extras)

wordt aangeroepen wanneer een navigatie-gebeurtenis plaatsvindt in het tabblad Aangepast. De navigationEvent int is een van de 6 waarden die de status van de pagina bepaalt. Zie hieronder voor meer informatie.

/**
* Sent when the tab has started loading a page.
*/
public static final int NAVIGATION_STARTED = 1;
/**
* Sent when the tab has finished loading a page.
*/
public static final int NAVIGATION_FINISHED = 2;
/**
* Sent when the tab couldn't finish loading due to a failure.
*/
public static final int NAVIGATION_FAILED = 3;
/**
* Sent when loading was aborted by a user action before it finishes like clicking on a link
* or refreshing the page.
*/
public static final int NAVIGATION_ABORTED = 4;
/**
* Sent when the tab becomes visible.
*/
public static final int TAB_SHOWN = 5;
/**
* Sent when the tab becomes hidden.
*/
public static final int TAB_HIDDEN = 6;

Wat gebeurt er als de gebruiker geen browser heeft die aangepaste tabbladen ondersteunt? #

aangepaste tabbladen worden door de meeste Android-browsers ondersteund. Aangezien het echter een ACTION_VIEW Intent gebruikt met key Extras om de gebruikersinterface aan te passen, wordt het geopend in de systeembrowser, of de standaardbrowser van de gebruiker als aangepaste tabbladen niet worden ondersteund.

als de gebruiker een browser heeft die Custom Tab ondersteunt en het is de standaard browser, zal het automatisch de extra ‘ s ophalen en een aangepaste gebruikersinterface presenteren.

Hoe kan ik controleren of het Android-apparaat een browser heeft die Custom Tab ondersteunt? #

het is mogelijk om de PackageManager te gebruiken om het Android-apparaat te bevragen naar toepassingen die aangepaste tabbladen kunnen verwerken. We vragen naar toepassingen die http Intents kunnen verwerken, controleer dan of deze toepassingen ook ondersteuning voor de Custom Tabs Service verklaren:

/**
* Returns a list of packages that support Custom Tabs.
*/
public static ArrayList<ResolveInfo> getCustomTabsPackages(Context context) {
PackageManager pm = context.getPackageManager();
// Get default VIEW intent handler.
Intent activityIntent = new Intent()
.setAction(Intent.ACTION_VIEW)
.addCategory(Intent.CATEGORY_BROWSABLE)
.setData(Uri.fromParts("http", "", null));
// Get all apps that can handle VIEW intents.
List<ResolveInfo> resolvedActivityList = pm.queryIntentActivities(activityIntent, 0);
ArrayList<ResolveInfo> packagesSupportingCustomTabs = new ArrayList<>();
for (ResolveInfo info : resolvedActivityList) {
Intent serviceIntent = new Intent();
serviceIntent.setAction(ACTION_CUSTOM_TABS_CONNECTION);
serviceIntent.setPackage(info.activityInfo.packageName);
// Check if this package also resolves the Custom Tabs service.
if (pm.resolveService(serviceIntent, 0) != null) {
packagesSupportingCustomTabs.add(info);
}
}
return packagesSupportingCustomTabs;
}

Android 11 heeft package visiblity changes geïntroduceerd. Als uw Android-app is gericht op API niveau 30 of hoger, het toevoegen van eenqueries sectie aan AndroidManifest.xml is nodig, anders zal het codefragment hierboven geen resultaten opleveren:

<queries>
<intent>
<action android:name=
"android.support.customtabs.action.CustomTabsService" />
</intent>
</queries>

admin

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.