Настройка пользовательского интерфейса

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

Панель инструментов теперь имеет собственные цвета фона и переднего плана.

Ключевой момент: протокол Custom Tab не поддерживает изменение цвета строки состояния .

Настройка пользовательской анимации входа и выхода

Далее вы можете сделать запуск (и выход) пользовательской вкладки в вашем приложении более плавным, определив собственные анимации запуска и выхода с помощью 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()));

Далее: узнайте, как добавить специальное действие на пользовательскую вкладку .