سفارشی کردن رابط کاربری

یکی از مزایای تب های سفارشی این است که می توانند به طور یکپارچه در برنامه شما ادغام شوند. در این قسمت از راهنمای تب های سفارشی، یاد خواهید گرفت که چگونه ظاهر و رفتار یک تب سفارشی را مطابق با برنامه خود تغییر دهید.

رنگ نوار ابزار را تنظیم کنید

برگه سفارشی با طرح رنگ نور سفارشی
حالت نور
برگه سفارشی با طرح رنگ تیره سفارشی
حالت تاریک

ابتدا نوار آدرس برگه سفارشی را سفارشی کنید تا با موضوع برنامه شما سازگار باشد. قطعه زیر با فراخوانی 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 ، راه‌اندازی (و ترک) یک تجربه Tab Custom در برنامه‌تان را بدون مشکل‌تر کنید:

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) .

اینها همه اختیاری هستند، اما می توانند تجربه Tab Custom را در برنامه شما بهبود بخشند.

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()));

مرحله بعدی: نحوه افزودن عملکرد سفارشی به برگه سفارشی خود را بیاموزید .