Esta página foi traduzida pela API Cloud Translation.

Conceitos básicos do Kotlin para Android 03.1: criar um fragmento

Este codelab faz parte do curso Conceitos básicos do Kotlin para Android. Você vai aproveitar mais este curso se fizer os codelabs em sequência. Todos os codelabs do curso estão listados na página inicial dos codelabs de princípios básicos do Kotlin para Android.

Neste codelab, você vai aprender sobre fragmentos e criar um dentro de um app inicial chamado AndroidTrivia. No próximo codelab, você vai aprender mais sobre navegação e trabalhar mais no app AndroidTrivia.

O que você já precisa saber

Princípios básicos do Kotlin
Como criar apps Android básicos em Kotlin
Como trabalhar com layouts

O que você vai aprender

Como adicionar um fragmento de forma estática ao app

Atividades deste laboratório

Crie um fragmento dentro de uma atividade.

Nos três codelabs que compõem esta lição, você vai trabalhar em um app chamado AndroidTrivia. O app concluído é um jogo em que o usuário responde a três perguntas de curiosidades sobre programação em Android. Se o usuário responder às três perguntas corretamente, ele ganha o jogo e pode compartilhar os resultados.

O app AndroidTrivia ilustra padrões e controles de navegação. O app tem vários componentes:

Na tela de título, mostrada à esquerda na captura de tela acima, o usuário inicia o jogo.
Na tela do jogo com perguntas, mostrada no meio acima, o usuário joga e envia as respostas.
A gaveta de navegação, mostrada à direita acima, desliza para fora da lateral do app e contém um menu com um cabeçalho. O ícone de gaveta abre a gaveta de navegação. O menu de gaveta de navegação contém um link para a página "Sobre" e outro para as regras do jogo.

A parte de cima do app mostra uma visualização colorida chamada barra de apps, também conhecida como barra de ações.

Neste codelab, você vai trabalhar com um app inicial que fornece código de modelo e classes de fragmento necessárias para concluir o app Trivia.

Faça o download do projeto AndroidTrivia-Starter do Android Studio.
Abra o projeto no Android Studio e execute o app. Quando ele abrir, não vai fazer nada além de mostrar o nome e uma tela em branco.
No painel "Projeto" do Android Studio, abra a visualização "Projeto: Android" para explorar os arquivos do projeto. Abra a pasta app > java para ver a classe MainActivity e as classes de fragmento.
Abra a pasta res > layout e clique duas vezes em activity_main.xml. O arquivo activity_main.xml aparece no Layout Editor.
Clique na guia Design. A Árvore de componentes do arquivo activity_main.xml mostra o layout raiz como LinearLayout vertical.

Em um layout linear vertical, todas as visualizações filhas no layout são alinhadas verticalmente.

Um fragmento representa um comportamento ou parte da interface do usuário (IU) em uma atividade. Você pode combinar vários fragmentos em uma única atividade para criar uma interface de vários painéis e reutilizar um fragmento em várias atividades.

Pense em um fragmento como uma seção modular de uma atividade, algo como uma "subatividade" que também pode ser usada em outras atividades:

Um fragmento tem o próprio ciclo de vida e recebe os próprios eventos de entrada.
Você pode adicionar ou remover um fragmento enquanto a atividade está em execução.
Um fragmento é definido em uma classe Kotlin.
A interface de um fragmento é definida em um arquivo de layout XML.

O app AndroidTrivia tem uma atividade principal e vários fragmentos. A maioria dos fragmentos e arquivos de layout já foi definida para você. Nesta tarefa, você vai criar um fragmento e adicioná-lo à atividade principal do app.

Etapa 1: adicionar uma classe de fragmento

Nesta etapa, você vai criar uma classe TitleFragment em branco. Comece criando uma classe Kotlin para um novo fragmento:

No Android Studio, clique em qualquer lugar dentro do painel "Projeto" para trazer o foco de volta aos arquivos do projeto. Por exemplo, clique na pasta com.example.android.navigation.
Selecione File > New > Fragment > Fragment (Blank).
Para o nome do fragmento, use TitleFragment. Desmarque todas as caixas de seleção, incluindo criar XML de layout, incluir métodos de fábrica de fragmentos e incluir callbacks de interface.
Clique em Concluir.
Abra o arquivo de fragmento TitleFragment.kt, se ele ainda não estiver aberto. Ele contém o método onCreateView(), que é um dos métodos chamados durante o ciclo de vida de um fragmento.
Em onCreateView(), remova a seção return TextView(activity).apply, incluindo a linha que começa com setText. A função onCreateView() fica apenas com o seguinte código:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

Criar um objeto de vinculação

O fragmento não será compilado agora. Para compilar o fragmento, crie um objeto de vinculação e faça a inclusão da visualização do fragmento (equivalente a usar setContentView() em uma atividade).

No método onCreateView() em TitleFragment.kt, crie uma variável binding (val binding).
Para inflar a visualização do fragmento, chame o método DataBindingUtil.inflate() no objeto Binding do fragmento, que é FragmentTitleBinding.

Transmita quatro parâmetros ao método:

inflater, que é o LayoutInflater usado para inflar o layout de vinculação.
O recurso de layout XML do layout a ser inflado. Use um dos layouts já definidos para você, R.layout.fragment_title.
container para o ViewGroup principal. Esse parâmetro é opcional.
false para o valor attachToParent.

Atribua a vinculação que DataBindingUtil.inflate retorna à variável binding.
Retorne binding.root do método, que contém a visualização inflada. O método onCreateView() agora vai ficar assim:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

Etapa 2: adicionar o novo fragmento ao arquivo de layout principal

Nesta etapa, você adiciona o TitleFragment ao arquivo de layout activity_main.xml do app.

Abra res > layout > activity_main.xml e clique na guia Text para ver o código XML do layout.
No elemento LinearLayout, adicione um elemento fragment.
Defina o ID do fragmento como titleFragment.
Defina o nome do fragmento como o caminho completo da classe de fragmento, que, neste caso, é com.example.android.navigation.TitleFragment.
Defina a largura e a altura do layout como match_parent.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>

Execute o app. O fragmento foi adicionado à tela principal.

Projeto do Android Studio: AndroidTriviaFragment (link em inglês)

Neste codelab, você adicionou um fragmento ao app AndroidTrivia, que vai continuar trabalhando nos próximos dois codelabs desta lição.

Um fragmento é uma seção modular de uma atividade.
Um fragmento tem o próprio ciclo de vida e recebe os próprios eventos de entrada.
Use a tag <fragment> para definir o layout do fragmento no arquivo de layout XML.
Infle o layout de um fragmento em onCreateView().
Você pode adicionar ou remover um fragmento enquanto a atividade está em execução.

Curso da Udacity:

Desenvolvimento de apps Android com Kotlin

Documentação do desenvolvedor Android:

Esta seção lista as possíveis atividades de dever de casa para os alunos que estão fazendo este codelab como parte de um curso ministrado por um professor. Cabe ao professor fazer o seguinte:

Atribuir o dever de casa, se necessário.
Informar aos alunos como enviar deveres de casa.
Atribuir nota aos deveres de casa.

Os professores podem usar essas sugestões o quanto quiserem, podendo passar os exercícios que acharem mais apropriados como dever de casa.

Se você estiver seguindo este codelab por conta própria, sinta-se à vontade para usar esses deveres de casa para testar seu conhecimento.

Responda estas perguntas

Pergunta 1

Quais são algumas das diferenças entre fragmentos e atividades? Selecione todas as afirmações verdadeiras.

Ao criar um fragmento, você infla o layout no método onCreateView(). Ao criar uma atividade, você infla o layout em onCreate().
Uma atividade tem o próprio layout, mas um fragmento não pode ter um layout próprio.
Uma atividade tem o próprio ciclo de vida, mas um fragmento não.
Ao inflar o layout de um fragmento ou de uma atividade, você pode fazer referência a ele como R.layout.layoutname.

Pergunta 2

Quais das seguintes afirmações sobre fragmentos são verdadeiras? Selecione todas as opções aplicáveis.

Você pode usar um fragmento em mais de uma atividade.
Uma atividade pode ter vários fragmentos.
Depois de definir um fragmento em uma classe Kotlin, ele é adicionado automaticamente ao arquivo de layout activity_main.xml.
Use a tag <fragment> para definir o local no arquivo de layout em que um fragmento será inserido.

Comece a próxima lição: 3.2 Definir os caminhos de navegação

Para acessar links de outros codelabs neste curso, consulte a página inicial dos codelabs de conceitos básicos do Kotlin para Android.

Conceitos básicos do Kotlin para Android 03.1: criar um fragmento Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.