De gebruikersinterface aanpassen

Sebastian Benz

Een voordeel van aangepaste tabbladen is dat ze naadloos in uw app kunnen worden geïntegreerd. In dit deel van de handleiding Aangepaste tabbladen leert u hoe u het uiterlijk en het gedrag van een aangepast tabblad kunt aanpassen aan uw app.

Stel de kleur van de werkbalk in

Lichte modus

Donkere modus

Pas eerst de adresbalk van het aangepaste tabblad aan, zodat deze consistent is met het thema van uw app. Het onderstaande fragment wijzigt de standaardwerkbalkkleur door setDefaultColorSchemeParams() aan te roepen. Als uw app ook een donker kleurenschema ondersteunt, stelt u dit in via .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …) .

// get the current toolbar background color (this might work differently in your app)
@ColorInt int colorPrimaryLight = ContextCompat.getColor(MainActivity.this, R.color.md_theme_light_primary);
@ColorInt int colorPrimaryDark = ContextCompat.getColor(MainActivity.this, R.color.md_theme_dark_primary);

CustomTabsIntent intent = new CustomTabsIntent.Builder()
        // set the default color scheme
        .setDefaultColorSchemeParams(new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryLight)
                .build())
        // set the alternative dark color scheme
        .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryDark)
                .build())
        .build();

De werkbalk heeft nu aangepaste achtergrond- en voorgrondkleuren.

Belangrijk punt: Het Custom Tab-protocol biedt geen ondersteuning voor het wijzigen van de kleur van de statusbalk .

Configureer aangepaste enter- en exit-animaties

Vervolgens kunt u het starten (en verlaten) van een aangepaste tabbladervaring in uw app naadlooser maken door aangepaste start- en eindanimaties te definiëren met behulp van setStartAnimation en setExitAnimation :

CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setStartAnimations(MainActivity.this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(MainActivity.this, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.build();

Verdere aanpassingen: titel, AppBar automatisch verbergen en aangepast sluitpictogram

Er zijn nog een paar dingen die u kunt doen om de gebruikersinterface van een aangepast tabblad aan uw behoeften aan te passen.

• Verberg de URL-balk tijdens het scrollen om de gebruiker meer ruimte te geven om webinhoud te verkennen met behulp van setUrlBarHidingEnabled() (true) .
• Toon de documenttitel in plaats van de URL via setShowTitle() (true) .
• Pas de sluitknop aan zodat deze overeenkomt met de gebruikersstroom in uw app, bijvoorbeeld door een pijl terug weer te geven in plaats van het standaard X pictogram): setCloseButtonIcon() (myCustomCloseIcon) .

Deze zijn allemaal optioneel, maar ze kunnen de aangepaste tabbladervaring in uw app verbeteren.

Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
  …
  .setUrlBarHidingEnabled(true)
  .setShowTitle(true)
  .setCloseButtonIcon(toBitmap(myCustomCloseIcon))
  .build();

Een aangepaste verwijzer instellen

U kunt uw app instellen als verwijzer wanneer u uw aangepaste tabblad start. Op deze manier kunt u websites laten weten waar hun verkeer vandaan komt.

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
       Uri.parse("android-app://" + context.getPackageName()));

Volgende stap: leer hoe u aangepaste actie kunt toevoegen aan uw aangepaste tabblad .