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

Sebastian Benz

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

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

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

התאמות אישיות נוספות: כותרת, הסתרה אוטומטית של סרגל האפליקציות וסמל הסגירה בהתאמה אישית

יש עוד כמה דברים שאפשר לעשות כדי להתאים את ממשק המשתמש של כרטיסייה מותאמת אישית לצרכים שלכם.

• הסתרת סרגל כתובת ה-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()));

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