Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Resize image</h2> <pre><code> public EncodedImage sizeImage(EncodedImage image, int width, int height) { EncodedImage result = null; int currentWidthFixed32 = Fixed32.toFP(image.getWidth()); int currentHeightFixed32 = Fixed32.toFP(image.getHeight()); int requiredWidthFixed32 = Fixed32.toFP(width); int requiredHeightFixed32 = Fixed32.toFP(height); int scaleXFixed32 = Fixed32.div(currentWidthFixed32, requiredWidthFixed32); int scaleYFixed32 = Fixed32.div(currentHeightFixed32, requiredHeightFixed32); result = image.scaleImage32(scaleXFixed32, scaleYFixed32); return result; } </code></pre> <p>This function will be used in the code below.</p> <h2>Simply painting images</h2> <p><a href="http://img268.imageshack.us/img268/9918/bb8310.png" rel="nofollow noreferrer">Simply painting images http://img268.imageshack.us/img268/9918/bb8310.png</a></p> <p>Lets paint 9 images in a table way, images are different in size, but we will resize them to 80x80 and give them margins 10 px.</p> <p>Assuming you have 9 png images in your project resources.</p> <ol> <li>Load images</li> <li>Resize images</li> <li>Paint images on every paint event, within certain position</li> </ol> <p>Code: </p> <pre><code>class Scr extends MainScreen { int mImgWidth = 80; int mImgHeight = 80; int mImgMargin = 10; String fileNames[] = { "1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png", "9.png" }; EncodedImage[] mImages; public Scr() { super(); prepareImages(); } private void prepareImages() { mImages = new EncodedImage[fileNames.length]; for (int i = 0; i &lt; fileNames.length; i++) { EncodedImage image = EncodedImage .getEncodedImageResource(fileNames[i]); mImages[i] = sizeImage(image, mImgWidth, mImgHeight); } } protected void paint(Graphics graphics) { paintImages(graphics); super.paint(graphics); } private void paintImages(Graphics graphics) { int scrWidth = Display.getWidth(); int columns = scrWidth / (mImgWidth + 2 * mImgMargin); int rows = mImages.length / columns + (mImages.length % columns &gt; 0 ? 1 : 0); for (int i = 0; i &lt; rows; i++) { for (int j = 0; j &lt; columns; j++) { int posX = j * (mImgWidth + 2 * mImgMargin) + mImgMargin; int posY = i * (mImgHeight + 2 * mImgMargin) + mImgMargin; EncodedImage image = mImages[i * columns + j]; graphics.drawImage(posX, posY, mImgWidth, mImgHeight, image, 0, 0, 0); } } } } </code></pre> <h2>Simply painting images - optimization</h2> <p>Take a look at paint() method of Scr. On every refresh the whole table of images is repainting, that means 9 drawImage call on every paint. What if we just take a shapshot of this table and use it in paint() method?</p> <pre><code>class ScrOpt extends MainScreen { int mScrWidth = Display.getWidth(); int mScrHeight = Display.getHeight(); int mImgWidth = 80; int mImgHeight = 80; int mImgMargin = 10; String fileNames[] = { "1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png", "9.png" }; EncodedImage[] mImages; Bitmap mImgTable; public ScrOpt() { super(); prepareImages(); mImgTable = paintImages(); } private void prepareImages() { mImages = new EncodedImage[fileNames.length]; for (int i = 0; i &lt; fileNames.length; i++) { EncodedImage image = EncodedImage .getEncodedImageResource(fileNames[i]); mImages[i] = sizeImage(image, mImgWidth, mImgHeight); } } private Bitmap paintImages() { Bitmap result = new Bitmap(mScrWidth, mScrHeight); Graphics graphics = new Graphics(result); int scrWidth = mScrWidth; int columns = scrWidth / (mImgWidth + 2 * mImgMargin); int rows = mImages.length / columns + (mImages.length % columns &gt; 0 ? 1 : 0); for (int i = 0; i &lt; rows; i++) { for (int j = 0; j &lt; columns; j++) { int posX = j * (mImgWidth + 2 * mImgMargin) + mImgMargin; int posY = i * (mImgHeight + 2 * mImgMargin) + mImgMargin; EncodedImage image = mImages[i * columns + j]; graphics.drawImage(posX, posY, mImgWidth, mImgHeight, image, 0, 0, 0); } } return result; } protected void paint(Graphics graphics) { super.paint(graphics); graphics.drawBitmap(0, 0, mScrWidth, mScrHeight, mImgTable, 0, 0); } } </code></pre> <p>You can otimize it even more, <a href="https://stackoverflow.com/questions/1365727/how-to-set-a-background-image-in-blackberry-jde-4-5-0-programming/1371657#1371657">using paintBackground() method</a></p> <h2>Using BitmapField</h2> <p>All above is about painting images directly to screen using <a href="http://www.blackberry.com/developers/docs/4.5.0api/net/rim/device/api/ui/Graphics.html" rel="nofollow noreferrer">Graphics</a>. Sometimes its great - when you want to display some animation or background image. But what if you want to keep standard UI user experience, and use images as a fields? </p> <p><a href="http://img142.imageshack.us/img142/7485/bb83102.png" rel="nofollow noreferrer">alt text http://img142.imageshack.us/img142/7485/bb83102.png</a></p> <p>The strait way is a <a href="http://www.blackberry.com/developers/docs/4.5.0api/net/rim/device/api/ui/component/BitmapField.html" rel="nofollow noreferrer">BitmapField</a></p> <pre><code>class ScrBmpField extends MainScreen { int mImgWidth = 80; int mImgHeight = 80; int mImgMargin = 10; String fileNames[] = { "1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png", "9.png" }; BitmapField[] mBmpFields; public ScrBmpField() { super(VERTICAL_SCROLL|VERTICAL_SCROLLBAR); prepareBmpFields(); } private void prepareBmpFields() { mBmpFields = new BitmapField[fileNames.length]; for (int i = 0; i &lt; fileNames.length; i++) { EncodedImage image = EncodedImage .getEncodedImageResource(fileNames[i]); image = sizeImage(image, mImgWidth, mImgHeight); mBmpFields[i] = new BitmapField(image.getBitmap(), FOCUSABLE|FIELD_HCENTER); mBmpFields[i].setMargin(mImgMargin, mImgMargin, mImgMargin, mImgMargin); add(mBmpFields[i]); } } } </code></pre> <h2>Using BitmapField - custom layout</h2> <p><a href="http://img9.imageshack.us/img9/403/bb83103.png" rel="nofollow noreferrer">alt text http://img9.imageshack.us/img9/403/bb83103.png</a></p> <p>To set a custom positions of BitmapFields within manager, you can implement <a href="http://www.blackberry.com/developers/javaknowledge/userInterface/kpa0203190635.shtml" rel="nofollow noreferrer">manager with custom layout</a>:</p> <pre><code>class ScrLayout extends MainScreen { int mScrWidth = Display.getWidth(); int mScrHeight = Display.getHeight(); int mImgWidth = 80; int mImgHeight = 80; int mImgMargin = 10; String fileNames[] = { "1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png", "9.png" }; BitmapField[] mBmpFields; public ScrLayout() { super(VERTICAL_SCROLL | VERTICAL_SCROLLBAR); prepareBmpFields(); } private void prepareBmpFields() { LayoutManager manager = new LayoutManager(); add(manager); mBmpFields = new BitmapField[fileNames.length]; for (int i = 0; i &lt; fileNames.length; i++) { EncodedImage image = EncodedImage .getEncodedImageResource(fileNames[i]); image = sizeImage(image, mImgWidth, mImgHeight); mBmpFields[i] = new BitmapField(image.getBitmap(), FOCUSABLE); manager.add(mBmpFields[i]); } } class LayoutManager extends VerticalFieldManager { public LayoutManager() { super(VERTICAL_SCROLL | VERTICAL_SCROLLBAR); } protected void sublayout(int width, int height) { int columns = mScrWidth / (mImgWidth + 2 * mImgMargin); for (int i = 0, j = 0; i &lt; mBmpFields.length; i++) { int posX = j * (mImgWidth + 2 * mImgMargin) + mImgMargin; int posY = i * (mImgHeight + 2 * mImgMargin) + mImgMargin; Field field = mBmpFields[i]; layoutChild(field, mImgWidth, mImgHeight); setPositionChild(field, posX, posY); j = (j == columns - 1) ? 0 : j + 1; } setExtent(mScrWidth, mScrHeight); } public int getPreferredWidth() { return mScrWidth; } public int getPreferredHeight() { return mScrHeight; } } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload