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

Sebastian Benz

Özel Sekmelerin bir avantajı, uygulamanıza sorunsuz bir şekilde entegre edilebilmeleridir. Özel Sekmeler kılavuzunun bu bölümünde, Özel Sekme'nin 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 belirleme

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

Birincisi, uygulamanızın temasıyla tutarlı olması için Özel Sekme'nin adres çubuğunu özelleştirmek. Aşağıdaki snippet, setDefaultColorSchemeParams() çağrısı yaparak varsayılan araç çubuğu rengini değiştirir. Uygulamanız koyu renk şemasını da destekliyorsa .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …) ile 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ğunda 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, otomatik gizle AppBar ve özel kapatma simgesi

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

  • Kullanıcılara setUrlBarHidingEnabled()(true) ile web içeriğini keşfetmeleri için daha fazla alan vermek amacıyla, sayfayı kaydırırken URL çubuğunu gizleyin.
  • setShowTitle()(true) aracılığıyla URL yerine doküman başlığını gösterin.
  • Kapatma düğmesini uygulamanızdaki kullanıcı işlemleri akışıyla eşleşecek ş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 trafiklerinin nereden geldiğini bildirebilirsiniz.

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

Sıradaki: Özel Sekmenize nasıl özel işlem ekleyeceğinizi öğrenin.