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

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

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