segunda-feira, 26 de março de 2007

Menu utilizando Canvas - Estilo Nokia, Sony Ericsson...

Sejam bem-vindos novamente ! :-)

Meu post hoje é para mostrar a vocês um menu que criei utilizando Canvas e me inspirando um pouco nos menus da Nokia (série 60, série N, etc), Sony Ericsson, entre outros modelos que mesclam figuras e textos.

A figura ao lado mostra o celular N95 da Nokia que utiliza esse conceito de Menu.

Funcionamento básico:
É um menu compo
sto por figuras, onde existe um "quadrado" de seleção que fica de fundo das figuras conforme o usuário navega pelas opções. O nome da opção é mostrado como título e fica no alto da tela ( o posicionamento exato depende da implementação de cada fabricante).

As figuras abaixo mostram o menu no emulado da Nokia para série 40 (duas primeiras imagens, sendo a segunda a continuação da primeira) e a ultima imagem uma figura do emulado para série 60.

Porque fiz esse menu?
Utilizo esse menu como o menu principal das minhas aplicações, e da forma como estava antes (eu fixava a quantidade de imagens por linha, e não havia scroll dos icones) eu tinha sérios problemas com modelos diferentes e telas diferentes, pois fiz a montagem inicial me baseando nos celulares da Série 40 2ª edição da Nokia (com um visor de 128x28).
Então resolvi criar um menu novo, onde a própria classe faria os cálculos de como posicionar as imagens na tela e assim não teria problemas com as diferentes telas de celulares.

Como reutilizar o menu?
Depois de fazer o dowload do menu, você irá encontrar o arquivo MenuNokiaStyleCanvas.java que é o menu em si.

Nessa classe você irá alterar apenas TRÊS variáveis:

  1. widthIcon: Largura do ícone em pixels.
  2. heightIcon: Altura do ícone em pixels.
  3. margemQuadrante: Margem do quadrante, servirá de base para desenhar o fundo que serve de indicação de seleção

Além disso, a carga com os dados de cada opção do menu será encontrada no método protected void carregaOpcoes(). Também coloquei alguns comandos para exemplificar alguns pontos e demonstrar outros.

E o código foi comentado da melhor maneira possível (na minha opinião) para que conforme você vá lendo o código, consiga entendê-los! ;-)

Esse menu ainda é uma primeira versão, pretendo adicionar diversas funcionalidades, mas acho que serve de base pro pessoal que ta começando e não tem muita noção de como fazer um menu sem ser aqueles terríveis lists !!! ;-)

No zip disponível, é possível encontrar o .jad e o .jar caso deseje testar o menu.
Arquivo disponível em: http://weblogs.java.net/blog/netomarin/archive/examples/MenuNokiaStyle.zip

[]s a todos!!!!