הוספת אינטראקטיביות מותאמת אישית

במדריך הזה מוסבר איך להוסיף אינטראקטיביות מותאמת אישית לכרטיסיות מותאמות אישית.

הפעלת פעולת השיתוף שמוגדרת כברירת מחדל

אם לא תספקו פעולת שיתוף מותאמת אישית, כדאי להפעיל את פעולת השיתוף שמוגדרת כברירת מחדל בדפדפן באפשרויות הנוספות כדי לאפשר למשתמשים לשתף בקלות קישור לתוכן שהם רואים:

    CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
    intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);

הוספה של לחצן פעולה מותאמת אישית

כדי לבצע פעולות חשובות, סרגל הכלים של הכרטיסייה המותאמת אישית מאפשר לשלב לחצן פעולה מותאם אישית, שיכול לכלול תווית טקסט או סמל מותאם אישית. הסמל צריך להיות בגובה של 24dp וברוחב של 24-48dp.

כרטיסייה בהתאמה אישית עם פעולת שיתוף מותאמת אישית

לדוגמה, אפשר להוסיף פעולת שיתוף מותאמת אישית לסרגל הכלים. לשם כך, צריך ליצור BroadcastReceiver שתתבצע קריאה כשהמשתמש ילחץ על פעולת השיתוף בכרטיסייה 'מותאם אישית'.

יש לרשום את BroadCastReceiver בקובץ AndroidManifest.xml:

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

לאחר מכן אפשר להוסיף כיתה חדשה, ShareBroadcastReceiver. בשיטה onReceive(), מחלצים את כתובת ה-URL שמוצגת כרגע מה-Intent ומפעילים כוונת שליחה.

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

עכשיו צריך ליצור PendingIntent עבור ShareBroadcast ולרשום אותו דרך setActionButton(). מעבירים את ההגדרה 'Intent' בהמתנה יחד עם הסמל והתיאור.

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

הוספת אפשרויות לתפריט בהתאמה אישית

לכרטיסיית מותאמת אישית יש עד חמש פעולות ברירת מחדל שסופקו על ידי הדפדפן: 'העברה', 'פרטי דף', 'רענון', 'חיפוש בדף' ו'פתיחה בדפדפן'. בנוסף, אפשר להוסיף עד 7 נושאים נוספים. האפשרויות האלה בתפריט יתווספו בין שורת הסמל לפריטים שסופקו על ידי הדפדפן. (ראו תמונה בהמשך). המספר בפועל תלוי בהטמעה של הדפדפן הבסיסי. (לדוגמה, בגרסה 117 Chrome הגדיל את מספר האפשרויות בתפריט מחמש לשבע). לכן, מומלץ להוסיף את הפריטים החשובים ביותר תחילה.

אפשר לגשת לפעולות המותאמות אישית דרך תפריט שלוש הנקודות בפינה השמאלית העליונה:

כרטיסייה מותאמת אישית עם חמש אפשרויות בתפריט.

כדי להוסיף אפשרות לתפריט, קוראים לפונקציה CustomTabsIntent.Builder.addMenuItem() עם שם ועם PendingIntent. כשהמשתמש יקיש על אפשרות בתפריט, הדפדפן יפעיל את 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();

התאמה אישית של לחצן הסגירה

כדי להתאים כרטיסייה מותאמת אישית לזרימה של האפליקציה, צריך להתאים אישית את לחצן הסגירה. כדי שהמשתמשים ירגישו ש'כרטיסיות מותאמות אישית' הן תיבת דו-שיח של חלון, אפשר להשתמש בלחצן ברירת המחדל “X”. אם רוצים שהמשתמש ירגיש שהכרטיסייה 'בהתאמה אישית' היא חלק מהתהליך של האפליקציה, משתמשים בחץ החזרה.

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

הוספת סרגל כלים תחתון

סרגל הכלים התחתון הוא דרך גמישה מאוד להוספת פונקציונליות לכרטיסיית 'מותאם אישית'.

כרטיסייה מותאמת אישית עם סרגל כלים תחתון

כשמעבירים אובייקט RemoteViews אל CustomTabIntent.Builder.setSecondaryToolbarViews(), אפשר להתאים אישית את סרגל הכלים התחתון ולעדכן באופן דינמי את סרגל הכלים התחתון.

קודם כול, מצהירים על פריסת סרגל הכלים על ידי יצירת קובץ פריסה חדש, 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>

בשלב הבא צריך לרשום בקובץ AndroidManifest.xml BroadcastReceiver, שמטפל באינטראקציות עם סרגל הכלים:

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

לאחר מכן מטמיעים את BroadcastReceiver, שיטפל בכל האינטראקציות עם סרגל הכלים התחתון:

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
        }
    }
}

לסיום, רושמים את סרגל הכלים:

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

סימניות ולחצני הורדה

לחצני הסימניות וההורדה בתפריט שלוש הנקודות מופעלים כברירת מחדל. כדי להשבית אותן, צריך לפעול לפי השלבים הבאים הקוד בCustomTabsIntent.Builder:

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

השלב הבא: כך אפשר להאיץ את הטעינה של תוכן אינטרנט בכרטיסייה 'מותאם אישית'.