Search This Blog

Thursday, 14 June 2012

Create a Unique UI to manage thousands of images on single screen in blackberry

Hello friends ,
                      Here is the UI , i designed for Blackberry,Actually was free and dint have any idea wht to do ....so i did this its just an idea may be it will be of lil helpful in your app.....
See the image below.....every single Horizontal Manager is scrollable you can add as many images as u want ...
CODE:
package mypackage;

import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.component.SeparatorField;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;
import net.rim.device.api.ui.decor.Background;
import net.rim.device.api.ui.decor.BackgroundFactory;


public final class MyScreen extends MainScreen
{
   int _width,_height;
    public MyScreen()
    {       
        _width = Display.getWidth();
        _height = Display.getHeight();
       
        Background _black = BackgroundFactory.createLinearGradientBackground(Color.BLACK,Color.BLACK,Color.BLACK,Color.BLACK);
    VerticalFieldManager _master = new VerticalFieldManager(){
        public int getPreferredWidth(){
            return _width;
        }
        public int getPreferredHeight(){
            return _height;
        }
        public void sublayout(int maxWidth,int maxHeight){
            super.sublayout(getPreferredWidth(), getPreferredHeight());
            setExtent(getPreferredWidth(),getPreferredHeight());
        }
    };
    _master.setBackground(_black);
    this.add(_master);
    HorizontalFieldManager _first = new HorizontalFieldManager(Manager.HORIZONTAL_SCROLL){
        public int getPreferredWidth(){
            return _width;
        }
        public int getPreferredHeight(){
            return _height/4;
        }
        public void sublayout(int maxWidth,int maxHeight){
            super.sublayout(getPreferredWidth(), getPreferredHeight());
            setExtent(getPreferredWidth(),getPreferredHeight());
        }
    };
    HorizontalFieldManager _second = new HorizontalFieldManager(Manager.HORIZONTAL_SCROLL){
        public int getPreferredWidth(){
            return _width;
        }
        public int getPreferredHeight(){
            return _height/4;
        }
        public void sublayout(int maxWidth,int maxHeight){
            super.sublayout(getPreferredWidth(), getPreferredHeight());
            setExtent(getPreferredWidth(),getPreferredHeight());
        }
    };
    HorizontalFieldManager _third = new HorizontalFieldManager(Manager.HORIZONTAL_SCROLL){
        public int getPreferredWidth(){
            return _width;
        }
        public int getPreferredHeight(){
            return _height/4;
        }
        public void sublayout(int maxWidth,int maxHeight){
            super.sublayout(getPreferredWidth(), getPreferredHeight());
            setExtent(getPreferredWidth(),getPreferredHeight());
        }
    };
    HorizontalFieldManager _fourth = new HorizontalFieldManager(Manager.HORIZONTAL_SCROLL){
        public int getPreferredWidth(){
            return _width;
        }
        public int getPreferredHeight(){
            return _height/4;
        }
        public void sublayout(int maxWidth,int maxHeight){
            super.sublayout(getPreferredWidth(), getPreferredHeight());
            setExtent(getPreferredWidth(),getPreferredHeight());
        }
    };
    Background _gradient = BackgroundFactory.createLinearGradientBackground(Color.GRAY,Color.GRAY,Color.BLACK,Color.BLACK);
    _first.setBackground(_gradient);
    _second.setBackground(_gradient);
    _third.setBackground(_gradient);
    _fourth.setBackground(_gradient);
    BitmapField one = new BitmapField(MyApp.resize("1.jpg", _width/3,_height/4-10));
    one.setMargin(5,0,0,10);
    BitmapField two = new BitmapField(MyApp.resize("2.jpg", _width/3,_height/4-10));
    two.setMargin(5,0,0,10);
    BitmapField three = new BitmapField(MyApp.resize("3.jpg", _width/3,_height/4-10));
    three.setMargin(5,0,0,10);
    BitmapField four = new BitmapField(MyApp.resize("4.jpg", _width/3,_height/4-10));
    four.setMargin(5,0,0,10);
    BitmapField five = new BitmapField(MyApp.resize("5.jpg", _width/3,_height/4-10));
    five.setMargin(5,0,0,10);
    BitmapField six = new BitmapField(MyApp.resize("6.jpg", _width/3,_height/4-10));
    six.setMargin(5,0,0,10);
    BitmapField seven = new BitmapField(MyApp.resize("7.jpg", _width/3,_height/4-10));
    seven.setMargin(5,0,0,10);
    BitmapField eight = new BitmapField(MyApp.resize("8.jpg", _width/3,_height/4-10));
    eight.setMargin(5,0,0,10);
    BitmapField nine = new BitmapField(MyApp.resize("9.jpg", _width/3,_height/4-10));
    nine.setMargin(5,0,0,10);
    BitmapField ten = new BitmapField(MyApp.resize("10.JPG", _width/3,_height/4-10));
    ten.setMargin(5,0,0,10);
    BitmapField eleven = new BitmapField(MyApp.resize("11.jpg", _width/3,_height/4-10));
    eleven.setMargin(5,0,0,10);
    BitmapField twelve = new BitmapField(MyApp.resize("12.jpg", _width/3,_height/4-10));
    twelve.setMargin(5,0,0,10);
    BitmapField thirteen = new BitmapField(MyApp.resize("13.jpg", _width/3,_height/4-10));
    thirteen.setMargin(5,0,0,10);
    BitmapField fourteen = new BitmapField(MyApp.resize("14.jpg", _width/3,_height/4-10));
    fourteen.setMargin(5,0,0,10);
    BitmapField fifteen = new BitmapField(MyApp.resize("15.jpg", _width/3,_height/4-10));
    fifteen.setMargin(5,0,0,10);
    BitmapField sixteen = new BitmapField(MyApp.resize("16.jpg", _width/3,_height/4-10));
    sixteen.setMargin(5,0,0,10);
    _first.add(one);
    _first.add(two);
    _first.add(three);
    _first.add(four);
    _second.add(five);
    _second.add(six);
    _second.add(seven);
    _second.add(eight);
    _third.add(nine);
    _third.add(ten);
    _third.add(eleven);
    _third.add(twelve);
    _fourth.add(thirteen);
    _fourth.add(fourteen);
    _fourth.add(fifteen);
    _fourth.add(sixteen);
    _master.add(new SeparatorField());
    _master.add(_first);
    _master.add(new SeparatorField());
    _master.add(_second);
    _master.add(new SeparatorField());
    _master.add(_third);
    _master.add(new SeparatorField());
    _master.add(_fourth);
    _master.add(new SeparatorField());
    }
}


2 comments:

  1. really helpful..!! Thanx.. :)

    ReplyDelete
    Replies
    1. ur welcome amisha ....use a loop for images to b added ....i just gave a simple example

      Delete