1

我正在尝试创建一个聊天屏幕。在该屏幕中，对于文本背景，我使用图像并根据消息文本中的字符数调整该背景图像的大小。

问题是，当字符较小时，会显示图像，但是当字符数量增加时，整个屏幕上的图像会不必要地拉伸。

此外，如果第一条消息很长，图像将被拉伸，但是当我们发送下一条较小字符的消息时，所有背景图像都会根据最后一条消息的大小缩小。它显示在屏幕截图的前两条消息中。

在一行中，我们可以说，图像根据整个屏幕上的最后一条消息大小进行拉伸或收缩。

在此处输入图像描述

白色背景的代码在这里：

public void sendMessage(String msg) {
    HorizontalFieldManager chatHFM = new HorizontalFieldManager();

    offsets_me[2] = offsets_me[1] + msg.length();

    BitmapField bitmapField = new BitmapField(_myPic);
    bitmapField.setBorder(roundedBorder1);

    imageVFM = new VerticalFieldManager();
    imageVFM.setMargin(0,0,0,0);
    imageVFM.add(bitmapField);

    _text_Length = msg.length()+ 6;

    if(_text_Length<=60){
        if(Constants.displayWidth<=360){
            _bgImage_White = Constants.sizePic(EncodedImage.getEncodedImageResource("white_l.png"), 70, 200);
        }else if(Constants.displayWidth>360 && Constants.displayWidth<640){
            _bgImage_White = Constants.sizePic(EncodedImage.getEncodedImageResource("white_l.png"), 90, 330);
        }else if(Constants.displayWidth>=640){
            _bgImage_White = Constants.sizePic(EncodedImage.getEncodedImageResource("white_l.png"), 100, 500);
        }
    }else if(_text_Length>60 && _text_Length <=120){
        if(Constants.displayWidth<=360){
            _bgImage_White = Constants.sizePic(EncodedImage.getEncodedImageResource("white_l.png"), 140, 200);
        }else if(Constants.displayWidth>360 && Constants.displayWidth<640){
            _bgImage_White = Constants.sizePic(EncodedImage.getEncodedImageResource("white_l.png"), 170, 330);
        }else if(Constants.displayWidth>=640){
            _bgImage_White = Constants.sizePic(EncodedImage.getEncodedImageResource("white_l.png"), 200, 500);
        }
    }else if(_text_Length>120 && _text_Length<200){
        if(Constants.displayWidth<=360){
            _bgImage_White = Constants.sizePic(EncodedImage.getEncodedImageResource("white_l.png"), 200, 200);
        }else if(Constants.displayWidth>360 && Constants.displayWidth<640){
            _bgImage_White = Constants.sizePic(EncodedImage.getEncodedImageResource("white_l.png"), 240, 330);
        }else if(Constants.displayWidth>=640){
            _bgImage_White = Constants.sizePic(EncodedImage.getEncodedImageResource("white_l.png"), 270, 500);
        }
    }

    textVFM = new VerticalFieldManager(){
        protected void paint(Graphics graphics) {
            graphics.drawBitmap(0,0 , _bgImage_White.getWidth() , getHeight(), _bgImage_White, 0, 0);
            super.paint(graphics);
        }
    };

    EditField richTextField = new EditField("" ,"" ,140, 0L){ 
        protected void paint(Graphics graphics) {
            graphics.setColor(Color.RED);
            super.paint(graphics);
        }
        public void layout (int width, int height) {
            super.layout (width, height);
            if (getExtent().height < _bgImage_White.getHeight()){
                setExtent (width, _bgImage_White.getHeight());
            }else{setExtent (width, _bgImage_White.getHeight());}

        }
    };
    //  richTextField.setBorder(roundedBorder1);
    richTextField.setText("Me : "+msg);
    richTextField.setEditable(false);
    richTextField.setMargin(10,10,10,10);
    textVFM.add(richTextField);
    textVFM.setMargin(0,75,0,0);
    chatHFM.add(imageVFM);
    chatHFM.add(textVFM);
    chatHFM.setMargin(8,0,8,0);
    this.add(chatHFM);
    this.add(new NullField(NullField.FOCUSABLE));    
}
4

1 回答 1

2

Download the Advance UI code from the below link:

Advance UI

Run and check the UIExampleNegativeMarginScreen class.

I think it will help you.

Implementation of Advance UI components

于 2013-06-18T11:10:53.000 回答