Android Fragments: reutilizando componentes visuais

Migrando lista de notícias para fragment - Introdução

Eu sou o Alex Felipe, instrutor da Alura, e vou apresentar para vocês o curso de fragments no Android. Vamos utilizar o mesmo projeto que fizemos no curso de architecture components da Alura, que utiliza view model, live data e room. Portanto, antes mesmo de fazer este, peço que verifique o curso anterior, para depois começar, porque já vou assumir que você saiba a arquitetura que nós implementamos.

Dado que você vai ter todo esse conhecimento, o que veremos no curso? Vai era justamente a camada que temos aqui. No outro curso, nós implementamos toda essa estrutura, mas utilizamos apenas activities, que era nosso conhecimento atual. Agora, vamos ver a possibilidade de usar fragments e faremos uma migração para usar eles ao invés das activities.

Vamos entender que fragments são comportamentos, pedaços de tela que podem ser reutilizados. Vamos ver como fazendo isso no mesmo aplicativo de notícias de tecnologia. Vamos perceber que ao utilizar fragments entregaremos o mesmo resultado de maneira mais flexível.

Vamos aprender uma técnica muito comum nos fragments, que é implementação de layouts de multi painéis, que seria pegar um dispositivo de tela maior, usando o mesmo aplicativo, e mantendo a proporção diferente dos componentes.

Vamos aprender que existem muitas peculiaridades para implementar isso. Inclusive, vamos ver que conseguimos um flexibilidade que até mesmo o tamanho mínimo de tela vai ser exigido. Conseguimos esse tipo de flexibilidade com uma implementação muito bacana nos nossos projetos.

Espero que você esteja animado, que seja algo que você está buscando na sua carreira, e vamos começar.

Migrando lista de notícias para fragment - Conhecendo os fragments

Antes de começarmos com qualquer tipo de implementação, precisamos entender o que significam os fragments. Entendendo a base, entendendo o motivo de utilizar.

Activities e fragments são bem equivalentes em níveis. Isso significa que ambos serão componentes responsáveis por apresentar dados ao usuário. Portanto, podemos entender que fragments fazem parte de um comportamento ou parte visual do nosso aplicativo. Mas dado que tem a mesma proposta da activity, qual a diferença e vantagens?

Quando utilizamos fragments, estamos lidando com partes visuais modulares da nossa tela, portanto podemos criar um fragment que pode ser utilizado em outra activity. Se pegarmos nosso aplicativo, poderíamos criar um fragment para lista de notícias e fazer com que ele fosse apresentado na activity de lista de notícias, na activity de formulário, de visualização.

Essa é uma das grandes vantagens com o fragment. Podemos tornar nossas telas como fragments e reutilizar qualquer tipo de activity que quisermos. Assim, até tiramos a responsabilidade visual da activity. Um ponto importante que temos que notar é que o fragment, por mais que pareça um componente um pouco independente, na verdade ele vai ser hospedado por activities. Nós vamos trabalhar com elas. A diferença é que a responsabilidade visual, de manter o código, de onde vai ficar a lógica, vão ficar dentro do fragment.

Um detalhe importante é que fragments possuem ciclo de vida. Se olharmos a documentação, vamos entrar no ciclo de vida dele. Ele vai responder também às activities, dado que é hospedado dentro dele. Isso significa que quando estivermos criando um fragment e a activity entrar em modo pause, o fragment também vai entrar. Temos ali meio que um vínculo entre eles. E temos um desafio, porque vamos lidar com dois ciclos de vida. Mas também tem muitas vantagens.

Aqui está mostrando um aplicativo em dois dispositivos diferentes, um smartphone e um tablet. No smartphone temos a parte visual, ele abre a tela mostrando o conteúdo da notícia. No tablet, um jeito bacana de ser apresentado seria ter a lista e mais à direita o conteúdo.

São mais possibilidades que temos na implementação do nosso aplicativo, principalmente se queremos dar suporte para telas maiores. É muito importante entender as opções que temos.

Dado esse overview, a seguir vamos ver como funciona a implementação.

Migrando lista de notícias para fragment - Implementando primeiro Fragment

Agora que vimos como funciona com os fragments, vamos começar com a implementação. Para isso, primeiro precisamos ver nosso diagrama e o que precisamos modificar no nosso código. Vimos que fragments e activities estão no mesmo nível, portanto, a parte de view model, live data, repositório, comunicação com o banco de dados interna e externa não serão modificados. Iremos reutilizar toda a estrutura que fizemos nos fragments. Essa é uma das vantagens em usar esse modelo, porque se usarmos fragments, activities vamos reutilizar a estrutura e não iremos perder nada.

Dado que eu tinha comentado que fragments são hospedados por activities, vamos ter que modificar exatamente o código da nossa activity. Vamos pegar uma funcionalidade, como a lista de notícias, e nela vamos fazer a adaptação para que funcione com o fragment.

Temos duas alternativas para criar um fragment. Podemos utilizar uma técnica de maneira programática. Primeiro criaríamos o fragment, que é uma class, vamos ter que fazer isso de qualquer maneira. Mas também poderíamos dentro do activity fazer com que o fragment fosse criado. Outra alternativa é utilizar uma técnica especial que consegue criar o fragment para nós. Dessa maneira, dentro do layout da activity não precisamos modificar de maneira programática.

Como é a primeira vez mexendo, vamos fazer primeiro com a tag especial e ver o que precisamos modificar. Em um segundo momento fazemos de forma programática.

Como vamos usar a tag especial, precisamos modificar o layout desta activity para que ele mantenha a tag especial. Vamos no activity lista notícias, que é o arquivo XML do layout de lista de notícias. E agora vamos começar a modificar o código fonte. Dado que vamos colocar essa tag especial, vamos no topo colocar o fragment. Podemos modificar essa tag especial da mesma maneira como fazemos com as views, colocando width, height, e também as constraints.

Nosso fragment vai manter toda a responsabilidade de manter as views. Dado que vai ter essa proposta, a única coisa que precisamos fazer nesse layout é a tag especial. E o que fazemos com toda essa parte visual? Vai estar dentro de outro arquivo de layout, não mais vinculado à activity. Como vimos, os fragments que vão ter a responsabilidade de manter o código de parte visual.

Vamos pegar todo o código de configuração, vou recortar e migrar para um arquivo XML de layout, em um novo arquivo, que vai ser destinado apenas à lista de notícias. Ele vai ser renderizado pelo fragment que vamos criar.

Essas referências que falam de activity, lista notícia, etc, vamos apenas colocar o nome de lista notícia, que vão ser reutilizados nos nossos fragments. No caso, um fragment só.

Agora podemos criar a classe de fragments que vai manter o layout que criamos. Inclusive, para terem certeza se está ok, podem voltar no layout da activity, deixar no preview, e usar tools.

Voltando ao código fonte, podemos criar o fragment. Para isso, vamos na parte de UI. Podemos chamar de lista notícias fragment. A diferença é que não precisamos registrar no manifest, dado que a activity vai hospedar para nós.

Precisamos fazer os demais espaços, que seria colocar todo o código destinado à configuração da parte visual. Fazemos isso pegando todo o código que está na activity. Pegamos tudo e mandamos para o fragment. Na parte de abre formulário não vou mexer, porque estamos fazendo uma chamada de uma função da activity. Na activity, só deixamos comportamentos de abrir formulários, que abrem outras activities. Agora só precisamos adaptar o código para funcionar nesse primeiro momento.

Conseguimos migrar todo o código de parte visual para o nosso fragment. No fragment, vamos ter que fazer adaptações. A primeira é relacionada à referência de contexto. Estamos mandando o this e não resolve, porque o fragment não herda de contextos, como outros componentes. Mas ele tem referência a um contexto, que é da activity que está criando ele.

Só que tem um detalhe. Essa referência pode ser nula. Vamos ter que fazer abordagens para verificar se é válido. Dado que estamos trabalhando com essa possibilidade, se isso acontecer, podemos deixar o expression. E mandar uma exception, indicando que é um contexto inválido.

Agora, na configuração do activity button, podemos simplesmente usar o sintetic. É uma coisa bacana, funciona também. Na parte de abrir o formulário por enquanto não vamos configurar, podemos apenas comentar. No contexto vou mandar apenas o contexto.

Em seguida temos o import do resource. Conseguimos fazer essa modificação. No mostra erro, temos uma extension da activity. Podemos criar uma extension para fragments também. Vamos criar um novo pacote de extension e reutilizar o código da activity.

Precisamos fazer a chamada dessas funções que temos de configuração, como também o de view. Para poder utilizar qualquer mecanismo de inicialização, podemos usar o on create no fragment. Só que aí vem a questão de quais. Qualquer tipo de inicialização que não faça uso da view direta. No on create não criamos views, fazemos inicializações.

Agora temos que ver como criar a view e depois fazer a configuração. Para isso, temos a função on create view, que é muito simular ao que vemos no adapter. Vamos ter aquele mesmo comportamento de inflar uma view. Basicamente, precisamos implementar a função. Temos um inflate pronto para nós. É só chamar, enviando o layout que vamos criar.

Vamos ter o on view para indicar que a view foi criada. Dentro dela vamos conseguir o comportamento de vínculo de view. Podemos chamar as configurações. A outra configuração que envolve o adapter é feita dentro recycle view, então não precisamos chamar novamente.

Basicamente, era o que precisávamos fazer. Só um detalhe importante é que precisamos colocar o id para que funciona, senão quando tentarmos renderizar, ele vai dar um problema. Podemos colocar qualquer tipo. Fizemos todas as implementações, e agora vamos executar e ver o resultado esperado.

Um detalhe importante é que os comportamentos de listener não vão funcionar nessa primeira implementação. Vamos fazer em um segundo momento.

Ele disse que nós não colocamos o vínculo da classe com aquela tag especial. É esperado. Utilizando a tag especial não basta apenas criar o fragment. Precisamos vincular isso. Não é feito de maneira automática.

Nós vamos ter outro atributo chamado de class. Nele, vamos vincular uma classe que temos de fragment, que como comentei é modelar. Podemos colocar qualquer fragment aqui dentro. Agora sim, é esse fragment que ele vai renderizar para nós.

É importante mostrar os erros para que vocês consigam ver essas possibilidades. E agora sim funciona da maneira esperada. Não vamos ter os nossos listeners, porque não fizemos a configuração. Esse é o primeiro passo. Logo vamos ver mais detalhes.

Sobre o curso Android Fragments: reutilizando componentes visuais

O curso Android Fragments: reutilizando componentes visuais possui 159 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de Android em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Migrando lista de notícias para fragment
• Implementando Fragments programaticamente
• Evitando problemas comuns na reutilização de Fragments
• Reutilizando Fragments em layouts de multiplos painéis
• Melhorando a flexibilidade no uso de múltiplos painéis