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

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

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

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

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

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