Z tego przewodnika dowiesz się, jak dodać do kart niestandardowych elementy interaktywne.
Włącz domyślne działanie udostępniania
Jeśli nie określisz niestandardowego działania udostępniania, warto włączyć domyślne działanie przeglądarki w rozszerzonym menu, by ułatwić użytkownikom udostępnianie linku do oglądanych treści:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);
Dodawanie niestandardowego przycisku działania
W przypadku ważnych działań pasek narzędzi karty niestandardowej umożliwia zintegrowanie niestandardowego przycisku działania, który może mieć etykietę tekstową lub ikonę niestandardową. Ikona powinna mieć wysokość 24–48 dp i szerokość 24–48 dp.
Możesz na przykład dodać niestandardowe działanie udostępniania do paska narzędzi. W tym celu utwórz element BroadcastReceiver, który będzie wywoływany, gdy użytkownik kliknie na karcie niestandardowej działanie udostępniania.
Zarejestruj BroadCastReceiver w pliku AndroidManifest.xml:
<application …>
<receiver android:name=".ShareBroadcastReceiver" />
</application>
Następnie dodaj nowe zajęcia: ShareBroadcastReceiver. W metodzie onReceive() wyodrębnij aktualnie wyświetlany adres URL z intencji i aktywuj intencję wysyłania.
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);
}
}
Teraz utwórz PendingIntent dla domeny ShareBroadcast i zarejestruj ją przez setActionButton(). Przekaż oczekującą intencję wraz z ikoną i opisem.
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();
Dodaj niestandardowe pozycje menu
Karta niestandardowa może mieć maksymalnie pięć domyślnych działań dostępnych w przeglądarce: „Przekaż dalej”, „Informacje o stronie”, „Odśwież”, „Znajdź na stronie” i „Otwórz w przeglądarce”. Możesz dodać jeszcze maksymalnie 7. Elementy menu będą wstawiane między wierszem ikony a elementami dostarczonymi przez przeglądarkę. (zobacz ilustrację poniżej). Rzeczywista liczba zależy od implementacji przeglądarki. (Na przykład w Chrome 117 liczba pozycji menu wzrosła z 5 do 7). Dlatego najlepiej na początku dodać te najważniejsze.
Działania niestandardowe znajdziesz w menu z 3 kropkami w prawym górnym rogu.
Aby dodać pozycję menu, wywołaj CustomTabsIntent.Builder.addMenuItem(), wpisując tytuł i PendingIntent. Gdy użytkownik kliknie element w menu, przeglądarka uruchomi PendingIntent.
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();
Dostosowywanie przycisku zamykania
Aby lepiej dopasować kartę niestandardową do sposobu działania aplikacji, dostosuj przycisk zamykania. Jeśli chcesz, by użytkownik poczuł, jak karty niestandardowe są okno modalne, użyj domyślnego przycisku “X”. Jeśli chcesz, aby użytkownik poczuł, że karta niestandardowa jest częścią przepływu aplikacji, użyj strzałki wstecz.
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(
getResources(), R.drawable.ic_arrow_back));
Dodaj dolny pasek narzędzi
Dolny pasek narzędzi to bardzo elastyczny sposób na dodawanie większej liczby funkcji do karty niestandardowej.
Przekazując obiekt RemoteViews do metody CustomTabIntent.Builder.setSecondaryToolbarViews(), dolny pasek narzędzi można w pełni dostosowywać i dynamicznie aktualizować.
Najpierw zadeklaruj układ paska narzędzi, tworząc nowy plik układu, res/layout/custom_tab_toolbar.xml:
<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>
Następnym krokiem jest zarejestrowanie w pliku AndroidManifest.xml elementu BroadcastReceiver, który obsługuje interakcje z paskiem narzędzi:
<application …>
<receiver android:name=".CustomTabBottomToolbarBroadcastReceiver" />
</application>
Następnie zaimplementuj interfejs BroadcastReceiver, który będzie obsługiwać wszystkie interakcje z dolnym paskiem narzędzi:
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
}
}
}
Na koniec zarejestruj pasek narzędzi:
// 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();
Zakładki i przyciski pobierania
Zakładki i przyciski pobierania w menu z 3 kropkami są domyślnie włączone. Aby je wyłączyć, użyj tego kodu w CustomTabsIntent.Builder:
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()
.setBookmarksButtonEnabled(false)
.setDownloadButtonEnabled(false)
.build();
Następny artykuł: przyspieszenie wczytywania treści internetowych na karcie niestandardowej.