2

我正在开发一个黑莓应用程序。我有一个标题,您可以在下图中看到,分辨率低,占用的空间大于宽度,目前在 BB Bold 9900 Simulator 上进行测试。所以我尝试使用以下代码来防止 UI 破坏。

问题

  1. 它是防止UI破坏的正确代码吗?
  2. 如果是,那么通过使用此代码,我们如何将按钮向右对齐并将徽标向左对齐。

我应该遵循哪种设计/UI 来防止不同分辨率设备中的 UI 破坏?

ImageButton Login = new ImageButton(configModel.getLoginButton(), FOCUSABLE, "login.png", "plogin.png",0x9cbe95);
HorizontalFieldManager hfm = new HorizontalFieldManager(Field.FIELD_HCENTER);
HorizontalFieldManager kenexaLogoHfm = new HorizontalFieldManager(hfm.FIELD_LEFT);
HorizontalFieldManager loginButtonHfm = new HorizontalFieldManager(hfm.FIELD_RIGHT);

Bitmap logo = Bitmap.getBitmapResource("logo.png");
NullField nullField = new NullField();
BitmapField kenexaLogo = new BitmapField(logo);

kenexaLogoHfm.add(new LabelField("", NON_FOCUSABLE));
kenexaLogoHfm.add(kenexaLogo);
kenexaLogoHfm.add(nullField);

loginButtonHfm.add(Login);

hfm.setPadding(0, 5, 0, 5);
hfm.add(kenexaLogoHfm);
hfm.add(loginButtonHfm)
add(hfm);

在此处输入图像描述

以下是 ImageButton 的代码

public class ImageButton extends Field{

        //Image Button Class 
        private String _label;
        private int _labelHeight;
        private int _labelWidth;
        private Font _font;

        private Bitmap _currentPicture;
        private Bitmap _onPicture;
        private Bitmap _offPicture;
        int color;

        public ImageButton(String text, long style ,String img, String img_hvr, int color){
            super(style);

            _offPicture = Bitmap.getBitmapResource(img);
            _onPicture = Bitmap.getBitmapResource(img_hvr);

            _font = Font.getDefault().derive(Font.BOLD, 7, Ui.UNITS_pt);
            _label = text;


            _labelHeight = _onPicture.getHeight();  
            _labelWidth = _onPicture.getWidth();

            this.color = color;

            _currentPicture = _offPicture;
        }
        public void setImage(String img){

            _offPicture = Bitmap.getBitmapResource(img); 
            _currentPicture = _offPicture;
        }

        /**
         * @return The text on the button
         */
        public void setText(String text){
            _label = text;
        }
            String getText(){
            return _label;
        }

        /**
         * Field implementation.
         * @see net.rim.device.api.ui.Field#getPreferredHeight()
         */
        public int getPreferredHeight(){
            return _labelHeight;
        }
        /**
         * Field implementation.
         * @see net.rim.device.api.ui.Field#getPreferredWidth()
         */
        public int getPreferredWidth(){
            return _labelWidth;
        }

        /**
         * Field implementation.  Changes the picture when focus is gained.
         * @see net.rim.device.api.ui.Field#onFocus(int)
         */
        protected void onFocus(int direction) {

             _currentPicture = _onPicture;
          //  invalidate();
            super.onFocus(direction);
        }

        /**
         * Field implementation.  Changes picture back when focus is lost.
         * @see net.rim.device.api.ui.Field#onUnfocus()
         */
        protected void onUnfocus() {
            _currentPicture = _offPicture;
            invalidate();
            super.onUnfocus();
        }

        /**
         * Field implementation.  
         * @see net.rim.device.api.ui.Field#drawFocus(Graphics, boolean)
         */
//      protected void drawFocus(Graphics graphics, boolean on) {
//          // Do nothing
//      }
        protected void drawFocus(Graphics graphics, boolean on) {
            if (on) {
                     //draw your own custom focus.
                    }
                }
        /**
         * Field implementation.
         * @see net.rim.device.api.ui.Field#layout(int, int)
         */
        protected void layout(int width, int height) {
            setExtent(Math.min( width, getPreferredWidth()),
            Math.min( height, getPreferredHeight()));
        }
        /**
         * Field implementation.
         * @see net.rim.device.api.ui.Field#paint(Graphics)
         */
        protected void paint(Graphics graphics){      
            // First draw the background colour and picture
            graphics.setColor(this.color);
            graphics.fillRect(0, 0, getWidth(), getHeight());
            graphics.drawBitmap(0, 0, getWidth(), getHeight(), _currentPicture, 0, 0);

            // Then draw the text
            graphics.setColor(Color.WHITE);
            graphics.setFont(_font);
            graphics.setFont(graphics.getFont().derive(Font.BOLD)); 
            graphics.drawText(_label, 5,9,
                (int)( getStyle() & DrawStyle.ELLIPSIS | DrawStyle.VALIGN_MASK | DrawStyle.HALIGN_MASK),
                getWidth() - 6 );

        }

        /**
         * Overridden so that the Event Dispatch thread can catch this event
         * instead of having it be caught here..
         * @see net.rim.device.api.ui.Field#navigationClick(int, int)
         */
        protected boolean navigationClick(int status, int time){
            fieldChangeNotify(1);
            return true;
        } 
}
4

1 回答 1

2

我建议去掉几个不必要的HorizontalFieldManager对象,只使用以下代码:

  HorizontalFieldManager hfm = new HorizontalFieldManager(Field.USE_ALL_WIDTH);
  VerticalFieldManager vfm = new VerticalFieldManager(Field.USE_ALL_WIDTH);

  Bitmap logo = Bitmap.getBitmapResource("logo.png");
  BitmapField kenexaLogo = new BitmapField(logo, Field.FIELD_LEFT);
  
  hfm.add(new NullField());  // to take focus from login button
  hfm.add(kenexaLogo);
  vfm.add(new ButtonField("Login", Field.FIELD_RIGHT));
  hfm.add(vfm);
  
  hfm.setPadding(0, 5, 0, 5);
  add(hfm);

注意:我必须创建一个新的ButtonField,因为您没有显示您的登录按钮是如何创建的(在原始问题中),这很重要,在这里。

问题是 aHorizontalFieldManager试图在其使用的空间上提高效率。因此,如果您只添加两个真实字段(徽标和按钮),而这些不足以填充宽度,则不会将按钮放在右侧。

你需要在你的 中添加一个VerticalFieldManagerHoriztonalFieldManager告诉它使用所有可用的宽度,然后将按钮传递给它,它是用FIELD_RIGHT标志创建的。字段的这些标志告诉它们的容器将它们放置在哪里。将VerticalFieldManager尊重FIELD_RIGHT并将登录按钮放在右侧,如您所愿。

更多的

我可能还建议不要硬编码 5 像素左右填充,而是设置一个填充常量,它是屏幕宽度的给定百分比:

int pad = Display.getWidth() / 100;
hfm.setPadding(0, pad, 0, pad);

但是,这是一个单独的问题。

在尝试调试此类布局问题时,我发现另一件有用的事情是在布局中的每个管理器或字段上设置不同的背景颜色。这可以帮助您查看和了解正在发生的事情。只需使用这个:

hfm.setBackground(BackgroundFactory.createSolidBackground(Color.RED));  // TODO: remove!
于 2013-05-14T21:52:12.363 回答