1

i am trying to make the Profile screen for my Application and the Requirement is :

Profile Image

I have the Data with me in the Vector and Image in bitmap form.. Only problem is that i am Struggling to figure out how it can be achieved, How to make the Photo Section parallel to the multiple Fields in Right hand Side..

Please help me out.. Thanks in Advance..

4

1 回答 1

3

你还没有详细说明这应该如何工作。您可能希望个人资料图片随屏幕大小缩放。某些字段可能是可编辑的。我不确定您是否想要在 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);
      }                 
   }
}

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

结果

在此处输入图像描述

于 2013-09-22T10:40:53.683 回答