התאמה אישית של ממשק המשתמש

אחד היתרונות של כרטיסיות מותאמות אישית הוא האפשרות לשלב אותן בצורה חלקה באפליקציה. בחלק זה של המדריך לכרטיסיות מותאמות אישית תלמד כיצד לשנות את המראה וההתנהגות של כרטיסייה מותאמת אישית כך שיתאימו לאפליקציה שלך.

הגדרת הצבע של סרגל הכלים

כרטיסייה מותאמת אישית עם ערכת צבעים מותאמת אישית
מצב בהיר
כרטיסייה מותאמת אישית עם ערכת צבעים כהה מותאמת אישית
מצב כהה

קודם כל, צריך להתאים אישית את סרגל הכתובות של הכרטיסייה 'בהתאמה אישית' כך שיתאים לעיצוב של האפליקציה. קטע הקוד שבהמשך משנה את צבע ברירת המחדל של סרגל הכלים באמצעות קריאה ל-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()));

השלב הבא: איך מוסיפים פעולה מותאמת אישית לכרטיסייה 'בהתאמה אישית'