Dodawanie niestandardowej interaktywności

Sebastian Benz

Z tego przewodnika dowiesz się, jak dodać niestandardową interaktywność do kart niestandardowych.

Włącz domyślne udostępnianie

Jeśli nie udostępniasz niestandardowej akcji udostępniania, warto włączyć domyślną akcję udostępniania w menu przepełnienia, aby ułatwić użytkownikom udostępnianie linku do treści, które widzą:

    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 przycisku działania niestandardowego, który może mieć etykietę tekstową lub niestandardową ikonę. Ikona powinna mieć wysokość 24 dp i szerokość 24–48 dp.

Możesz na przykład dodać do paska narzędzi niestandardowe działanie udostępniania. Aby to zrobić, utwórz funkcję BroadcastReceiver, która jest wywoływana, gdy użytkownik kliknie działanie udostępniania na karcie niestandardowej.

Zarejestruj BroadCastReceiver w pliku AndroidManifest.xml:

<application …>
  <receiver android:name=".ShareBroadcastReceiver" />
</application>

Następnie dodaj nową klasę: ShareBroadcastReceiver. W metodzie onReceive() wyodrębnij z intencji aktualnie wyświetlany adres URL i uaktywnij 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);
    }
}

Utwórz teraz klaster PendingIntent dla ShareBroadcast i zarejestruj go za pomocą setActionButton(). Przekaż oczekujący zamiar 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();

Dodawanie niestandardowych pozycji menu

Karta niestandardowa ma do 5 domyślnych działań udostępnianych przez przeglądarkę: „Dalej”, „Informacje o stronie”, „Odśwież”, „Znajdź na stronie” i „Otwórz w przeglądarce”. Możesz też dodać maksymalnie 7 dodatkowych. Te elementy menu zostaną wstawione między wiersz ikon a elementy udostępniane przez przeglądarkę. (patrz obraz poniżej). Rzeczywista liczba zależy od implementacji przeglądarki. (na przykład w wersji 117 Chrome zwiększyliśmy liczbę elementów menu z 5 do 7). Dlatego najlepiej najpierw dodać najważniejsze elementy.

Do działań niestandardowych możesz uzyskać dostęp w menu z 3 kropkami w prawym górnym rogu:

Aby dodać pozycję menu, wywołaj funkcję CustomTabsIntent.Builder.addMenuItem() z nazwą i parametrem PendingIntent. Gdy użytkownik kliknie element menu, przeglądarka wywoła 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 Zamknij

Aby lepiej dopasować kartę niestandardową do działania aplikacji, dostosuj przycisk Zamknij. Jeśli chcesz, aby użytkownik postrzegał karty niestandardowe jako okno modalne, użyj domyślnego przycisku “X”. Jeśli chcesz, aby użytkownik miał wrażenie, że karta niestandardowa jest częścią aplikacji, użyj strzałki wstecz.

CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(
    getResources(), R.drawable.ic_arrow_back));

Dodawanie dolnego paska narzędzi

Dolna linia narzędzi to bardzo elastyczny sposób na dodanie większej funkcjonalności do karty niestandardowej.

Przekazując obiekt RemoteViews do funkcji CustomTabIntent.Builder.setSecondaryToolbarViews(), możesz w pełni dostosować pasek narzędzi dolny i dynamicznie go 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>

Kolejnym krokiem jest zarejestrowanie w pliku AndroidManifest.xml obiektu BroadcastReceiver, który obsługuje interakcje z paskiem narzędzi:

<application …>
  <receiver android:name=".CustomTabBottomToolbarBroadcastReceiver" />
</application>

Następnie zaimplementuj element 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

Domyślnie w menu z 3 kropkami są włączone przyciski zakładek i pobierania. Aby je wyłączyć, użyj tego kodu w sekcji CustomTabsIntent.Builder:

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()
    .setBookmarksButtonEnabled(false)
    .setDownloadButtonEnabled(false)
    .build();

Kolejny krok: dowiedz się, jak przyspieszyć wczytywanie treści internetowych w karcie niestandardowej.