Avaliação do Usuário

Estrela ativaEstrela ativaEstrela ativaEstrela ativaEstrela ativa
 

Android: UI com Layout XML

 

APRESENTAÇÃO

Android é o Sistema Operacional para dispositivos móveis, desenvolvido inicialmente pela Google e, em seguida, pela Open Handset Alliance, porém com a Google mantendo a gerência do projeto.

O Android roda sobre um kernel Linux, mas com sua estrutura toda montada externamente ao núcleo do Linux. O sistema aceita aplicativos escritos em Java, sendo que as funcionalidades são implementadas através de chamadas às API´s criadas pela Google.

Este tutorial, que ensina como desenvolver um aplicativo básico para Android, é uma tradução da segunda parte do original Hello Word tutorial - Beginning basic application development with the Android SDK, disponível no endereço http://developer.android.com/resources/tutorials/hello-world.html

Leia também as outras partes da tradução:

1 -Criando um Aplicativo Básico com o Android SDK da Google
2 -Desenvolvimento Android - Interface de Usuário com Layout XML
3 -Desenvolvimento Android - Depurando seu Projeto


ATUALIZAÇÃO DO LAYOUT DA INTERFACE

O exemplo "Olá, Mundo", que você terminou usa apenas o que é chamado de um layout de UI "programática". Isso significa que você  construiu a UI do aplicativo diretamente no código fonte. Se você já fez muita programação de UI, provavelmente você está familiarizado com a forma frágil que a abordagem às vezes pode ter: pequenas mudanças no layout podem resultar em grandes código-fonte dores de cabeça. Também é fácil esquecer de conectar corretamente as Visões em conjunto, o que pode resultar em erros em seu layout e desperdício de tempo depurando seu código.

É por isso que o Android fornece um modelo alternativo de construção da interface do usuário: arquivos de layout baseados em XML. A maneira mais fácil de explicar este conceito é mostrar um exemplo. Aqui está um arquivo de layout XML que possui um comportamento idêntico ao exemplo construído de forma programática:

<?xml version="1.0" encoding="utf-8"?>
  <TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="@string/hello"/>

A estrutura geral de um arquivo de layout Android XML é simples: é uma árvore de elementos XML, onde cada nó é o nome de uma classe View (neste exemplo, no entanto, é apenas um elemento View). Você pode usar o nome de qualquer classe que estende View como um elemento em seus layouts XML, incluindo classes de exibição personalizadas que você define no seu próprio código. Esta estrutura faz com que seja fácil de, rapidamente, construir interfaces de usuário, utilizando uma estrutura e sintaxe mais simples do que você usaria em um esquema programático. Este modelo é inspirado no modelo de desenvolvimento web, onde você pode separar a apresentação do seu aplicativo (sua UI) da lógica do aplicativo usado para buscar e preencher os dados.

No XML de exemplo acima, há apenas um elemento View: o TextView, que tem cinco atributos XML. Aqui está um resumo do que eles significam:

Atributo  Significado
xmlns:android Esta é uma declaração de namespace XML que informa as ferramentas do Android que você está se referindo a atributos comuns definidos no namespace Android. A tag mais externa em cada arquivo de layout Android deve ter este atributo.
android:id Este atributo define um identificador único para o elemento TextView. Você pode usar o ID atribuído para referenciar esta visão do seu código fonte, ou de outras declarações de recursos XML.
android:layout_width Este atributo define o quanto da largura disponível na tela essa visão deve consumir. Neste caso, esta é a única visão, então você quer que ela ocupe a tela inteira, que é o que um valor "fill_parent" significa.
android:layout_height Este é idêntico ao atributo android: layout_width, exceto que ele refere-se a altura da tela disponível.
android:text Este define o texto que o TextView deve exibir. Neste exemplo, você usa um recurso de cadeia em vez de um valor de string codificada. A seqüência Olá é definido no arquivo res/values/strings.xml. Esta é a prática recomendada para inserir strings em sua aplicação, porque faz com que a localização do seu aplicativo para outros idiomas seja graciosa, sem necessidade de codificar as alterações no arquivo de layout. Para mais informações, consulte Recursos e Internacionalização (em inglês).

 

Esses arquivos de layout XML pertencem ao diretório res/layout/ do seu projeto. O "res" é a abreviação de "recursos" e o diretório contém todos os ativos de não-código que seu aplicativo requer. Além de arquivos de layout, recursos também incluem ativos como imagens, sons e sequências de caracteres localizadas.


Piscando Layout de Paisagem

Quando você quer um projeto diferente para paisagem, coloque o seu arquivo de layout XML dentro de  res/layout-land. O Android irá automaticamente procurar aqui após as mudanças de layout. Sem esse layout paisagem especial definido, o Android irá esticar o layout padrão.


 

O plugin do Eclipse cria automaticamente um desses arquivos de layout para você: main.xml. No aplicativo "Olá Mundo" que você acabou de completar, esse arquivo foi ignorado e você criou um layout de forma programática. Este foi concebido para lhe ensinar mais sobre a estrutura do Android, mas você deve sempre definir o layout em um arquivo XML em vez de no seu código. Os procedimentos a seguir vão instruí-lo sobre como alterar a sua aplicação existente para usar um layout XML.
 
1 - No Package Explorer do Eclipse, expanda o diretório /res/layout/ e abra o arquivo main.xml (uma vez aberto, você pode precisar clicar na guia "main.xml" na parte inferior da janela para ver o código fonte XML). Substitua o conteúdo com o seguinte XML:

<?xml version="1.0" encoding="utf-8"?>
  <TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="@string/hello"/>

Salve o arquivo.


2 - Dentro da pasta res/values/, abra o arquivo strings.xml. Aqui é onde você deve salvar todas as cadeias de texto padrão para a interface do usuário. Se você estiver usando o Eclipse, então o ADT terá iniciado para você com dois textos, hello e app_name. Altere  o texto de hello para alguma outra coisa. Talvez "Olá, Android! Sou um recurso de texto!". O arquivo inteiro deve agora parecer com este:

<?xml version="1.0" encoding="utf-8"?>
  <resources>
    <string name="hello">Olá, Android! Eu sou um recurso de texto!</string>
    <string name="app_name">Olá, Android</string>
  </resources>

 


 

3 - Agora abra e modifique a sua classe HelloAndroid e use o layout XML. Edite o arquivo para ficar assim:

package com.example.helloandroid;

import android.app.Activity;
import android.os.Bundle;

public class HelloAndroid extends Activity {
  /** Chamado quando a atividade é criada pela primeira vez. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
  }
}

Quando você fizer essa alteração, digite-a manualmente para tentar o recurso de completamento de código. À medida que você começar a digitar "R.layout.main" o plugin irá oferecer-lhe sugestões. Você verá que ele ajuda em um monte de situações.

Em vez de passar setContentView() para um objeto View, você dá a ele uma referência para o recurso de layout. O recurso é identificado como R.layout.main, que é na verdade uma representação de objeto compilado do layout definido em /res/layout/main.xml. O plugin do Eclipse cria automaticamente esta referência para você dentro da classe R.java do projeto. Se você não estiver usando o Eclipse, então a classe R.java será gerada para você quando você executar Ant para construir a aplicação. (Mais sobre a classe R, em um momento.)

Agora execute novamente o aplicativo - porque você criou uma configuração de lançamento, tudo que você precisa fazer é clicar no ícone de seta verde para executar, ou selecione Run > Run History > Android Activity. Com exceção da mudança da sequência de texto TextView, o aplicativo tem a mesma aparência. Depois de tudo, o ponto era mostrar que as duas abordagens layout diferentes produzem resultados idênticos.

Nota: Você pode ter que desbloquear a tela no emulador para ver a sua aplicação - assim como você desbloqueia a tela em um dispositivo. Se você tiver problemas para executar o emulador, consulte Usando o emulador Android (em inglês).

Continue lendo para uma introdução à depuração e um pouco mais de informação sobre o uso de outros IDEs. Quando você estiver pronto para aprender mais, leia Fundamentos de Aplicativos (em inglês) para uma introdução a todos os elementos que fazem o trabalho dos aplicativos Android. Consulte também a página de introdução do Guia do Desenvolvedor (em inglês) para uma visão geral da documentação do Dev Guide.

 

Classe R

No Eclipse, abra o arquivo chamado R.java (na pasta gen/[Generated Java Files]). Deve ser algo assim:

package com.example.helloandroid;

public final class R {
  public static final class attr {
  }
  public static final class drawable {
    public static final int icon=0x7f020000;
  }
  public static final class id {
    public static final int textview=0x7f050000;
  }
  public static final class layout {
    public static final int main=0x7f030000;
  }
  public static final class string {
    public static final int app_name=0x7f040001;
    public static final int hello=0x7f040000;
  }
}

Um arquivo de projeto R.java é um índice para todos os recursos definidos no arquivo. Você pode usar essa classe em seu código-fonte como uma espécie de atalho (short-hand way) para se referir aos recursos que você incluiu em seu projeto. Isto é particularmente poderoso com as características de completamento de código de IDEs como o Eclipse, pois ele permite que você, rapidamente e de forma interativa, possa localizar a referência específica para o que você está procurando.

É possível que seu aspecto seja ligeiramente diferente do que este (talvez os valores hexadecimais sejam diferentes). Por enquanto, observe a classe interna chamada "layout", e seu campo de membro "main". O plugin do Eclipse notou o arquivo de layout XML chamado main.xml e gerou uma classe para ele aqui. À medida que você adicionar outros recursos para seu projeto (como textos no arquivo res/values/string.xml ou desenháveis dentro do diretório res/drawable/), você verá mudanças em R.java para manter-se atualizado.

Quando não estiver usando Eclipse, este arquivo de classe será gerado para você em tempo de compilação (com a ferramenta Ant).

Cuidado: Você nunca deve editar o arquivo manualmente.

Obrigado pelos comentários abaixo e até o próximo artigo!


Seja social. Compartilhe!