Ir para conteúdo



Foto

Lição 8: Temas e imagens


  • Este tópico está fechado Este tópico está fechado
Não há respostas para este tópico

#1

seiken

    Membro Platinum PluS

  • Membro Prime
  • PipPipPipPipPipPipPip
  • 24.925 posts

Postado 01 Jun 2013 - 11:35

Autor: TheCodeBakers
Licença de uso do Curso: GPL Free Documentation
Publicado no site http://www.thecodebakers.org
Também comentem sobre curso lá .


Temas (Themes)

Um Tema (ou "Theme") é um conjunto de estilos aplicatos a uma Activity inteira (ou a uma aplicação inteira). É definido como os estilos e pode ser aplicado a uma Activity (tag
<activity>, do layout) ou à aplicação inteira (tag <application>) no arquivo "AndroidManifest.xml".

Abra o projeto "BioMago" novamente e veja o arquivo "AndroidManifest.xml":
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="br.com.thecodebakers.biomago" 
android:versionCode="01010001" 
android:versionName="@string/NOME_VERSAO"> 
 
<uses-sdk android:minSdkVersion="7" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
<application android:icon="@drawable/icon" android:label="@string/NOME_VERSAO"> 
<activity android:name=".activities.main" 
android:theme="@style/imagem" 
android:label="@string/NOME_VERSAO"> 
<intent-filter> 
<action android:name="android.intent.action.MAIN" /> 
<category android:name="android.intent.category.LAUNCHER" /> 
</intent-filter> 
</activity> 


Note que aplicamos um tema chamado "imagem", que deverá estar dentro de um arquivo Android XML, entre tags <style></style>, na pasta "res/values". Também deverá existir uma entrada em "R.java", criada automaticamente. Eis o estilo:
<style name="imagem" parent="@android:style/Theme.Black"> 
<item name="android:windowBackground">@drawable/fundo</item> 
</style> 
Ele usa o item "android:windowBackground", que permite informar um recurso de imagem (drawable) para ser aplcado ao fundo da tela.

Se procurarmos nas pastas "res/drawable..." veremos um arquivo "fundo.png", que é o fundo de tela, adaptado para formato "em pé" (portrait -port) ou "deitado" (landscape -land).

O Android já possui vários temas que podemos usar, como: "@android:style/Theme.Black", ou podemos herdar duas propriedades com o atributo "Parent".

Recursos de imagem

Um "drawable" é "algo que se pode desenhar", como uma imagem, por exemplo. Eles podem ser divididos por: resolução, idioma, orientação da tela etc, separando os arquivos em pastas, de acordo com os atributos das imagens.

As pastas "drawable" ficam dentro da pasta "res", em seu projeto. A cada imagem criada lá, uma nova entrada é criada na classe "R.java", sobre a qual nós já falamos anteriormente. Cada pasta "drawable" pode ter um ou mais sufixos, indicando ao Android qual é o tipo de recurso que está lá.


No projeto "BioMago" podemos ver estas pastas com seus recursos. Quando usamos uma imagem, o Android automaticamente seleciona de qual pasta ele vai pegar, dependendo da configuração do dispositivo móvel (ou do emulador) em uso.

As telas dos dispositivos que executam aplicações Android podem ter características totalmente diversas. A plataforma define como configuração básica (Baseline Configuration): HVGA (320x480) em uma tela de 3.2" polegadas. É recomendável que você inicie seu desenvolvimento sempre usando esta configuração.

Para ver um exemplo, você deve ter criado um AVD utilizando a configuração default ("HVGA"). Para iniciar um emulator fora do eclipse, abra uma janela console e digite:
Para Linux
1 - Abra a pasta onde instalou o Android-SDK e vá para a subpasta "tools"; 2 - Digite o comando: ./emulator -avd <nome do avd>;
Para Windows
1 - Abra a pasta onde instalou o Android-SDK e vá para a subpasta "tools"; 2 - Digite o comando: emulator -avd <nome do avd>;

Agora, abra outra janela de comandos (deixando a original aberta) e veja se o seu emulador está sendo executado corretamente:
Para Linux
1 - Abra a pasta onde instalou o Android-SDK e vá para a subpasta "platform-tools"; 2 - Digite o comando: ./adb devices; Você verá o seu emulador listado, incluindo qual Porta TCP ele está escutando. Depois, digite: ./adb logcat para ver o log de execução.
Para Windows
1 - Abra a pasta onde instalou o Android-SDK e vá para a subpasta "platform-tools"; 2 - Digite o comando: adb devices; Você verá o seu emulador listado, incluindo qual Porta TCP ele está escutando. Depois, digite: adb logcat para ver o log de execução.
É muito importante aprender a utilizar corretamente o ADB, por fora do "eclipse".

Voltando ao nosso assunto, as características das imagens podem ser:
Tamanho
Em polegadas medidas na diagonal maior;
Taxa de aspecto
Se é muito mais alta ou muito mais larga que a configuração básica;
Resolução
Quantidade de pixels na tela, normalmente medida por pixels horizontais x pixels verticais – 1 pixel = 1/72 de polegada
Densidade
Distribuição dos pixels pela tela – medida em DPI;

É muito importante adaptar os recursos de imagem de acordo com o tipo de tela que estamos esperando. Podemos até mesmo delimitar o tipo de dispositivo no qual nosso aplicativo roda, por exemplo, dentro do arquivo "AndroidManifest.xml", podemos especificar o elemento <supports-screens></supports-screens>, que permite estabelecer os tamanhos de tela suportados e se nossa aplicação sabe lidar com diferentes densidades:
  • "android:smallScreens" (true / false)
  • "android:normalScreens (true / false)
  • "android:largeScreens (true / false)
  • "android:anyDensity" (true / false) – se "true", o android desabilita seu mecanismo de escala automática de pixels, confiando na aplicação para isto. Se "false", o android liga seu mecanismo e faz a escala automaica
Padrões de sufixos

Para simplificar a vida do desenvolvedor, a plataforma Android criou os seguintes padrões:

Para tamanho de tela: small, normal, large e xlarge;
Para densidade: ldpi (baixa), mdpi (média), hdpi (alta) e xhdpi (muito alta);

Podemos classificar os recursos de imagem, colocando-os nas pastas apropriadas. O Android fornece uma tabela com os vários tipos de diretórios, de acordo com o tipo de tela ou idioma (http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources). Vamos reproduzir aqui os mais importantes:


sufixo
Exemplo
Descrição

Idioma
e região
-pt,
-pt-rBR, -en-rUS
Idioma
e região dos recursos contidos nesta pasta

Tamanho
de tela
-small,
-normal, -large, -xlarge
Recursos
classificados por tamanho de tela

Orientação
-port,
-land
Orientação
da tela, se está "em pé": portrait, ou "deitada":
landscape

Densidade
-ldpi,
-mdpi, -hdpi, -xhdpi e -nodpi
De
acordo com a densidade da tela. Se não for importante, use
"nodpi"

Podemos classificar nossos recursos de imagem combinando estes sufixos. desde que seja EXATAMENTE NA ORDEM DA TABELA, por exemplo:

"res/drawable-normal-port" : recursos de imagem para telas de tamanho normal () em orientação "em pé";
"res/drawable-land-hdpi" : recursos de imagem para telas em orientação "deitada" e de alta densidade;

Se tentarmos criar uma pasta assim: "res/drawable-ldpi-port", tomaremos um erro porque a ordem está incorreta.

Todos os diretórios de recursos, como: layouts, values e drawables, podem ter sufixos, desde que a ordem seja seguida.

Calculando a densidade

Nada impede que você use um só tamanho, independentemente de densidade ou tamanho da tela. O Android tenta carregar a imagem de acordo com a densidade da tela. Se não houver (por exemplo, você não está usando o sufixo de densidade ou então está usando "-nodpi") o Android tentará escalar a imagem para a densidade correta.

Providenciando as imagens de acordo com a densidade, nós evitamos este trabalho e nos certificamos de que as imagens apareçam corretamente, de acordo com a configuração básica do Android.

Os ícones de lançamento (Launch Icons) são um bom exercício de densidade. Eis o tamanho (em pixels) dos ícones de lançamento, de acordo com a densidade da tela:
  • ldpi: 36 x 36 pixels;
  • mdpi: 48 x 48 pixels;
  • hdpi: 72 x 72 pixels;

Podemos criar imagens de densidades e tamanhos diferentes utilizando programas gráficos como o GIMP (http://www.gimp.org/) . Criamos uma cópia da imagem do ícone em tamanho maior (72 x 72 pixels), colocamos na pasta "-drawable-hdpi". Depois, vamos diminuindo a imagem e colocando na pasta correspondente, até que tenhamos completado as três.


Portrait / Landscape

O Android automaticamente re-inicia nossa activity caso ocorra alguma mudança na configuração, como a orientação da tela, por exemplo. Neste caso, os métodos "onDestroy()" e "onRestart()" serão invocados. Não faz parte do escopo deste curso interceptar este comportamento.

Há certos dipos de imagens (e até layouts) que podem variar, dependendo da orientação da tela. Neste caso, podemos criar imagens de background adequadas e colocá-las nas pastas corretas ("-port" ou "-land"), respeitando a ordem mostrada na tabela anterior.

Observações

Os nomes das imagens em cada subdiretório de "drawable" devem ser iguais! Não use: letras maiúsculas, hífens e caracteres especiais (incluindo espaços) nos nomes das imagens!

Laboratório 5

Este é um "Big lab"!

Dentro do projeto do curso (http://code.google.com/p/curso-basico-thecodebakers/downloads/list), há um arquivo "exemplos_temas.zip", que contém algumas sugestões de imagens, tanto de ícones como de backgrounds, para que você melhore sua aplicação de fatoração. Use sempre a última como ponto inicial.

Neste laboratório, você vai:
  • Melhorar a aplicação, substituindo o botão por uma imagem (uma imagem "clicável", como o programa "BioMago" usa para inserir novo registro – ajuste a imagem de acordo com a densidade da tela;
  • Centralize a imagem e a caixa de texto. Crie estilos para ambos;
  • Crie fundos de tela para orientações diferentes;

Tente fazer! Se estiver ameaçado(a) de divórcio, não insista! Baixe logo a solução (http://code.google.com/p/curso-basico-thecodebakers/downloads/list).

Arquivo(s) anexado(s)


Não respondo dúvidas via email, caixa de entrada ou mensagem privada. Procure o fórum sobre seu aparelho e crie um tópico novo com a dúvida, assim não somente eu mas qualquer membro poderá ajudá-lo.