Przewodnik po implementacji

kompletny przykład jest dostępny na przykładowej aplikacji GitHub. Zawiera klasy wielokrotnego użytku, aby dostosować interfejs użytkownika, połączyć się z usługą w tle i obsługiwać cykl życia zarówno aplikacji, jak i aktywności na karcie niestandardowej.

jeśli zastosujesz się do wskazówek z tej strony, będziesz w stanie stworzyć świetną integrację.

pierwszym krokiem do integracji niestandardowych kart jest dodanie Biblioteki przeglądarki AndroidX do projektu. Otwórz plik app/build.gradle I dodaj bibliotekę przeglądarki do sekcji zależności.

dependencies {
...
implementation "androidx.browser:browser:1.3.0"
}

Po dodaniu Biblioteki przeglądarki do projektu istnieją dwa zestawy możliwych dostosowań:

  • Dostosowywanie interfejsu użytkownika i interakcja z niestandardowymi kartami.
  • szybsze ładowanie strony i utrzymanie aplikacji przy życiu.

dostosowania interfejsu użytkownika są wykonywane za pomocąCustomTabsIntent ICustomTabsIntent.Builder klas; poprawa wydajności jest osiągana za pomocą CustomTabsClient, aby połączyć się z usługą niestandardowych kart, rozgrzej przeglądarkę i poinformuj ją, które adresy URL zostaną otwarte.

otwarcie niestandardowej karty #

aCustomTabsIntent.Builder może być użyte do skonfigurowania niestandardowej karty. Gdy będziesz gotowy, zadzwoń do CustomTabsIntent.Builder.build, aby utworzyć CustomTabsIntent I uruchom żądany adres Url za pomocą CustomTabsIntent.launchUrl.

String url = ¨https://paul.kinlan.me/¨;
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
CustomTabsIntent customTabsIntent = builder.build();
customTabsIntent.launchUrl(this, Uri.parse(url));

Konfiguracja koloru paska adresu #

jednym z najważniejszych (i najprostszych do wdrożenia) aspektów niestandardowych kart jest możliwość zmiany koloru paska adresu, aby był zgodny z motywem aplikacji.

poniższy fragment zmienia kolor tła paska adresu. colorInt jest int, który określa Color.

int coolorInt = Color.parseColor("#FF0000"); //red
builder.setToolbarColor(colorInt);

Skonfiguruj niestandardowy przycisk akcji # 

builder.setActionButton(icon, description, pendingIntent, tint);

zrzut ekranu przycisku akcji w aplikacji Tumblr

jako twórca aplikacji masz pełną kontrolę nad przyciskiem akcji, który jest wyświetlany użytkownikom w przeglądarce tab.

w większości przypadków będzie to podstawowe działanie, takie jak udostępnianie lub inna wspólna aktywność, którą wykonają użytkownicy.

przycisk akcji jest reprezentowany jako pakiet z ikoną przycisku akcji iPendingIntent, który zostanie wywołany przez przeglądarkę, gdy użytkownik naciśnie przycisk akcji. Ikona ma wysokość 24dp i szerokość 24-48 dp.

można go dostosować, wywołującCustomTabsIntentBuilder#setActionButton:

  • icon jestBitmap, który ma być używany jako źródło obrazu dla przycisku akcji.
  • description jestString być używany jako dostępny opis przycisku.
  • pendingIntent toPendingIntent do uruchomienia po naciśnięciu przycisku akcji lub elementu menu. Przeglądarka będzie wywoływać PendingIntent#send po dodaniu adresu url jako danych. Aplikacja kliencka może wywołać Intent#getDataString, aby uzyskać adres url.
  • tint jest wartością logiczną, która określa, czy przycisk akcji ma być przyciemniony.

Konfiguracja niestandardowego menu # 

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

zrzut ekranu menu w aplikacji Twitter

przeglądarka ma obszerne menu działań, które użytkownicy będą często wykonywać w przeglądarce, jednak mogą one nie być istotne dla kontekstu aplikacji.

niestandardowe karty będą miały zestaw domyślnych działań dostarczonych przez przeglądarkę. Działania te mogą obejmować elementy takie jak” przekaż”,” informacje o stronie”,” odśwież”,” Znajdź na stronie „lub”Otwórz w przeglądarce”.

jako programista możesz dodawać i dostosowywać do pięciu elementów menu, które pojawią się między wierszem ikon a elementami stóp.

element menu jest dodawany przez wywołanieCustomTabsIntent.Builder#addMenuItem z tytułem IPendingIntent ta przeglądarka wywoła w Twoim imieniu, gdy użytkownik dotknie elementu są przekazywane jako parametry.

Konfigurowanie niestandardowych animacji wejścia i wyjścia #

wiele aplikacji na Androida używa niestandardowych animacji wejścia i wyjścia widoku podczas przechodzenia między działaniami na Androidzie. Niestandardowe karty nie różnią się od siebie, możesz zmienić animacje wejścia i wyjścia (gdy użytkownik naciśnie przycisk Wstecz), aby zachować ich spójność z resztą aplikacji.

builder.setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left);
builder.setExitAnimations(this, R.anim.slide_in_left, R.anim.slide_out_right);

rozgrzej przeglądarkę, aby strony ładowały się szybciej #

domyślnie, gdy zostanie wywołanyCustomTabsIntent#launchUrl, uruchomi przeglądarkę i uruchomi adres URL. Może to zająć cenny czas i wpłynąć na postrzeganie gładkości.

uważamy, że użytkownicy wymagają niemal natychmiastowego doświadczenia, dlatego zapewniliśmy usługę, z którą Twoja aplikacja może się połączyć i powiedzieć przeglądarce i jej rodzimym komponentom, aby się rozgrzały. Niestandardowe karty zapewniają również możliwość dla Ciebie, deweloper powiedzieć przeglądarce prawdopodobny zestaw stron internetowych użytkownik odwiedzi. Przeglądarki będą wtedy w stanie wykonać:

  • DNS pre-resolution głównej domeny
  • DNS Pre-resolution najbardziej prawdopodobnych zasobów podrzędnych
  • Pre-connection to the destination including HTTPS / TLS negotiation.

proces rozgrzewania przeglądarki wygląda następująco:

  • użyjCustomTabsClient#bindCustomTabsService aby połączyć się z usługą.
  • Po podłączeniu usługi Zadzwoń do CustomTabsClient#warmup, aby uruchomić przeglądarkę za kulisami.
  • wywołanieCustomTabsClient#newSession, aby utworzyć nową sesję. Ta sesja jest używana dla wszystkich żądań do API.
  • Opcjonalnie, podczas tworzenia nowej sesji, Dołącz parametr CustomTabsCallback, aby wiedzieć, że strona została załadowana.
  • powiedz przeglądarce, które strony użytkownik może załadować za pomocąCustomTabsSession#mayLaunchUrl
  • wywołanie konstruktoraCustomTabsIntent.Builder przekazując jako parametr utworzonyCustomTabsSession.

Połącz się z usługą niestandardowych kart #

metodaCustomTabsClient#bindCustomTabsService usuwa złożoność połączenia z usługą niestandardowych kart.

Utwórz klasę, która rozszerzaCustomTabsServiceConnection I użyjonCustomTabsServiceConnected, aby uzyskać instancjęCustomTabsClient. Ta instancja będzie potrzebna w kolejnych krokach.

// Package name for the Chrome channel the client wants to connect to. This
// depends on the channel name.
// Stable = com.android.chrome
// Beta = com.chrome.beta
// Dev = com.chrome.dev
public static final String CUSTOM_TAB_PACKAGE_NAME = "com.android.chrome"; // Change when in stable
CustomTabsServiceConnection connection = new CustomTabsServiceConnection() {
@Override
public void onCustomTabsServiceConnected(ComponentName name, CustomTabsClient client) {
mCustomTabsClient = client;
}
@Override
public void onServiceDisconnected(ComponentName name) {
}
};
boolean ok = CustomTabsClient.bindCustomTabsService(this, mPackageNameToBind, connection);

rozgrzewa proces przeglądarki #

boolean warmup(long flags)

rozgrzewa proces przeglądarki i ładuje natywne biblioteki. Warmup jest asynchroniczny, wartość zwracana wskazuje, czy żądanie zostało zaakceptowane. Wiele pomyślnych połączeń również zwróci true.

zwracatrue, jeśli się powiedzie.

Utwórz nową kartę sesja #

boolean newSession(CustomTabsCallback callback)

sesja jest używana w kolejnych wywołaniach, aby połączyć wywołanie mayLaunchUrl, CustomTabsIntent i kartę wygenerowane do siebie. Wywołanie zwrotne podane tutaj jest powiązane z utworzoną sesją. Wszelkie aktualizacje dla utworzonej sesji (Zobacz niestandardowe karty wywołania zwrotnego poniżej) są również odbierane za pośrednictwem tego wywołania zwrotnego. Zwraca, czy sesja została utworzona pomyślnie. Wiele wywołań z tym samym CustomTabsCallback lub wartością null zwróci false.

powiedz przeglądarce, jakie adresy URL użytkownik prawdopodobnie otworzy #

boolean mayLaunchUrl(Uri url, Bundle extras, List<Bundle> otherLikelyBundles)

ta metoda CustomTabsSession informuje przeglądarkę o prawdopodobnej przyszłej nawigacji do adresu URL. Metoda warmup() powinna być najpierw wywołana jako najlepsza praktyka. Najpierw należy podać najbardziej prawdopodobny adres URL. Opcjonalnie można podać listę innych prawdopodobnych adresów URL. Są one traktowane jako mniej prawdopodobne Od pierwszego i muszą być sortowane w kolejności malejącej. Te dodatkowe adresy URL mogą być ignorowane. Wszystkie poprzednie wywołania tej metody zostaną pozbawione. Zwraca, czy operacja zakończyła się pomyślnie.

Custom Tabs Connection Callback #

void onNavigationEvent(int navigationEvent, Bundle extras)

zostanie wywołany, gdy dojdzie do zdarzenia nawigacyjnego na karcie custom. navigationEvent int jest jedną z 6 wartości określających stan, w którym znajduje się strona. Zobacz poniżej, aby uzyskać więcej informacji.

/**
* Sent when the tab has started loading a page.
*/
public static final int NAVIGATION_STARTED = 1;
/**
* Sent when the tab has finished loading a page.
*/
public static final int NAVIGATION_FINISHED = 2;
/**
* Sent when the tab couldn't finish loading due to a failure.
*/
public static final int NAVIGATION_FAILED = 3;
/**
* Sent when loading was aborted by a user action before it finishes like clicking on a link
* or refreshing the page.
*/
public static final int NAVIGATION_ABORTED = 4;
/**
* Sent when the tab becomes visible.
*/
public static final int TAB_SHOWN = 5;
/**
* Sent when the tab becomes hidden.
*/
public static final int TAB_HIDDEN = 6;

co się stanie, jeśli użytkownik nie ma zainstalowanej przeglądarki obsługującej niestandardowe karty? #

niestandardowe karty jest obsługiwane przez większość przeglądarek Android. Niemniej jednak, ponieważ używaACTION_VIEW intencji z kluczowymi dodatkami, aby dostosować interfejs użytkownika, otworzy się w przeglądarce systemowej lub domyślnej przeglądarce użytkownika, jeśli niestandardowe karty nie są obsługiwane.

Jeśli Użytkownik ma zainstalowaną przeglądarkę obsługującą zakładkę niestandardową i jest to domyślna przeglądarka, automatycznie pobierze dodatki i wyświetli dostosowany interfejs użytkownika.

Jak mogę sprawdzić, czy urządzenie z Androidem ma przeglądarkę, która obsługuje niestandardową kartę? #

możliwe jest użyciePackageManager do zapytania Urządzenia z systemem Android O aplikacje, które mogą obsługiwać niestandardowe karty. Wyszukujemy aplikacje, które są w stanie obsłużyć intencjehttp, a następnie sprawdzamy, czy te aplikacje również deklarują wsparcie dla usługi Custom Tabs:

/**
* Returns a list of packages that support Custom Tabs.
*/
public static ArrayList<ResolveInfo> getCustomTabsPackages(Context context) {
PackageManager pm = context.getPackageManager();
// Get default VIEW intent handler.
Intent activityIntent = new Intent()
.setAction(Intent.ACTION_VIEW)
.addCategory(Intent.CATEGORY_BROWSABLE)
.setData(Uri.fromParts("http", "", null));
// Get all apps that can handle VIEW intents.
List<ResolveInfo> resolvedActivityList = pm.queryIntentActivities(activityIntent, 0);
ArrayList<ResolveInfo> packagesSupportingCustomTabs = new ArrayList<>();
for (ResolveInfo info : resolvedActivityList) {
Intent serviceIntent = new Intent();
serviceIntent.setAction(ACTION_CUSTOM_TABS_CONNECTION);
serviceIntent.setPackage(info.activityInfo.packageName);
// Check if this package also resolves the Custom Tabs service.
if (pm.resolveService(serviceIntent, 0) != null) {
packagesSupportingCustomTabs.add(info);
}
}
return packagesSupportingCustomTabs;
}

Android 11 wprowadził zmiany w widoczności pakietu. Jeśli Twoja aplikacja na Androida kieruje API na poziom 30 lub wyższy, konieczne jest dodanie sekcji queries do AndroidManifest.xml, w przeciwnym razie powyższy fragment kodu nie zwróci wyników:

<queries>
<intent>
<action android:name=
"android.support.customtabs.action.CustomTabsService" />
</intent>
</queries>

admin

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.