黑莓如何设计屏幕像个人资料屏幕!!黑莓7.0的代码

Question

我正在尝试为我的应用程序创建配置文件屏幕，要求是：

我在矢量和图像中以位图形式存在数据。唯一的问题是我正在努力弄清楚如何实现它，如何使照片部分与右手边的多个字段平行..

请帮帮我.. 在此先感谢..

Answer 1

您尚未指定应如何运作的所有内容。您可能希望配置文件图片随屏幕尺寸缩放。某些字段可能是可编辑的。我不确定你是否想要在3行文本/数字周围绘制背景或边框。所以，我不得不做出一些猜测。但是，这应该让您入门，并帮助您了解创建自定义Manager子类所需的内容，这是解决此问题的方法之一。

public class ProfileScreen extends MainScreen {


   public ProfileScreen() {
      super(MainScreen.NO_VERTICAL_SCROLL | MainScreen.NO_VERTICAL_SCROLLBAR);

      add(new ProfileManager());
   }

   private class ProfileManager extends Manager {

      private static final int PADDING = 20;  // TODO: might make this depend on screen size!
      private static final int ROW_PAD = PADDING / 2;
      private static final int NUM_ROWS = 3;

      private String _name = "Nate";
      private String _place = "USA";
      private String _phone = "1-206-123-4567";
      private String _email = "nate@stackoverflow.com";
      private Bitmap _photo;
      private Vector _text;
      private Vector _numbers;
      private LabelField _nameField;
      private LabelField _placeField;
      private LabelField _phoneField;
      private LabelField _emailField;
      private BitmapField _photoField;
      private LabelField[] _textFields;
      private LabelField[] _numberFields;
      private int[] _rowLocations;

      public ProfileManager() {
         super(Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR);

         // Create the data and the fields ... this would probably be more
         // dynamic in your production code, so the profile could change.
         _nameField = new LabelField(_name);
         _placeField = new LabelField(_place);
         _phoneField = new LabelField(_phone);
         _emailField = new LabelField(_email);
         _photo = Bitmap.getBitmapResource("avatar.png");
         _photoField = new BitmapField(_photo);
         _text = new Vector();
         _textFields = new LabelField[NUM_ROWS];
         for (int i = 0; i < NUM_ROWS; i++) {
            _text.insertElementAt("Text" + (i + 1), i);
            _textFields[i] = new LabelField(_text.elementAt(i), 
                  Field.USE_ALL_WIDTH | DrawStyle.HCENTER);
         }
         _numbers = new Vector();
         _numberFields = new LabelField[NUM_ROWS];
         for (int i = 0; i < NUM_ROWS; i++) {
            _numbers.insertElementAt("Number" + (i + 1), i);
            _numberFields[i] = new LabelField(_numbers.elementAt(i),
                  Field.USE_ALL_WIDTH | DrawStyle.HCENTER);
         }

         // We will store the bottom 3 row locations for use in paint()
         _rowLocations = new int[NUM_ROWS];

         // Add the fields to this manager
         add(_photoField);
         add(_nameField);
         add(_placeField);
         add(_phoneField);
         add(_emailField);

         for (int i = 0; i < NUM_ROWS; i++) {
            // Add one row of Text and Number fields
            add(_textFields[i]);
            add(_numberFields[i]);
         }         
      }

      public int getPreferredHeight() {
         return Display.getHeight();  // full screen
      }

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

      protected void sublayout(int width, int height) {
         setExtent(width, height);

         int x = PADDING;
         int y = PADDING;
         setPositionChild(_photoField, x, y);
         layoutChild(_photoField, _photo.getWidth(), _photo.getHeight());

         x += _photo.getWidth() + PADDING;
         int widthMinusPhoto = width - 3 * PADDING - _photo.getWidth();
         setPositionChild(_nameField, x, y);
         layoutChild(_nameField, widthMinusPhoto, _nameField.getPreferredHeight());

         y += _nameField.getHeight() + ROW_PAD;
         setPositionChild(_placeField, x, y);
         layoutChild(_placeField, widthMinusPhoto, _placeField.getPreferredHeight());

         y += _placeField.getHeight() + ROW_PAD;
         setPositionChild(_phoneField, x, y);
         layoutChild(_phoneField, widthMinusPhoto, _phoneField.getPreferredHeight());

         y += _phoneField.getHeight() + ROW_PAD;
         setPositionChild(_emailField, x, y);
         layoutChild(_emailField, widthMinusPhoto, _emailField.getPreferredHeight());

         // layout the 3 rows of Text and Numbers (1/3 width for each label field (?)
         x = PADDING;
         y = PADDING + _photo.getHeight() + PADDING + ROW_PAD;
         for (int i = 0; i < NUM_ROWS; i++) {
            setPositionChild(_textFields[i], x, y);
            // record the y coordinate of this row, to use in paint()
            _rowLocations[i] = y;
            layoutChild(_textFields[i], 
                  width / 3, _textFields[i].getPreferredHeight());

            setPositionChild(_numberFields[i], width - PADDING - width / 3, y);
            layoutChild(_numberFields[i], 
                  width / 3, _numberFields[i].getPreferredHeight());

            y += _textFields[i].getPreferredHeight() + PADDING + 2 * ROW_PAD;
         }               
      }

      // paint overridden to draw gray box behind Text/Number rows
      protected void paint(Graphics graphics) {
         int oldColor = graphics.getColor();

         // paint a light gray background behind each row of Text/Numbers
         graphics.setColor(Color.LIGHTGRAY);
         for (int i = 0; i < NUM_ROWS; i++) {            
            // if you want a solid border, use drawRect() instead of fillRect():
            graphics.fillRect(PADDING, _rowLocations[i] - ROW_PAD, 
                  getWidth() - 2 * PADDING, _textFields[i].getHeight() + 2 * ROW_PAD);
         }
         graphics.setColor(oldColor); // reset the color for super.paint()
         super.paint(graphics);
      }                 
   }
}

在自定义paint()类中覆盖Manager并不总是 required 。 sublayout()是完成大部分工作的地方，用于定位领域。在这种情况下，我选择覆盖paint()以便在多个字段周围提供自定义边框。这不是唯一的方式，但肯定有时候您希望能够添加自定义绘图代码，以改善UI的外观。

结果