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

Sebastian Benz

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

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

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

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

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

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

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

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

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