Kullanıcı arayüzünü özelleştirme

Sebastian Benz

Özel Sekmelerin avantajlarından biri, uygulamanıza sorunsuz bir şekilde entegre edilebilmesidir. Özel Sekmeler kılavuzunun bu bölümünde, Özel Sekmelerin görünümünü ve davranışını uygulamanızla eşleşecek şekilde nasıl değiştireceğinizi öğreneceksiniz.

Araç çubuğunun rengini ayarla

Özel açık renk şemasına sahip Özel Sekme
Açık mod
Özel koyu renk şemasına sahip Özel Sekme
Koyu mod

İlk olarak, Özel Sekmenin adres çubuğunu uygulamanızın temasıyla tutarlı olacak şekilde özelleştirin. Aşağıdaki snippet, setDefaultColorSchemeParams() yöntemini çağırarak varsayılan araç çubuğu rengini değiştirir. Uygulamanız koyu renk şemasını da destekliyorsa .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …) üzerinden ayarlayın.

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

Araç çubuğunun artık özel arka plan ve ön plan renkleri var.

Özel giriş ve çıkış animasyonunu yapılandırma

Ardından, setStartAnimation ve setExitAnimation ile özel başlangıç ve çıkış animasyonları tanımlayarak uygulamanızda Özel Sekme deneyiminin başlatılmasını (ve ayrılmasını) daha sorunsuz hale getirebilirsiniz:

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

Diğer özelleştirmeler: başlık, AppBar'ı otomatik gizle ve özel kapat simgesi

Özel Sekmenin kullanıcı arayüzünü ihtiyaçlarınıza göre ayarlamak için yapabileceğiniz birkaç şey daha vardır.

  • Kullanıcıya setUrlBarHidingEnabled()(true) uygulamasını kullanarak web içeriğini keşfetmesi için daha fazla alan sağlamak üzere kaydırma sırasında URL çubuğunu gizleyin.
  • setShowTitle()(true) aracılığıyla URL yerine doküman başlığını göster.
  • Kapat düğmesini uygulamanızdaki kullanıcı işlemleri akışına uyacak şekilde özelleştirin. Örneğin, varsayılan X simgesi yerine geri oku göstererek: setCloseButtonIcon()(myCustomCloseIcon).

Bunların tümü isteğe bağlı olsa da uygulamanızdaki Özel Sekme deneyimini iyileştirebilir.

Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
  …
  .setUrlBarHidingEnabled(true)
  .setShowTitle(true)
  .setCloseButtonIcon(toBitmap(myCustomCloseIcon))
  .build();

Özel yönlendiren ayarlama

Özel Sekmenizi başlatırken uygulamanızı yönlendiren olarak ayarlayabilirsiniz. Bu şekilde web sitelerine, trafiğinin nereden geldiğini bildirebilirsiniz.

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
       Uri.parse("android-app://" + context.getPackageName()));

Sonraki adım: Özel Sekmenize nasıl özel işlem ekleyeceğinizi öğrenin.