×
Namespaces

Variants
Actions

Menu com abas, em Java ME

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

Artigo
Tradução:
Por valderind4
Última alteração feita por lpvalente em 13 Oct 2013

Neste artigo, nós construiremos um menu com abas reusável, usando Java ME.

J2me tabbed menu.jpg

Visão dele funcionando

Você pode encontrar um MIDlet mostrando este componente funcionando aqui.

Nosso componente usará:

  • Completo estilo de abas(bg color, fore color, font face, margin, paddings e corner radius)
  • Rolagem horizontal automática, assim você pode colocar muitas abas, caso você queira, sem se preocupar com a largura da tela

Construindo o menu com abas

Vamos iniciar pelas variáveis de instância, cujo o objetivo é auto-explicativo:

int background = 0xffffff;
int bgColor = 0xcccccc;
int bgFocusedColor = 0x0000ff;
int foreColor = 0x000000;
int foreFocusedColor = 0xffffff;
int cornerRadius = 4;
int padding = 2;
int margin = 2;
Font font = Font.getDefaultFont();
int scrollStep = 20;

Então nós definiremos algumas variáveis internas, usadas para manter o estado do menu com abas.

int selectedTab = 0;	//selected tab index
int[] tabsWidth = null; //width of single tabs
int[] tabsLeft = null; //left X coordinate of single tabs
int tabHeight = 0; //height of tabs (equal for all tabs)
String[] tabs = null; //tab labels
int menuWidth = 0; //total menu width
 
int viewportWidth = 0; //visible viewport width
int viewportX = 0; //current viewport X coordinate

Agora, nós definiremos um construtor simples aceitando marcadores de abas e parâmetros de largura viewport:

public TabMenu(String[] tabs, int width)
{
this.tabs = tabs;
 
this.viewportWidth = width;
 
initialize();
}
void initialize()
{
tabHeight = font.getHeight() + cornerRadius + 2 * padding;
 
menuWidth = 0;
 
tabsWidth = new int[tabs.length];
tabsLeft = new int[tabs.length];
 
for(int i = 0; i < tabsWidth.length; i++)
{
tabsWidth[i] = font.stringWidth(tabs[i]) + 2 * padding + 2 * cornerRadius;
 
tabsLeft[i] = menuWidth;
 
menuWidth += tabsWidth[i];
 
if(i > 0)
{
menuWidth += margin;
}
}
}

Agora, nós vamos definir um método útil para verificar se uma aba está visível ou não.

private boolean isTabVisible(int tabIndex)
{
return tabsLeft[tabIndex] < viewportX + viewportWidth &&
tabsLeft[tabIndex] + tabsWidth[tabIndex] >= viewportX;
}

E agora, nós implementaremos o método de mudança/rolagem de abas, que usará o método isTabVisible abaixo:

public void goRight()
{
go(+1);
}
public void goLeft()
{
go(-1);
}
private void go(int delta)
{
int newTab = Math.max(0, Math.min(tabs.length - 1, selectedTab + delta));
 
boolean scroll = true;
 
if(newTab != selectedTab && isTabVisible(newTab))
{
selectedTab = newTab;
 
if( (delta > 0 && tabsLeft[selectedTab] + tabsWidth[selectedTab] > viewportX + viewportWidth) ||
(delta < 0 && tabsLeft[selectedTab] < viewportX))
{
scroll = true;
}
else
{
scroll = false;
}
}
if(scroll)
{
viewportX = Math.max(0, Math.min(menuWidth - viewportWidth, viewportX + delta * scrollStep));
}
}

E agora, nós estamos prontos para desenhar o nosso menu :)

public void paint(Graphics g)
{
int currentX = - viewportX;
 
g.setClip(0, 0, viewportWidth, tabHeight);
 
g.setColor(background);
g.fillRect(0, 0, viewportWidth, tabHeight);
 
for(int i = 0; i < tabs.length; i++)
{
g.setColor(i == selectedTab ? bgFocusedColor : bgColor);
 
g.fillRoundRect(currentX, 0, tabsWidth[i], tabHeight + cornerRadius, 2 * cornerRadius, 2 * cornerRadius);
 
g.setColor(i == selectedTab ? foreFocusedColor : foreColor);
 
g.drawString(tabs[i], currentX + cornerRadius + padding, cornerRadius + padding, Graphics.LEFT | Graphics.TOP);
 
currentX += tabsWidth[i] + margin;
}
}

Download do código fonte

Você pode fazer o download do código fonte do menu com abas aqui:

This page was last modified on 13 October 2013, at 19:36.
73 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×