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

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 שמוצגת כרגע ומפעילים כוונה לשליחה.

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

השלב הבא: איך אפשר לזרז את טעינת תוכן האינטרנט בכרטיסייה בהתאמה אישית