Implementation guide

a teljes példa elérhető a GitHub sample alkalmazásban. Újrafelhasználható osztályokat tartalmaz a felhasználói felület testreszabásához, a háttérszolgáltatáshoz való csatlakozáshoz, valamint mind az alkalmazás, mind az egyéni lap tevékenység életciklusának kezeléséhez.

Ha követi az ezen az oldalon található útmutatást, nagyszerű integrációt hozhat létre.

az Egyéni lapok integrációjának első lépése az AndroidX böngésző könyvtár hozzáadása a projekthez. Nyissa meg a app/build.gradle fájlt, és adja hozzá a böngésző könyvtárat a függőségek szakaszhoz.

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

miután a böngésző könyvtárat hozzáadta a projekthez, kétféle testreszabás lehetséges:

  • A felhasználói felület testreszabása és az egyéni lapokkal való interakció.
  • az oldal gyorsabb betöltése és az alkalmazás életben tartása.

A felhasználói felület testreszabása a CustomTabsIntent és a CustomTabsIntent.Builder osztályok használatával történik; a teljesítmény javítása a CustomTabsClient használatával érhető el az Egyéni lapok Szolgáltatáshoz való csatlakozáshoz, melegítse fel a böngészőt, és tudassa vele, hogy mely URL-ek lesznek megnyitva.

egyéni lap megnyitása #

a CustomTabsIntent.Builder egyéni lap konfigurálására használható. Ha kész, hívja CustomTabsIntent.Builder.buildhogy hozzon létre egy CustomTabsIntentés indítsa el a kívánt Url-t a CustomTabsIntent.launchUrl.

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

állítsa be a címsor színét #

az Egyéni lapok egyik legfontosabb (és legegyszerűbb megvalósítása) szempontja az, hogy megváltoztathatja a címsor színét, hogy összhangban legyen az alkalmazás témájával.

az alábbi részlet megváltoztatja a címsor háttérszínét. a colorInt egy int, amely megadja a Colorértéket.

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

egyéni Művelet Gomb konfigurálása #

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

a Tumblr alkalmazás művelet gombjának képernyőképe

az alkalmazás fejlesztőjeként teljes mértékben ellenőrizheti a böngésző lapon a felhasználók számára bemutatott művelet gombot.

a legtöbb esetben ez egy elsődleges művelet, például Megosztás, vagy egy másik gyakori tevékenység, amelyet a felhasználók végrehajtanak.

a Művelet Gomb egy csomagként jelenik meg a Művelet Gomb ikonjával és egy PendingIntent amelyet a böngésző hív meg, amikor a felhasználó megnyomja a művelet gombot. Az ikon magassága currentty 24dp, szélessége 24-48 dp.

Ez lehet testre hívásával CustomTabsIntentBuilder#setActionButton:

  • icon egy Bitmap kell használni, mint a kép forrása a művelet gombot.
  • descriptionegy String használható a gomb hozzáférhető leírásaként.
  • pendingIntentegy PendingIntent a Művelet Gomb vagy menüpont megérintésekor történő indításhoz. A böngésző hív PendingIntent#send a csapok hozzáadása után az url adatként. Az ügyfélalkalmazás hívhatja Intent#getDataString az url megszerzéséhez.
  • tint egy logikai érték, amely meghatározza, hogy az Action gombot színezni kell-e.

egyéni menü beállítása #

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

a Twitter alkalmazás menüjének képernyőképe

a böngésző átfogó menüvel rendelkezik, amelyet a felhasználók gyakran hajtanak végre a böngészőben, azonban előfordulhat, hogy nem relevánsak az alkalmazás kontextusában.

az Egyéni lapok a böngésző által biztosított alapértelmezett műveleteket tartalmazzák. Ezek a műveletek tartalmazhatnak olyan elemeket, mint a “Továbbítás”, “Oldalinformáció”, “Frissítés”, “Keresés az oldalon” vagy “Megnyitás a böngészőben”.

fejlesztőként legfeljebb öt menüpontot adhat hozzá és szabhat testre, amelyek az ikonsor és a lábelemek között jelennek meg.

egy menüpontot ad hozzá a CustomTabsIntent.Builder#addMenuItem címmel és egy PendingIntent a böngésző az Ön nevében hív, amikor a felhasználó megérinti az elemet paraméterként.

egyéni be-és kilépési animációk konfigurálása #

sok Android-alkalmazás egyéni Nézetbejárási és kilépési animációkat használ az Android-tevékenységek közötti átmenet során. Az Egyéni lapok nem különböznek egymástól, megváltoztathatja a belépési és kilépési animációkat (amikor a felhasználó megnyomja a Vissza gombot), hogy azok összhangban legyenek az alkalmazás többi részével.

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);

melegítse fel a böngészőt, hogy az oldalak gyorsabban töltődjenek be #

alapértelmezés szerint a CustomTabsIntent#launchUrl meghívásakor a böngésző felpörög, és elindítja az URL-t. Ez értékes időt vehet igénybe, és hatással lehet a simaság érzékelésére.

úgy gondoljuk, hogy a felhasználók szinte azonnali élményt igényelnek, ezért olyan szolgáltatást nyújtottunk, amelyhez az alkalmazás csatlakozhat, és megmondhatja a böngészőnek és a natív összetevőinek, hogy melegedjen fel. Az Egyéni lapok lehetőséget nyújtanak Önnek, a fejlesztőnek arra is, hogy elmondja a böngészőnek a felhasználó által meglátogatott weboldalak valószínű készletét. A böngészők ezután képesek lesznek végrehajtani:

  • a fő tartomány DNS előfelbontása
  • a legvalószínűbb alforrások DNS előfelbontása
  • a célhoz való előzetes csatlakozás, beleértve a HTTPS / TLS tárgyalásokat.

a böngésző bemelegítésének folyamata a következő:

  • használja a CustomTabsClient#bindCustomTabsService lehetőséget a Szolgáltatáshoz való csatlakozáshoz.
  • a szolgáltatás csatlakoztatása után hívja aCustomTabsClient#warmup parancsot a böngésző színfalak mögötti elindításához.
  • hívásCustomTabsClient#newSession új munkamenet létrehozásához. Ez a munkamenet az API-hoz intézett összes kéréshez használható.
  • opcionálisan csatoljon egyCustomTabsCallback paraméterként új munkamenet létrehozásakor, hogy tudja, hogy egy oldal betöltődött.
  • mondja meg a böngészőnek, hogy a felhasználó mely oldalakat fogja betölteni a CustomTabsSession#mayLaunchUrl
  • hívja a CustomTabsIntent.Builder konstruktort, amely paraméterként átadja a létrehozott CustomTabsSession értéket.

Csatlakozás az Egyéni lapok szolgáltatásához #

aCustomTabsClient#bindCustomTabsService módszer megszünteti az Egyéni lapok szolgáltatásához való csatlakozás összetettségét.

Hozzon létre egy osztályt, amely kiterjeszti aCustomTabsServiceConnection és használja aonCustomTabsServiceConnected példányt aCustomTabsClient. Erre a példányra a következő lépésekben lesz szükség.

// 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);

melegítse fel a böngésző folyamatát #

boolean warmup(long flags)

felmelegíti a böngésző folyamatát és betölti a natív könyvtárakat. A bemelegítés aszinkron, a visszatérési érték jelzi, hogy a kérést elfogadták-e. Több sikeres hívás is visszatér true.

visszaadjatrue ha sikeres.

Új lap létrehozása session #

boolean newSession(CustomTabsCallback callback)

a munkamenet a következő hívásokban használatos a maylaunchurl hívás, a CustomTabsIntent és a generált lap összekapcsolására. Az itt megadott visszahívás a létrehozott munkamenethez kapcsolódik. A létrehozott munkamenet frissítései (lásd alább az Egyéni lapok visszahívását)szintén ezen a visszahíváson keresztül érkeznek. Visszaadja, hogy egy munkamenet sikeresen jött-e létre. Több hívás ugyanazzal a CustomTabsCallback vagy null értékkel hamis értéket ad vissza.

mondja el a böngészőnek, hogy a felhasználó milyen URL-eket nyit meg valószínűleg #

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

Ez a CustomTabsSession módszer megmondja a böngészőnek a valószínű jövőbeli navigációt egy URL-re. A warmup() módszert először a legjobb gyakorlatnak kell nevezni. Először a legvalószínűbb URL-t kell megadni. Opcionálisan más valószínű URL-ek listája is megadható. Kevésbé valószínűnek tekintik őket, mint az elsőt, és csökkenő prioritási sorrendbe kell sorolni őket. Ezeket a további URL-eket figyelmen kívül lehet hagyni. Minden korábbi hívás erre a módszerre megfosztásra kerül. Visszaadja, hogy a művelet sikeresen befejeződött-e.

Custom Tabs Connection Callback #

void onNavigationEvent(int navigationEvent, Bundle extras)

meghívásra kerül, amikor navigációs esemény történik az egyéni lapon. A navigationEvent int egyike annak a 6 értéknek, amely meghatározza az oldal állapotát. További információkért lásd alább.

/**
* 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;

mi történik, ha a felhasználónak nincs telepítve olyan böngészője, amely támogatja az egyéni lapokat? #

Az egyéni lapokat a legtöbb Android böngésző támogatja. Mindazonáltal, mivel egy ACTION_VIEW szándék a legfontosabb extrákkal a felhasználói felület testreszabásához megnyílik a rendszer böngészőjében, vagy a felhasználó alapértelmezett böngészőjében, ha az Egyéni lapok nem támogatottak.

Ha a felhasználónak van egy böngészője, amely támogatja az egyéni lapot, és ez az alapértelmezett böngésző, akkor automatikusan felveszi az extrákat és bemutat egy testreszabott felhasználói felületet.

Hogyan ellenőrizhetem, hogy az Android-eszköz rendelkezik-e olyan böngészővel, amely támogatja az egyéni lapot? #

lehetőség van a PackageManager lekérdezésére Android készülék alkalmazások, amelyek képesek kezelni az Egyéni lapok. Olyan alkalmazásokat keresünk, amelyek képesek kezelni a http szándékokat, majd ellenőrizzük, hogy ezek az alkalmazások is támogatják-e az Egyéni lapok szolgáltatást:

/**
* 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;
}

az Android 11 bevezette a csomag visiblity változásait. Ha Androidos alkalmazása a 30-as vagy annál magasabb API-szintet célozza meg, akkor a queries szakasz hozzáadása a AndroidManifest.xml – hez szükséges, különben a fenti kódrészlet nem ad eredményt:

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

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.