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

Sebastian Benz

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

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

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

    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 ומפעילים 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();

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

כרטיסייה מותאמת אישית כוללת עד חמש פעולות ברירת מחדל שסופקו על ידי הדפדפן: 'העברה', 'פרטי הדף', 'רענון', 'חיפוש בדף' ו'פתיחה בדפדפן'. בנוסף, אפשר להוסיף עד שבעה נוספים. האפשרויות האלה בתפריט יתווספו בין שורת הסמלים לבין הפריטים שסופקו על ידי הדפדפן. (תמונה שמופיעה בהמשך). המספר בפועל תלוי בהטמעה של הדפדפן. (לדוגמה, בגרסה 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>

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

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

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

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