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

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

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

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

أولاً، تخصيص شريط عناوين علامة التبويب المخصصة ليصبح متوافقًا مع مظهر تطبيقك. يغيّر المقتطف أدناه لون شريط الأدوات التلقائي من خلال استدعاء 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()));

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