如何编写多页标签页 Tab Control组件，附全部代码

OS 5.0的黑莓平台没有提供多页标签栏，下面我们来实现一个。

 

效果如下图，三个栏目，选择不同的栏目（TabItem），下面的内容不同（Manager）。

 

标签页是用一个定制的Field   TabItem，在paint()方法中根据该Field是focus与否的状态选择显示不同的背景图片。

 

标签页被选中的时候，调用fieldChangeNotify( 0 )方法通知TabControl窗口需要更换标签页下面的manager显示不同的内容。

 

 

 

 

 

代码中用到的三个资源文件：

tabitem_default.png   ，注意图片的右边，是有个凹陷的效果

 

tabitem_selected.png，和上面的图片是相同大小，但是颜色是白色的，右边有个竖线

 

table_background.png，这张图片将被铺满整条横向的Tab栏目。

 

 

 

详细代码如下：

TabControl.java

TabItem.java

BaseButtonField.java

 package cn.rim.samples.tabcontrol;

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.decor.Background;
import net.rim.device.api.ui.decor.BackgroundFactory;

public class TabControl extends Manager {

 public TabControl() {
  super(0);
  Background bitmapBackground = BackgroundFactory.createBitmapBackground(Bitmap.getBitmapResource("table_background.png"));
  setBackground(bitmapBackground);
 }

 public int getPreferredWidth() {
  return Display.getWidth();
 }

 public int getPreferredHeight() {
  if (getFieldCount()>0)
   return getField(0).getPreferredHeight();
  else
   return 5;
 }

 protected void sublayout(int width, int height) {
     int x = 0;
     int y = 0;
     Field field;
     int numberOfFields = getFieldCount();
     for (int i=0; i<numberOfFields; ++i) {
        field = getField(i);
        setPositionChild(field, x, y);
        layoutChild(field, width, height);
       
        x += field.getPreferredWidth();
     }
     setExtent(getPreferredWidth(), getPreferredHeight());
 }
 
    protected boolean navigationMovement ( int dx, int dy, int status, int time ) {
       
        int focusIndex = getFieldWithFocusIndex();
     int columns = getFieldCount();
        if (dx > 0 ) { //向右滚动
         if ( focusIndex < columns-1 ) {
                getField(focusIndex+1).setFocus();
                return true;
         }else {
                getField(0).setFocus();
                return true;
         }
        }
        if (dx < 0) {//向左滚动
         if ( focusIndex ==0 ) {
                getField(columns-1).setFocus();
                return true;
         }else {
                getField(focusIndex-1).setFocus();
                return true;
         }
        }
       
        //向上向下的滚动这里就不做处理了
        return false;
    }
}

 

--------------------------------------------------------------------------------------------------------

package cn.rim.samples.tabcontrol;

import net.rim.device.api.system.*;
import net.rim.device.api.ui.*;

public class TabItem extends BaseButtonField
{
    private Bitmap[] _bitmaps;
    private static final int NORMAL = 0;
    private static final int FOCUS = 1;
   
    private String text; //标签栏文字
/*   
    public BitmapButtonField( Bitmap normalState )
    {       
        this( normalState, normalState, 0 );
    }
*/   
    public TabItem( Bitmap normalState, Bitmap focusState )
    {       
        this( normalState, focusState, 0 );
    }
   
    public TabItem( Bitmap normalState, Bitmap focusState, long style )
    {       
        super( Field.FOCUSABLE | style );
       
        if( (normalState.getWidth() != focusState.getWidth())
            || (normalState.getHeight() != focusState.getHeight()) ){
           
            throw new IllegalArgumentException( "Image sizes don't match" );
        }
       
        _bitmaps = new Bitmap[] { normalState, focusState };
    }
   
    //Yang Jiang
    public void setText(String value) {
     this.text = value;
    }
   
    public void setImage( Bitmap normalState ){
        _bitmaps[NORMAL] = normalState;
        invalidate();
    }
   
    public void setFocusImage( Bitmap focusState ){
        _bitmaps[FOCUS] = focusState;
        invalidate();
    }
   
    public int getPreferredWidth() {
        return _bitmaps[NORMAL].getWidth();
    }
   
    public int getPreferredHeight() {
        return _bitmaps[NORMAL].getHeight();
    }
   
    protected void layout( int width, int height ) {
        setExtent( _bitmaps[NORMAL].getWidth(), _bitmaps[NORMAL].getHeight() );
    }
   
    protected void paint( Graphics g ) {
        int index = g.isDrawingStyleSet( Graphics.DRAWSTYLE_FOCUS ) ? FOCUS : NORMAL;
        g.drawBitmap( 0, 0, _bitmaps[index].getWidth(), _bitmaps[index].getHeight(), _bitmaps[index], 0, 0 );
  g.drawText(text, 0, this.getHeight()/2,
    Graphics.VCENTER | Graphics.HCENTER, this.getWidth());
    }
   
    /**
     * With this commented out the default focus will show through
     * If an app doesn't want focus colours then it should override this and do nothing
     **/
    /*
    protected void paintBackground( Graphics g ) {
        // Nothing to do here
    }
    */
   
    protected void drawFocus( Graphics g, boolean on ) {
        // Paint() handles it all
        g.setDrawingStyle( Graphics.DRAWSTYLE_FOCUS, true );
        paintBackground( g );
        paint( g );
    }
}

 

--------------------------------------------------------------------------------------------------------

package cn.rim.samples.tabcontrol;

import net.rim.device.api.system.*;
import net.rim.device.api.ui.*;

/**
 * Implements all the stuff we don't want to do each time we need a new button
 */
public abstract class BaseButtonField extends Field
{
    private XYRect _drawFocusTempRect = new XYRect();
   
    public BaseButtonField()
    {
        this( 0 );
    }
   
    public BaseButtonField( long style )
    {       
        super( Field.FOCUSABLE | style );
    }
       
    protected void layout( int width, int height )
    {
        setExtent( 10, 10 );
    }
   
    protected void drawFocus( Graphics g, boolean on )
    {
        getFocusRect( _drawFocusTempRect );
   
        boolean oldDrawStyleFocus = g.isDrawingStyleSet( Graphics.DRAWSTYLE_FOCUS );
        boolean notEmpty = g.pushContext( _drawFocusTempRect.x, _drawFocusTempRect.y, _drawFocusTempRect.width, _drawFocusTempRect.height, 0, 0 );

        try {
            if( notEmpty ) {
                g.setDrawingStyle( Graphics.DRAWSTYLE_FOCUS, on );
                paintBackground( g );
                paint( g );
            }
        } finally {
            g.popContext();
            g.setDrawingStyle( Graphics.DRAWSTYLE_FOCUS, oldDrawStyleFocus );
        }
    }
   
    protected boolean keyChar( char character, int status, int time )
    {
        if( character == Characters.ENTER ) {
            clickButton();
            return true;
        }
        return super.keyChar( character, status, time );
    }
   
    protected boolean navigationClick( int status, int time )
    {
        clickButton();
        return true;   
    }
   
    protected boolean trackwheelClick( int status, int time )
    {       
        clickButton();   
        return true;
    }
   
    protected boolean invokeAction( int action )
    {
        switch( action ) {
            case ACTION_INVOKE: {
                clickButton();
                return true;
            }
        }
        return super.invokeAction( action );
    }   

    public void setDirty( boolean dirty ) {
        // We never want to be dirty or muddy
    }
    
    public void setMuddy( boolean muddy ) {
        // We never want to be dirty or muddy
    }
        
    /**
     * A public way to click this button
     */
    public void clickButton()
    {
        fieldChangeNotify( 0 );
    }
}

--------------------------------------------------------------------------------------------------------

package cn.rim.samples.tabcontrol;

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.FocusChangeListener;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.component.SeparatorField;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;
import net.rim.device.api.ui.decor.Background;
import net.rim.device.api.ui.decor.BackgroundFactory;

public class DemoApp extends UiApplication {

 public DemoApp() {
  TabControlScreen screen = new TabControlScreen();
  pushScreen(screen);
 }

 /**
  * @param args
  */
 public static void main(String[] args) {
  DemoApp app = new DemoApp();
  app.enterEventDispatcher();
 }

 private class TabControlScreen extends MainScreen implements FocusChangeListener {

  private TabItem tab1;
  private TabItem tab2;
  private TabItem tab3;

  private Manager tabArea;

  private Manager tab1Manager;
  private Manager tab2Manager;
  private Manager tab3Manager;
  

  public TabControlScreen() {
   TabControl tabcontrol = new TabControl();
  
   tab1 = new TabItem(Bitmap.getBitmapResource("tabitem_default.png"), Bitmap.getBitmapResource("tabitem_selected.png"));
   tab1.setText("Page 1");
   tab2 = new TabItem(Bitmap.getBitmapResource("tabitem_default.png"), Bitmap.getBitmapResource("tabitem_selected.png"));
   tab2.setText("Page 2");
   tab3 = new TabItem(Bitmap.getBitmapResource("tabitem_default.png"), Bitmap.getBitmapResource("tabitem_selected.png"));
   tab3.setText("Page 3");
   
   tab1.setFocusListener(this);
   tab2.setFocusListener(this);
   tab3.setFocusListener(this);
   tabcontrol.add(tab1);
   tabcontrol.add(tab2);
   tabcontrol.add(tab3);
   
   add(tabcontrol);
   add(new SeparatorField());
   
   tabArea = displayTab1();
   add(tabArea);
  }

  public void focusChanged(Field field, int eventType) {
   if (tabArea != null) {
    if (eventType == FOCUS_GAINED) {
     if (field == tab1) {
      System.out.println("Switch to Tab 1");
      delete(tabArea);
      tabArea = displayTab1();
      add(tabArea);
     } else if (field == tab2) {
      System.out.println("Switch to Tab 2");
      System.out.println("Switch to Tab 1");
      delete(tabArea);
      tabArea = displayTab2();
      add(tabArea);
     } else if (field == tab3) {
      System.out.println("Switch to Tab 3");
      System.out.println("Switch to Tab 1");
      delete(tabArea);
      tabArea = displayTab3();
      add(tabArea);
     }
    }
   }

  }

  public Manager displayTab1() {
   if (tab1Manager == null) {
    tab1Manager = new VerticalFieldManager();
    tab1Manager.add(new LabelField ("Tab 1 content here."));
    tab1Manager.add(new LabelField ("Tab 1 content here again."));
   }
   return tab1Manager;
  }

  public Manager displayTab2() {
   if (tab2Manager == null) {
    tab2Manager = new VerticalFieldManager();
    tab2Manager.add(new LabelField ("Tab 2 content here."));
    tab2Manager.add(new LabelField ("Tab 2 content here again."));
   }
   return tab2Manager;
  }

  public Manager displayTab3() {
   if (tab3Manager == null) {
    tab3Manager = new VerticalFieldManager();
    tab3Manager.add(new LabelField ("Tab 3 content here."));
    tab3Manager.add(new LabelField ("Tab 3 content here again."));
   }
   return tab3Manager;
  }
 }
}
--------------------------------------------------------------------------------------------------------