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ê aproveitará mais o curso se fizer os codelabs em sequência. Todos os codelabs do curso estão listados na página de destino dos codelabs do curso Conceitos básicos do Kotlin para Android.

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

O que você já precisa saber

• Conceitos básicos do Kotlin
• Como criar apps Android básicos no Kotlin
• Como trabalhar com layouts

O que você vai aprender

• Como adicionar um fragmento de forma estática ao app.

Atividades do laboratório

• Crie um fragmento dentro de uma atividade.

Nos três codelabs que compõem esta lição, você 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 para Android. Se o usuário responder corretamente a todas as três perguntas, ganhará o jogo e poderá compartilhar os resultados.

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

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

A parte superior do aplicativo exibe uma visualização colorida chamada barra de apps, também conhecida como barra de ações.

Neste codelab, você trabalhará em um app inicial que fornece códigos de modelo e classes de fragmentos necessárias para concluir o app Perguntados.

1. Faça o download do projeto AndroidTrivia-Starter no Android Studio.
2. Abra o projeto no Android Studio e execute o app. Quando o app é aberto, ele não faz mais nada além de exibir o nome do app e uma tela em branco.
   
   
   
3. No painel Project do Android Studio, abra a visualização Project: Android para ver os arquivos do projeto. Abra a pasta app > java para ver a classe MainActivity e as classes de fragmento.
   
   
4. Abra a pasta res > layout e clique duas vezes em activity_main.xml. O arquivo activity_main.xml será exibido no Layout Editor.
5. Clique na guia Design. A Component Tree 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 uma parte da interface do usuário (IU) em uma atividade. É possível combinar vários fragmentos em uma única atividade para criar uma IU 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, semelhante a 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 IU 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 os respectivos arquivos de layout foram definidos 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ê criará uma classe TitleFragment em branco. Comece criando uma classe Kotlin para um novo fragmento:

1. No Android Studio, clique em qualquer lugar dentro do painel Project para trazer o foco de volta aos arquivos do projeto. Por exemplo, clique na pasta com.example.android.navigation.
2. Selecione File > New > Fragment > Fragment (Blank).
3. Para o nome do fragmento, use TitleFragment. Desmarque todas as caixas de seleção, incluindo create Layout XML, include fragment factory methods e include callback callbacks.
4. Clique em Finish.
5. Abra o arquivo de fragmento TitleFragment.kt, se ele ainda não estiver aberto. Ele contém o onCreateView(), que é um dos métodos chamados durante o ciclo de vida de um fragmento.
6. Em onCreateView(), remova a seção return TextView(activity).apply, incluindo a linha que começa com setText. A função onCreateView() permanece 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, você precisa criar um objeto de vinculação e inflar a visualização do fragmento, que é equivalente a usar setContentView() para uma atividade.

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

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

2. Atribua a vinculação que DataBindingUtil.inflate retorna à variável binding.
3. Retorne binding.root do método, que contém a visualização inflada. O método onCreateView() agora 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ê adicionará o TitleFragment ao arquivo de layout activity_main.xml do app.

1. Abra res > layout > activity_main.xml e clique na guia Text para ver o código XML do layout.
2. Dentro do elemento LinearLayout já existente, adicione um elemento fragment.
3. Defina o ID do fragmento como titleFragment.
4. Defina o nome do fragmento como o caminho completo da classe do fragmento, que, neste caso, é com.example.android.navigation.TitleFragment.
5. 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>

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

Projeto do Android Studio: AndroidTriviaFragment

Neste codelab, você adicionou um fragmento ao app AndroidTrivia, que 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.
• Inflar o layout de um fragmento em onCreateView().
• Você pode adicionar ou remover um fragmento enquanto a atividade está em execução.

Curso da Udacity:

• Como desenvolver apps Android com Kotlin (link em inglês)

Documentação do desenvolvedor Android:

• Layout linear
• LinearLayout
• Ciclo de vida do fragmento
• DataBindingUtil

Esta seção lista as possíveis atividades para os alunos que estão trabalhando neste codelab como parte de um curso ministrado por um instrutor. Cabe ao instrutor fazer o seguinte:

• Se necessário, atribua o dever de casa.
• Informe aos alunos como enviar o dever de casa.
• Atribua nota aos trabalhos de casa.

Os professores podem usar essas sugestões o quanto quiserem, e eles devem se sentir à vontade para passar o dever de casa como achar adequado.

Se você estiver fazendo este codelab por conta própria, use essas atividades para testar seu conhecimento.

Responda a 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 o próprio layout.
• Uma atividade tem seu próprio ciclo de vida, mas um fragmento não.
• Ao inflar o layout de um fragmento ou de uma atividade, faça referência ao layout 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 será 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.

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

Para ver links de outros codelabs neste curso, consulte a página de destino dos codelabs do curso Conceitos básicos do Kotlin para Android.