تخصيص واجهة المستخدم

تتمثل إحدى ميزات "علامات التبويب المخصَّصة" في إمكانية دمجها بسلاسة في تطبيقك. وفي هذا الجزء من دليل "علامات التبويب المخصَّصة"، ستتعرّف على كيفية تغيير مظهر وسلوك "علامة تبويب مخصَّصة" لتتناسب مع تطبيقك.

ضبط لون شريط الأدوات

علامة تبويب مخصّصة بألوان فاتحة مخصّصة
الوضع الفاتح
علامة تبويب مخصّصة بألوان داكنة مخصّصة
الوضع الداكن

أولاً، تخصيص شريط عناوين علامة التبويب المخصصة حتى يكون متسقًا مع مظهر تطبيقك. يغيّر المقتطف أدناه لون شريط الأدوات التلقائي من خلال طلب الرمز setDefaultColorSchemeParams(). إذا كان تطبيقك يتيح أيضًا استخدام الألوان الداكنة، يمكنك ضبطها من خلال .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …).

// get the current toolbar background color (this might work differently in your app)
@ColorInt int colorPrimaryLight = ContextCompat.getColor(MainActivity.this, R.color.md_theme_light_primary);
@ColorInt int colorPrimaryDark = ContextCompat.getColor(MainActivity.this, R.color.md_theme_dark_primary);

CustomTabsIntent intent = new CustomTabsIntent.Builder()
        // set the default color scheme
        .setDefaultColorSchemeParams(new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryLight)
                .build())
        // set the alternative dark color scheme
        .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryDark)
                .build())
        .build();

أصبح شريط الأدوات يتضمّن الآن ألوانًا مخصّصة للخلفية والمقدّمة.

ضبط الإدخال والخروج من الصورة المتحركة المخصّصة

في الخطوة التالية، يمكنك تشغيل تجربة "علامة تبويب مخصّصة" (ومغادرةها) في تطبيقك بشكل أكثر سلاسة، من خلال تحديد حركات مخصَّصة للبدء والخروج باستخدام setStartAnimation وsetExitAnimation:

CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setStartAnimations(MainActivity.this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(MainActivity.this, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.build();

تخصيصات إضافية: العنوان وإخفاء AppBar تلقائيًا ورمز إغلاق مخصّص

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

  • يمكنك إخفاء شريط عنوان URL عند التنقّل في الصفحة لمنح المستخدم مساحة إضافية لاستكشاف محتوى الويب باستخدام setUrlBarHidingEnabled()(true).
  • عرض عنوان المستند بدلاً من عنوان URL عبر setShowTitle()(true)
  • يمكنك تخصيص زر الإغلاق لمطابقة مسار المستخدم في تطبيقك، على سبيل المثال، من خلال عرض سهم الرجوع بدلاً من رمز X التلقائي): setCloseButtonIcon()(myCustomCloseIcon).

هذه خطوة اختيارية، ولكن يمكنها تحسين تجربة "علامة تبويب مخصّصة" في تطبيقك.

Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
  …
  .setUrlBarHidingEnabled(true)
  .setShowTitle(true)
  .setCloseButtonIcon(toBitmap(myCustomCloseIcon))
  .build();

تعيين مُحيل مخصص

يمكنك تعيين تطبيقك كمُحيل عند بدء تشغيل علامة التبويب المخصصة. بهذه الطريقة يمكنك السماح للمواقع الإلكترونية بمعرفة مصدر الزيارات إلى تلك المواقع.

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
       Uri.parse("android-app://" + context.getPackageName()));

التالي: تعرَّف على كيفية إضافة إجراء مخصَّص إلى علامة التبويب المخصَّصة.