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

Sebastian Benz

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

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

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

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

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

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

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