Para mostrar a um usuário iniciante como aproveitar ao máximo seu app, apresente informações de integração na inicialização do app. Confira alguns exemplos de integração informações:
- Apresentar informações detalhadas sobre quais canais estão disponíveis quando um usuário acessa um aplicativo do canal pela primeira vez.
- Chame atenção para recursos interessantes do app.
- Ilustrar as etapas obrigatórias ou recomendadas que os usuários devem seguir ao usando o aplicativo pela primeira vez.
A biblioteca androidx.androidx oferece a
Classe OnboardingSupportFragment
para
apresentando informações
de novos usuários. Neste guia, descrevemos como usar
OnboardingSupportFragment
classe para apresentar
informações introdutórias que são mostradas quando o app é iniciado pela primeira
tempo de resposta.
O app OnboardingSupportFragment
usa a interface da TV
práticas recomendadas para apresentar informações de forma correspondente aos estilos da interface da TV
e é fácil navegar em TVs.
![](https://developer.android.com/static/images/training/tv/playback/onboarding-fragment.png?authuser=2&hl=pt-br)
Figura 1. Um exemplo
OnboardingSupportFragment
:
OnboardingSupportFragment
não é apropriado para todos os casos de uso.
Não use OnboardingSupportFragment
quando precisar incluir
Elementos da interface que exigem entrada do usuário, como botões e campos.
Além disso, não use OnboardingSupportFragment
para tarefas que o usuário vai realizar
regularmente. Por fim, se você precisar apresentar uma interface de usuário de várias páginas que exija
a entrada do usuário, considere usar
GuidedStepSupportFragment
:
Adicionar um OnboardingSupportFragment
Para adicionar um OnboardingSupportFragment
ao seu app, implemente uma classe que estende
a classe OnboardingSupportFragment
. Adicionar
esse fragmento para uma atividade, usando o XML de layout da atividade ou
programaticamente. Certifique-se de que a atividade
o fragmento usa um tema derivado de
Theme_Leanback_Onboarding
,
conforme descrito na seção Personalizar temas.
No método onCreate()
da
atividade principal do app, chame
startActivity()
com um Intent
que aponta para
a atividade mãe do OnboardingSupportFragment
.
Isso ajuda a garantir que seus
OnboardingSupportFragment
aparece como
assim que seu app for iniciado.
Para ajudar a garantir que
OnboardingSupportFragment
só aparece o
primeira vez que o usuário iniciar seu aplicativo, use um
Objeto SharedPreferences
para acompanhar se o usuário já visualizou o
OnboardingSupportFragment
: Definir um booleano
que muda para verdadeiro quando o usuário termina de visualizar o
OnboardingSupportFragment
: Marca de seleção
esse valor na atividade
onCreate()
e apenas iniciar o
Atividade do familiar responsável: OnboardingSupportFragment
se
o valor é falso.
O exemplo a seguir mostra uma substituição de onCreate()
que verifica se há
Valor SharedPreferences
e, se não for definido como verdadeiro, chama
startActivity()
para mostrar o OnboardingSupportFragment
:
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) PreferenceManager.getDefaultSharedPreferences(this).apply { // Check if we need to display our OnboardingSupportFragment if (!getBoolean(MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) { // The user hasn't seen the OnboardingSupportFragment yet, so show it startActivity(Intent(this@OnboardingActivity, OnboardingActivity::class.java)) } } }
Java
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); SharedPreferences sharedPreferences = PreferenceManager.getDefaultSharedPreferences(this); // Check if we need to display our OnboardingSupportFragment if (!sharedPreferences.getBoolean( MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) { // The user hasn't seen the OnboardingSupportFragment yet, so show it startActivity(new Intent(this, OnboardingActivity.class)); } }
Depois que o usuário visualiza o
OnboardingSupportFragment
, marcar como visualizado
usando o objeto SharedPreferences
. Para fazer isso, substitua
onFinishFragment()
em OnboardingSupportFragment
e defina SharedPreferences
como verdadeiro, conforme mostrado no exemplo a seguir:
Kotlin
override fun onFinishFragment() { super.onFinishFragment() // User has seen OnboardingSupportFragment, so mark our SharedPreferences // flag as completed so that we don't show our OnboardingSupportFragment // the next time the user launches the app PreferenceManager.getDefaultSharedPreferences(context).edit().apply { putBoolean(COMPLETED_ONBOARDING_PREF_NAME, true) apply() } }
Java
@Override protected void onFinishFragment() { super.onFinishFragment(); // User has seen OnboardingSupportFragment, so mark our SharedPreferences // flag as completed so that we don't show our OnboardingSupportFragment // the next time the user launches the app SharedPreferences.Editor sharedPreferencesEditor = PreferenceManager.getDefaultSharedPreferences(getContext()).edit(); sharedPreferencesEditor.putBoolean( COMPLETED_ONBOARDING_PREF_NAME, true); sharedPreferencesEditor.apply(); }
Adicionar páginas de OnboardingSupportFragment
Um OnboardingSupportFragment
exibe o conteúdo em uma série de páginas ordenadas. Depois de adicionar
OnboardingSupportFragment
, você precisa definir
páginas de integração. Cada página pode ter um título, uma descrição e
várias subvisualizações que podem conter imagens ou animações.
![](https://developer.android.com/static/images/training/tv/playback/onboarding-fragment-diagram.png?authuser=2&hl=pt-br)
Figura 2. OnboardingSupportFragment
elementos de página.
A Figura 2 mostra um exemplo de página com frases de destaque marcando a página personalizável
elementos que seu OnboardingSupportFragment
podem oferecer. Os elementos de página são:
- Título da página.
- Descrição da página.
- Visualização do conteúdo da página. Nesse caso, uma simples marca verde de verificação em uma caixa cinza. Ela é opcional. Use essa visualização para ilustrar detalhes da página. Por exemplo, talvez você inclua uma captura de tela que destaque o recurso do app descrito na página.
- Visualização do plano de fundo da página. Nesse caso, um simples gradiente azul. Esta visualização sempre é renderizado atrás de outras visualizações na página. Ela é opcional.
- Primeiro plano da página. Nesse caso, um logotipo. Essa visualização sempre renderiza na frente de todas as outras visualizações da página. Ela é opcional.
Inicialize as informações da página quando seu
OnboardingSupportFragment
é criado pela primeira vez
ou anexados à atividade pai, já que a página de solicitações do sistema
informações ao criar a visualização do fragmento. Você pode inicializar a página
no construtor da classe ou em uma substituição de
onAttach()
:
Substitua cada um dos métodos a seguir, que fornecem informações da página ao sistema:
getPageCount()
retorna o número de páginas na suaOnboardingSupportFragment
.getPageTitle()
retorna o título para o número de página solicitado.getPageDescription()
retorna a descrição da página solicitada. número
Substitua cada um dos métodos a seguir para fornecer subvisualizações opcionais para mostrar imagens ou animações:
onCreateBackgroundView()
retorna umView
que você create para atuar como visualização em segundo plano ou retorna nulo quando nenhuma visualização em segundo plano é necessária.onCreateContentView()
retorna umView
que você create para atuar como a visualização de conteúdo ou retorna nulo quando nenhuma visualização de conteúdo é necessária.onCreateForegroundView()
retorna umView
que você create para atuar como a visualização em primeiro plano ou retorna nulo quando nenhuma visualização em primeiro plano é necessária.
O sistema adiciona o View
criado à página.
o mesmo layout organizacional. O exemplo a seguir substitui
onCreateContentView()
e retorna um
ImageView
:
Kotlin
private lateinit var contentView: ImageView ... override fun onCreateContentView(inflater: LayoutInflater?, container: ViewGroup?): View? { return ImageView(context).apply { scaleType = ImageView.ScaleType.CENTER_INSIDE setImageResource(R.drawable.onboarding_content_view) setPadding(0, 32, 0, 32) contentView = this } }
Java
private ImageView contentView; ... @Override protected View onCreateContentView(LayoutInflater inflater, ViewGroup container) { contentView = new ImageView(getContext()); contentView.setScaleType(ImageView.ScaleType.CENTER_INSIDE); contentView.setImageResource(R.drawable.onboarding_content_view); contentView.setPadding(0, 32, 0, 32); return contentView; }
Adicionar uma tela inicial com logotipo
Seu OnboardingSupportFragment
pode começar
com uma tela opcional de logotipo que apresenta seu aplicativo. Se você quiser mostrar
um(a) Drawable
como a tela do logotipo, chame
setLogoResourceId()
pelo ID do seu Drawable
no(a) onCreate()
do seu OnboardingSupportFragment
.
O sistema aparece e mostra brevemente o
Drawable
e, em seguida, esmaece a Drawable
antes de exibir a primeira página do OnboardingSupportFragment
.
Se você quiser fornecer uma animação personalizada para a tela do seu logotipo, em vez de
chamando setLogoResourceId()
, substituir
onCreateLogoAnimation()
e retorna um Animator
.
que renderiza sua animação personalizada, conforme mostrado no exemplo a seguir:
Kotlin
public override fun onCreateLogoAnimation(): Animator = AnimatorInflater.loadAnimator(context, R.animator.onboarding_logo_screen_animation)
Java
@Override public Animator onCreateLogoAnimation() { return AnimatorInflater.loadAnimator(getContext(), R.animator.onboarding_logo_screen_animation); }
Personalizar animações de páginas
O sistema usa animações padrão ao exibir a primeira página dos seus
OnboardingSupportFragment
e quando o usuário
navegar para outra página. Você pode personalizar essas animações
a substituição de métodos
OnboardingSupportFragment
:
Para personalizar a animação que aparece na primeira página, faça o seguinte:
sobrepor-se
onCreateEnterAnimation()
e retornar um Animator
.
O exemplo a seguir cria um Animator
que dimensiona a visualização de conteúdo
horizontalmente:
Kotlin
override fun onCreateEnterAnimation(): Animator = ObjectAnimator.ofFloat(contentView, View.SCALE_X, 0.2f, 1.0f) .setDuration(ANIMATION_DURATION)
Java
@Override protected Animator onCreateEnterAnimation() { Animator startAnimator = ObjectAnimator.ofFloat(contentView, View.SCALE_X, 0.2f, 1.0f).setDuration(ANIMATION_DURATION); return startAnimator; }
Para personalizar a animação usada quando o usuário navega para outra página,
sobrepor-se
onPageChanged()
:
No método onPageChanged()
, crie objetos Animator
que removem a página anterior e exibem a próxima, adicionam-os a uma
AnimatorSet
e execute a sequência. O seguinte
usa uma animação de esmaecimento para remover a página anterior, atualiza a
imagem de visualização de conteúdo e usa uma animação de esmaecimento para exibir a próxima página:
Kotlin
override fun onPageChanged(newPage: Int, previousPage: Int) { // Create a fade-out animation for previousPage and, once // done, swap the contentView image with the next page's image val fadeOut = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 1.0f, 0.0f) .setDuration(ANIMATION_DURATION) .apply { addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator) { mContentView.setImageResource(pageImages[newPage]) } }) } // Create a fade-in animation for nextPage val fadeIn = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 0.0f, 1.0f) .setDuration(ANIMATION_DURATION) // Create AnimatorSet with fade-out and fade-in animators and start it AnimatorSet().apply { playSequentially(fadeOut, fadeIn) start() } }
Java
@Override protected void onPageChanged(final int newPage, int previousPage) { // Create a fade-out animation for previousPage and, once // done, swap the contentView image with the next page's image Animator fadeOut = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 1.0f, 0.0f).setDuration(ANIMATION_DURATION); fadeOut.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { mContentView.setImageResource(pageImages[newPage]); } }); // Create a fade-in animation for nextPage Animator fadeIn = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 0.0f, 1.0f).setDuration(ANIMATION_DURATION); // Create AnimatorSet with fade-out and fade-in animators and start it AnimatorSet set = new AnimatorSet(); set.playSequentially(fadeOut, fadeIn); set.start(); }
Para mais detalhes sobre como criar
Animator
objetos e
AnimatorSet
objetos, consulte
Visão geral da animação de propriedades.
Personalizar temas
Qualquer OnboardingSupportFragment
deve usar o parâmetro
Tema Theme_Leanback_Onboarding
ou um tema herdado de Theme_Leanback_Onboarding
. Defina o
para a OnboardingSupportFragment
realizando uma das seguintes ações:
- Defina a atividade mãe do
OnboardingSupportFragment
para usar o o tema desejado. O exemplo abaixo mostra como definir uma atividade para ser usadaTheme_Leanback_Onboarding
no manifesto do app:<activity android:name=".OnboardingActivity" android:enabled="true" android:exported="true" android:theme="@style/Theme.Leanback.Onboarding"> </activity>
-
Defina o tema na atividade pai usando o
LeanbackOnboardingTheme_onboardingTheme
em um tema de atividade personalizado. Aponte este atributo para outro um tema personalizado que só oOnboardingSupportFragment
no uso da atividade. Use essa abordagem se sua atividade já usa um tema personalizado e não quiser aplicarOnboardingSupportFragment
estilos para outros visualizações na atividade. - Substituir
onProvideTheme()
e retorna o tema desejado. Use essa abordagem se várias atividades usam seuOnboardingSupportFragment
ou se a atividade pai não pode usar o tema desejado. O exemplo a seguir modificaonProvideTheme()
e retornaTheme_Leanback_Onboarding
:Kotlin
override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
Java
@Override public int onProvideTheme() { return R.style.Theme_Leanback_Onboarding; }