In dieser Anleitung wird erläutert, wie Sie benutzerdefinierte Tabs benutzerdefinierte Interaktionen hinzufügen.
Standardaktion zum Teilen aktivieren
Wenn Sie keine benutzerdefinierte Aktion zum Teilen zur Verfügung stellen, empfiehlt es sich, die standardmäßige Aktion zum Teilen des Browsers im Dreipunkt-Menü zu aktivieren, damit Nutzer einen Link zu den angezeigten Inhalten einfacher teilen können:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);
Benutzerdefinierte Aktionsschaltfläche hinzufügen
Bei wichtigen Aktionen können Sie in die Symbolleiste des benutzerdefinierten Tabs eine Schaltfläche für benutzerdefinierte Aktionen einbinden. Diese kann entweder eine Textbeschriftung oder ein benutzerdefiniertes Symbol haben. Das Symbol sollte 24 dp hoch und 24–48 dp breit sein.
Beispielsweise können Sie der Symbolleiste eine benutzerdefinierte Aktion zum Teilen hinzufügen. Dazu erstellen Sie eine BroadcastReceiver, die aufgerufen wird, wenn der Nutzer auf dem benutzerdefinierten Tab auf die Freigabeaktion klickt.
Registrieren Sie 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
Auf einem benutzerdefinierten Tab sind bis zu fünf Standardaktionen vom Browser verfügbar: „Weiterleiten“, „Seiteninformationen“, „Aktualisieren“ und „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 Anzahl hängt von der zugrunde liegenden Browserimplementierung ab. In Version 117 wurde beispielsweise die Anzahl der Menüelemente 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:
Wenn Sie einen Artikel auf der Speisekarte hinzufügen möchten, rufen Sie CustomTabsIntent.Builder.addMenuItem() mit Titel und 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
Passe die Schließen-Schaltfläche an, damit sich ein benutzerdefinierter Tab besser in deine App einfügt. Wenn Sie möchten, dass benutzerdefinierte Tabs ein modales Dialogfeld sind, verwenden Sie die Standardschaltfläche “X”. Wenn Sie möchten, dass der benutzerdefinierte Tab Teil des Anwendungsflusses ist, verwenden Sie den Zurückpfeil.
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(
getResources(), R.drawable.ic_arrow_back));
Symbolleiste unten hinzufügen
Die untere Symbolleiste bietet 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 Symbolleistenlayout, indem Sie die 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 registrieren Sie ein BroadcastReceiver, das Interaktionen über die Symbolleiste verarbeitet, in der Datei AndroidManifest.xml:
<application …>
<receiver android:name=".CustomTabBottomToolbarBroadcastReceiver" />
</application>
Implementieren Sie dann das BroadcastReceiver-Element, 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 zum Schluss die Toolbar:
// 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 Schaltflächen zum Herunterladen im Dreipunkt-Menü sind standardmäßig aktiviert. So deaktivieren Sie sie:
Code auf CustomTabsIntent.Builder:
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()
.setBookmarksButtonEnabled(false)
.setDownloadButtonEnabled(false)
.build();
Nächster Schritt: Informationen zum Beschleunigen des Ladens von Webinhalten auf einem benutzerdefinierten Tab