In diesem Leitfaden wird erläutert, wie Sie benutzerdefinierten Tabs benutzerdefinierte Interaktivität hinzufügen.
Standardmäßige Freigabeaktion aktivieren
Wenn Sie keine benutzerdefinierte Freigabeaktion bereitstellen, empfiehlt es sich, die standardmäßige Freigabeaktion des Browsers im Dreipunkt-Menü zu aktivieren, damit Nutzer Links zu den angezeigten Inhalten leichter teilen können:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);
Benutzerdefinierte Aktionsschaltfläche hinzufügen
Für wichtige Aktionen können Sie in die Symbolleiste des benutzerdefinierten Tabs eine benutzerdefinierte Aktionsschaltfläche einbinden, die entweder ein Textlabel oder ein benutzerdefiniertes Symbol haben kann. Das Symbol sollte 24 dp hoch und 24–48 dp breit sein.
Sie haben beispielsweise die Möglichkeit, der Symbolleiste eine benutzerdefinierte Freigabeaktion hinzuzufügen. Erstellen Sie dazu ein BroadcastReceiver-Element, das aufgerufen wird, wenn der Nutzer auf dem benutzerdefinierten Tab auf die Freigabeaktion klickt.
Registrieren Sie die BroadCastReceiver in der Datei AndroidManifest.xml:
<application …>
<receiver android:name=".ShareBroadcastReceiver" />
</application>
Fügen Sie dann einen neuen Kurs hinzu: ShareBroadcastReceiver. Extrahieren Sie in der Methode onReceive() die aktuell angezeigte URL aus dem Intent und lösen Sie einen Sende-Intent aus.
public class ShareBroadcastReceiver extends BroadcastReceiver {
@Override
public void onReceive(Context context, Intent intent) {
String url = intent.getDataString();
Intent sendIntent = new Intent();
sendIntent.setAction(Intent.ACTION_SEND);
sendIntent.putExtra(Intent.EXTRA_TEXT, url);
sendIntent.setType("text/plain");
Intent shareIntent = Intent.createChooser(sendIntent, null);
shareIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
context.startActivity(shareIntent);
}
}
Erstellen Sie nun eine PendingIntent für ShareBroadcast und registrieren Sie sie über setActionButton(). Übergeben Sie den ausstehenden Intent zusammen mit dem Symbol und der Beschreibung.
String shareDescription = getString(R.string.label_action_share);
Bitmap shareIcon = BitmapFactory.decodeResource(getResources(),
android.R.drawable.ic_menu_share);
// Create a PendingIntent to your BroadCastReceiver implementation
Intent actionIntent = new Intent(
this.getApplicationContext(), ShareBroadcastReceiver.class);
PendingIntent pendingIntent =
PendingIntent.getBroadcast(getApplicationContext(), 0 /* request code */, actionIntent, PendingIntent.FLAG_MUTABLE);
//Set the pendingIntent as the action to be performed when the button is clicked.
CustomTabsIntent intentBuilder = new CustomTabsIntent.Builder()
…
.setActionButton(shareIcon, shareDescription, pendingIntent)
.build();
Benutzerdefinierte Menüpunkte hinzufügen
Ein benutzerdefinierter Tab verfügt über bis zu fünf Standardaktionen, die vom Browser bereitgestellt werden: "Weiterleiten", "Seiteninfo", "Aktualisieren", "Auf Seite suchen" und "Im Browser öffnen". Sie können bis zu sieben weitere hinzufügen. Diese Menüpunkte werden zwischen der Symbolzeile und den vom Browser bereitgestellten Elementen eingefügt. (Siehe Abbildung unten.) Die tatsächliche Zahl hängt von der zugrunde liegenden Browserimplementierung ab. Bei Version 117 hat Chrome beispielsweise die Anzahl der Menüpunkte von fünf auf sieben erhöht. Daher sollten Sie die wichtigsten Elemente zuerst hinzufügen.
Über das Dreipunkt-Menü oben rechts können Sie auf Ihre benutzerdefinierten Aktionen zugreifen:
Um einen Menüpunkt hinzuzufügen, rufen Sie CustomTabsIntent.Builder.addMenuItem() mit einem Titel und einem PendingIntent auf. Wenn der Nutzer auf einen Menüpunkt tippt, löst der Browser PendingIntent aus.
CustomTabsIntent intent = new CustomTabsIntent.Builder()
...
.addMenuItem("Menu item 1", pendingIntent)
.addMenuItem("Menu item 2", pendingIntent)
.addMenuItem("Menu item 3", pendingIntent)
.addMenuItem("Menu item 4", pendingIntent)
.addMenuItem("Menu item 5", pendingIntent)
.build();
Schließen-Schaltfläche anpassen
Passen Sie die Schließen-Schaltfläche an, damit sich ein benutzerdefinierter Tab besser in Ihre App einfügen lässt. Wenn Sie möchten, dass benutzerdefinierte Tabs ein modales Dialogfeld angezeigt werden, verwenden Sie die Standardschaltfläche “X”. Wenn Sie möchten, dass die Nutzenden das Gefühl haben, dass der benutzerdefinierte Tab Teil des Anwendungsablaufs ist, verwenden Sie den Zurück-Pfeil.
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(
getResources(), R.drawable.ic_arrow_back));
Untere Symbolleiste hinzufügen
Die untere Symbolleiste ist eine sehr flexible Möglichkeit, einem benutzerdefinierten Tab weitere Funktionen hinzuzufügen.
Durch die Übergabe eines RemoteViews-Objekts an CustomTabIntent.Builder.setSecondaryToolbarViews() kann die untere Symbolleiste vollständig angepasst und dynamisch aktualisiert werden.
Deklarieren Sie zuerst ein Toolbar-Layout, indem Sie eine neue Layoutdatei (res/layout/custom_tab_toolbar.xml) erstellen:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ct_toolbar_next"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_margin="8dp"
android:padding="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Next" />
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ct_toolbar_previous"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_margin="8dp"
android:padding="8dp"
android:text="Previous" />
</LinearLayout>
Im nächsten Schritt wird in der Datei AndroidManifest.xml ein BroadcastReceiver registriert, der Interaktionen mit der Symbolleiste verarbeitet:
<application …>
<receiver android:name=".CustomTabBottomToolbarBroadcastReceiver" />
</application>
Implementieren Sie dann BroadcastReceiver, das alle Interaktionen mit der unteren Symbolleiste verarbeitet:
public class BottomToolbarBroadcastReceiver extends BroadcastReceiver {
@Override
public void onReceive(Context context, Intent intent) {
String url = intent.getDataString();
int remoteViewId = intent.getIntExtra(EXTRA_REMOTEVIEWS_CLICKED_ID, -1);
if (remoteViewId == R.id.ct_toolbar_previous) {
// handle previous
} else if (remoteViewId == R.id.ct_toolbar_next) {
// handle next
}
}
}
Registrieren Sie abschließend die Symbolleiste:
// Create the pending intent
Intent actionIntent = new Intent(
this.getApplicationContext(), BottomToolbarBroadcastReceiver.class);
PendingIntent pendingIntent =
PendingIntent.getBroadcast(getApplicationContext(), 0 /* request code */, actionIntent, PendingIntent.FLAG_MUTABLE);
// Pass the toolbar layout to the RemoteViews instance
RemoteViews secondaryToolbarViews = new RemoteViews(getPackageName(), R.layout.custom_tab_toolbar);
// All toolbar buttons
int[] clickableIds = {R.id.ct_toolbar_next, R.id.ct_toolbar_previous};
// Register the bottom toolbar when creating a new custom tab intent
CustomTabsIntent intent = new CustomTabsIntent.Builder()
.setSecondaryToolbarViews(secondaryToolbarViews, clickableIds, toolbarPendingIntent)
.build();
Lesezeichen und Schaltflächen zum Herunterladen
Die Lesezeichen und die Download-Schaltflächen im Dreipunkt-Menü sind standardmäßig aktiviert. Verwenden Sie den folgenden Code in CustomTabsIntent.Builder, um sie zu deaktivieren:
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()
.setBookmarksButtonEnabled(false)
.setDownloadButtonEnabled(false)
.build();
Nächster Teil: Informationen zum Beschleunigen des Ladens von Webinhalten auf einem benutzerdefinierten Tab