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

Sebastian Benz

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

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

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

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

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

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

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

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

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

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