Interfaces Gráficas no Android

Existem duas maneiras de criar interfaces gráficas no Android. Ambas são muito importantes e, na grande maioria das aplicações, as duas maneiras de desenvolvimento estarão presentes, trabalhando juntas, pois elas se complementam. A primeira maneira de desenvolver interfaces que iremos estudar é a maneira declarativa, responsável pela maior parte da interface gráfica das aplicações desenvolvidas.

Na maneira declarativa, como o próprio nome sugere, as propriedades da interface gráfica são declaradas em um arquivo XML, seguindo um padrão próprio dos layouts Android, e então são carregadas na aplicação, a partir desse arquivo XML. Essas propriedades não são capazes de mudar ao longo da execução do programa, exceto se utilizado um pouco da segunda maneira, como veremos adiante. Uma vez carregado o XML, as propriedades se mantêm como declaradas. Essa é a maneira mais utilizada, pois, para a maioria dos componentes da aplicação, não haverá mudanças em seu estado ao longo da execução da aplicação. Um título, um campo de texto ou até mesmo um botão que seja carregado na tela durante a execução de uma aplicação tende a ficar lá por todo o seu tempo de vida visível, sem que haja a necessidade de se mover ou desaparecer. Além disso, é mais fácil criar os layouts visualmente, no Android Studio, apenas arrastando os componentes e definindo suas propriedades.

Na segunda maneira de se desenvolver interfaces gráficas, denominada maneira programática, os componentes são descritos em tempo de execução, ou seja, são definidos ao longo do código da aplicação. Isso faz com que o carregamento deles seja um pouco mais lento, além de ser um pouco mais complicado definir as propriedades através da manipulação de um objeto em código Java. Utilizando essa maneira, há tanto a possibilidade de criar novos componentes quanto de editar componentes já declarados em um XML de layout, por exemplo. Não é comum criar toda uma tela de maneira programática, esta abordagem é mais utilizada, por exemplo, para adicionar, remover ou editar componentes únicos que devem ser exibidos depois de algum evento que iremos tratar no código Java.

Como foi dito anteriormente, as duas maneiras interagem muito bem e se completam. Por exemplo, imagine que um botão, declarado no XML de seu layout, deve apenas aparecer, ou ser clicável, em algumas situações, que são definidas em tempo de execução. A solução para esse problema é combinar as duas possibilidades para o desenvolvimento da interface. Utilizando a maneira declarativa, é mais simples posicionar o botão, escolher o seu estilo, definir o seu tamanho e o seu texto. Uma vez com o botão criado e posicionado, pode-se, então, programaticamente, ou seja, durante o código, mudar a propriedade de visibilidade do botão de acordo com situações detectadas durante a execução da aplicação. Isso demonstra a importância da utilização das duas maneiras de desenvolvimento.

Vamos então aos nossos primeiros códigos em Android. Para começar, vamos analisar o nosso primeiro projeto criado na aula anterior, chamado Hello World. Vamos abrir o arquivo de layout criado juntamente com nossa primeira Activity, chamado activity_main.xml. Esse arquivo está na pasta res\layout do projeto. Ao abrir o arquivo de layout será aberta a tela de edição gráfica do layout, mas podemos alterar para o código XML gerado clicando na aba Text na parte inferior esquerda, como mostra a marca 5 na Figura 1.

A Listagem 1 mostra o código XML do layout desta tela. Ele contém um elemento de texto (TextView) com um campo de texto contendo o texto “Hello World”.

Outra maneira pela qual o Android Studio pode ajudar no desenvolvimento desse arquivo XML é através do recurso de autocompletar. Com esse recurso, ao apertar o atalho Ctrl+Espaço dentro do espaço de um elemento, o Android Studio mostra todas as propriedades que podem ser alteradas para aquele componente. Uma vez escolhida a propriedade, caso seja uma propriedade que tem valores constantes, o Android Studio, através do mesmo atalho, mostra a lista dos valores que aquela propriedade pode assumir.

Já na Listagem 2, temos um código exemplo da abordagem programática. Nessa Listagem, alteramos o texto que estava na caixa de texto declarada na Listagem 1. Ao alterar esse valor durante a execução do programa, temos, então, um exemplo de como as duas abordagens para o desenvolvimento das interfaces gráficas podem e devem interagir ao longo de uma aplicação.

Como podemos ver na Listagem 1, existem alguns padrões a serem seguidos, como em qualquer XML. O Android Studio ajuda bastante na criação desses arquivos, gerando todo esse código XML quando usamos o Graphical Layout Editor, arrastando os elementos da interface, listados no painel da esquerda, como vemos na marca 1 da Figura 1, e soltando na tela da aplicação (marca 2 da Figura 1).

O painel da marca 3 da Figura 1 lista todos os componentes inseridos neste layout, e o painel abaixo, indicado pela marca 4, mostra as propriedades de um determinado elemento selecionado, possibilitando sua modificação. Vamos selecionar o componente TextView na listagem de componentes e depois alterar o seu id, digitando “texto” no campo id no painel de propriedades do elemento (marcação 4). Depois salve o arquivo.

Vejamos agora, na Listagem 2, um código exemplo da abordagem programática para a classe MainActivity.java. Nessa Listagem, alteramos o texto que estava na caixa de texto declarada na Listagem 1 A caixa de texto é identificada no código Java pela constante R.id.texto (como definido nas suas propriedades, conforme configuramos anteriormente), podendo assim ser recuperada através deste identificador, para que possa então ser manipulada programaticamente. Ao alterar esse valor durante a execução do programa, temos, então, um exemplo de como as duas abordagens para o desenvolvimento das interfaces gráficas podem e devem interagir ao longo de uma aplicação. Você pode testar esta mudança alterando o método onCreate da classe MainActivity.java e executando, em seguida, para verificar a mudança.

Conhecendo as duas abordagens disponíveis para o desenvolvimento das interfaces gráficas em aplicações Android, vamos então estudar mais a fundo quais são os componentes gráficos que estão disponíveis e como eles são estruturados dentro de uma aplicação Android.