إضافة تفاعل مخصّص

يشرح هذا الدليل كيفية إضافة تفاعل مخصّص إلى "علامات التبويب المخصَّصة".

تفعيل إجراء المشاركة التلقائي

إذا لم تقدِّم إجراءً مخصّصًا للمشاركة، ننصحك بتفعيل إجراء المشاركة التلقائي للمتصفّح في قائمة الخيارات الإضافية لتسهيل مشاركة المستخدمين لرابط يؤدي إلى المحتوى الذي يشاهدونه:

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

إضافة زرّ إجراء مخصّص

بالنسبة إلى الإجراءات المهمة، يتيح لك شريط الأدوات في علامة التبويب المخصّصة دمج زر إجراء مخصّص يمكن أن يتضمّن تصنيفًا نصيًا أو رمزًا مخصّصًا. يجب أن يكون ارتفاع الرمز 24 بكسل مستقل الكثافة وأن يتراوح عرضه بين 24 و48 بكسل مستقل الكثافة (dp).

علامة تبويب مخصّصة تتضمّن إجراء مخصّصًا للمشاركة

على سبيل المثال، يمكنك إضافة إجراء مشاركة مخصص إلى شريط الأدوات. لإجراء ذلك، يمكنك إنشاء 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(). أرسِل النية المعلّقة مع الرمز والوصف.

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

إضافة عناصر قائمة مخصّصة

تشتمل علامة التبويب المخصصة على ما يصل إلى خمسة إجراءات افتراضية يوفرها المتصفح: "إعادة التوجيه" و"معلومات الصفحة" و"إعادة التحميل" و"البحث في الصفحة" و"الفتح في المتصفح". بالإضافة إلى ذلك، يمكنك إضافة ما يصل إلى سبعة مستخدمين آخرين. وسيتم إدراج عناصر القائمة هذه بين صف الرموز والعناصر التي يوفّرها المتصفّح. (اطّلِع على الصورة أدناه). ويعتمد العدد الفعلي على طريقة تنفيذ المتصفّح الأساسية. (على سبيل المثال، زاد Chrome عدد عناصر القائمة من خمسة إلى سبعة في الإصدار 117). لذا، من الأفضل إضافة العناصر الأكثر أهمية أولاً.

يمكنك الوصول إلى إجراءاتك المخصصة عبر قائمة الخيارات الإضافية في الزاوية العلوية اليسرى:

علامة تبويب مخصّصة تحتوي على خمسة عناصر قائمة مخصّصة

لإضافة صنف إلى القائمة، استخدِم 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();

الخطوة التالية: التعرّف على كيفية تسريع تحميل محتوى الويب في علامة تبويب مخصّصة