20 Stimmen

Blackberry User Interface Design - Anpassbare UI?

Ich versuche, eine Blackberry-Anwendung zu entwerfen, und ich frage mich, ob es irgendwelche Ressourcen gibt, wie man benutzerdefinierte Elemente der Benutzeroberfläche erstellt, bestehende skinnt und welche anderen Möglichkeiten es gibt?

Ich habe ein paar iPhone-Anwendungen mit benutzerdefinierten UI und Zeug entwickelt, so nicht sicher, was BB Welt bietet in Bezug auf die UI-Entwicklung.

Über Tipps, Vorschläge und Ideen würde ich mich sehr freuen.

69voto

Maksym Gontar Punkte 22730

Es gibt keine Skins in Blackberry, zwei Möglichkeiten, die ich kenne, um einen Skin-Effekt zu erzielen, sind

  • eigenes Thema erstellen
  • benutzerdefinierte Steuerelemente erstellen

BlackBerry-Theme erstellen

toter Imageshack-Link entfernt - BlackBerry Theme Builder

Was können Sie mit Theme Builder tun? Einige seiner Hauptfunktionen ermöglichen Ihnen zu:

  • Anpassen der BlackBerry-Anwendungssymbole
  • Ändern des Bannerbildes auf der Startseite und der Farben der Symbole und Indikatoren
  • Erstellen Sie Ihre eigenen Schaltflächen
  • Anpassen des Aussehens von Dialogen und Popup-Fenstern
  • Anpassen eines Leerlaufbildschirms
  • Anpassen des Aussehens von Menüs und Listen
  • Anpassen der Anwendungsbildschirme des Telefons
  • Anpassen der auf dem BlackBerry-Gerät verwendeten Schriftarten

Wie Sie Ihr eigenes persönliches Blackberry-Thema erstellen von BrileyKenney
bb dev journal - Just Theme It!
BlackBerry-Themen und animierte Grafiken

Die schlechte Nachricht: Das Thema wird auf das gesamte Betriebssystem des Geräts und jede Anwendung angewendet.
Obwohl das erstellte Thema ein eigenständiges Software-Design-Produkt sein kann, halte ich es nicht für eine gute Idee, ein eigenes Thema für eine entwickelte Anwendung zu erstellen.

Design-Mockup

Die Programmierung der Benutzeroberfläche kann einige Zeit in Anspruch nehmen, und wenn Sie einige Fragen bei der GUI-Planung ohne Programmierung klären wollen, können Sie ein GUI-Mockup zeichnen.

Sie können verwenden kostenlose BlackBerry UI Prototyping Visio Schablonen - v1.0 von ArtfulBits.

toten Imageshack-Link entfernt
toten Imageshack-Link entfernt

Benutzerdefiniertes Steuerelement erstellen

Durch die Erstellung eines benutzerdefinierten Steuerelements können Sie Folgendes konfigurieren

  • Kontrollgröße
  • Kontrollform
  • Kontrollhintergrund (Farbe, Bild)
  • Schriftart steuern (Größe, Stil, Farbe)
  • Kontrollrahmen (Größe, Stil, Farbe)

All dies für Staaten

  • deaktiviert
  • normal
  • fokussiert
  • aktiv (angeklickt)

Zum Schluss können Sie Ihr Steuerelement einfach mit einem Hintergrundbild versehen

Grundlagen

devsushi.com: Blackberry JDE API - Benutzerschnittstellen-Feldreferenz wird im Grunde die Idee der existierenden Blackberry-UI-Steuerelemente vermitteln, mit Codesnippets und Screenshots.

SO: Elemente zu einem ListField hinzufügen ( BlackBerry )
SO: Eingebettete HTML-Steuerung für Blackberry?
SO: Blackberry - wie man datetime Wert von DateField erhalten?
SO: Eine BlackBerry-Anwendung so gestalten, dass sie wie ein iPhone aussieht

Manager, Layout

Selbst bei der Verwendung von Standardsteuerelementen müssen wir das Layout und die Gruppierung nach unseren Vorstellungen gestalten, weshalb wir benutzerdefinierte Manager benötigen:
Thinking BlackBerry: BlackBerry UI - Erstellen eines einfachen Feldmanagers
Thinking BlackBerry: Einfacher BlackBerry-Raster-Layout-Manager
BlackBerry im Kopf: Erstellen eines benutzerdefinierten Bildschirms, vertikaler Bildlauf und mehr
SO: Scrolling-Problem in Blackberry-Anwendung
SO: Wie setzt man eine ScrollBar auf den VerticalFieldManager im Blackberry?
Drahtlos: Erstellen eines benutzerdefinierten Layout-Managers für einen Bildschirm
SO: Blackberry - alle Kinderfelder der Kontrolle entziehen
SO: Scrollen im Layout-Manager abbrechen
SO: Erstellen benutzerdefinierter Layouts in BlackBerry
SO: Blackberry setzt die Position eines RichtextFeldes in FullScreen
SO: Spaß mit Field Managern
SO: BlackBerry - Benutzerdefinierte Menü-Symbolleiste
SO: BlackBerry - Benutzerdefinierter zentrierter zyklischer HorizontalFieldManager

Benutzerdefinierte Kontrollen

Eine Reihe von Artikeln über das Schreiben von benutzerdefinierten Steuerelementen:
Thinking BlackBerry: BlackBerry UI - Ein einfaches benutzerdefiniertes Feld
Coderholic: Blackberry Custom Button Feld
Drahtlos: Erstellen Sie Ihr eigenes VirtualKeyboard für BBStorm
Drahtlos: ListField mit Kontrollkästchen
CodeProjekt: Erstellen eines XY-Diagramms/Plots als benutzerdefiniertes BlackBerry-Feld
SO: Blackberry - Benutzerdefinierte Größe EditField
SO: Blackberry - Wie kann man einen Rahmen zu BasicEditField hinzufügen?
SO: Blackberry - Einstellung der Hintergrundfarbe des LabelFields
SO: Blackberry ändert Farbe der untergeordneten Felder bei horizontalem Managerfokus
SO: Einstellung von Hintergrund- und Schriftfarben für RichTextField, TextField
SO: Blackberry Java: TextFeld sans das Caret?
SO: Image Map-like Blackberry Control - CLDC-Anwendung
SO: Blackberry - einzeiliges BasicEditField mit großem Text
SO: Blackberry - benutzerdefiniertes BubbleChartField
SO: Blackberry - Abrufen von angekreuzten Elementen aus einer Liste mit Kontrollkästchen
SO: BlackBerry - Benutzerdefiniertes Datumsfeld erstellen
SO: BlackBerry - Wie kann ich ein Untermenü erstellen?
SO: BlackBerry - Wie kann ich ein Label mit Emoticons anzeigen?
SO: BlackBerry - Anzeige des Tippmodus programmatisch anzeigen

Grafiken, Animation

SO: BlackBerry - Bild auf den Bildschirm zeichnen
SO: Blackberry - Hintergrundbild/Animation RIM OS 4.5.0
SO: Blackberry - Ladebildschirm mit Animation
SO: Wie stellt man Anti Aliasing im Blackberry Storm ein?
SO: Blackberry Einstellung eines Beschneidungsbereichs/Gebiets
SO: Ist es besser, Bitmap oder EncodedImage in BlackBerry zu verwenden?
SO: Blackberry - Felder Layout Animation

Schriftarten

Drahtlos: Schriftarten in einer BlackBerry-Anwendung ändern
Entwickler-Journale: Schriftarten
SO: Wie kann ich eine benutzerdefinierte Schriftart für eine Blackberry-Anwendung erstellen?
SO: Wie legt man eine Schriftart für LabelField-Text in Blackberry fest?
SO: Wie kann die Blackberry-Benutzeroberfläche attraktiver gestaltet werden?
SO: Wie kann man die Schriftfarbe des Blackberry-Etikettenfeldes dynamisch ändern?
SO: BlackBerry - Unicode-Textanzeige

5voto

Maksym Gontar Punkte 22730

Beispiel für eine Standardmedienanwendung auf dem Bold 9000

toter ImageShack-Link entfernt - aufgeschnittene Media-Anwendung

toten ImageShack-Link entfernt - Geschnittene Bilder

Verwenden Sie die Erweiterung von ButtonField, um Bilder mit Schaltflächen abzubilden:

class BitmapButtonField extends ButtonField {
    Bitmap mNormal;
    Bitmap mFocused;
    Bitmap mActive;

    int mWidth;
    int mHeight;

    public BitmapButtonField(Bitmap normal, Bitmap focused, 
        Bitmap active) {
        super(CONSUME_CLICK);
        mNormal = normal;
        mFocused = focused;
        mActive = active;
        mWidth = mNormal.getWidth();
        mHeight = mNormal.getHeight();
        setMargin(0, 0, 0, 0);
        setPadding(0, 0, 0, 0);
        setBorder(BorderFactory
                    .createSimpleBorder(new XYEdges(0, 0, 0, 0)));
        setBorder(VISUAL_STATE_ACTIVE, BorderFactory
                .createSimpleBorder(new XYEdges(0, 0, 0, 0)));
    }

    protected void paint(Graphics graphics) {
        Bitmap bitmap = null;
        switch (getVisualState()) {
        case VISUAL_STATE_NORMAL:
            bitmap = mNormal;
            break;
        case VISUAL_STATE_FOCUS:
            bitmap = mFocused;
            break;
        case VISUAL_STATE_ACTIVE:
            bitmap = mActive;
            break;
        default:
            bitmap = mNormal;
        }
        graphics.drawBitmap(0, 0, bitmap.getWidth(), bitmap.getHeight(),
                bitmap, 0, 0);
    }

    public int getPreferredWidth() {
        return mWidth;
    }

    public int getPreferredHeight() {
        return mHeight;
    }

    protected void layout(int width, int height) {
        setExtent(mWidth, mHeight);
    }
}
  • HorizontalFieldManager in VerticalFieldManager einfügen und umgekehrt
  • unterschiedliche Bilder für normale, konzentrierte und aktive Zustände verwenden
  • Wenn Sie benutzerdefinierte Schaltflächen benötigen, können Sie diese in der Überschreibung der manager paint()-Methode nach super.paint() zeichnen

Restlicher Teil des Codes:

class Scr extends MainScreen implements FieldChangeListener {
    Bitmap mBmpHeader = Bitmap.getBitmapResource("header.png");
    Bitmap mBmpCover = Bitmap.getBitmapResource("cover.png");
    Bitmap mBmpTitle = Bitmap.getBitmapResource("title.png");
    Bitmap mBmpTimeline = Bitmap.getBitmapResource("timeline.png");
    Bitmap mBmpLeftside = Bitmap.getBitmapResource("leftside.png");
    Bitmap mBmpPrevNrm = Bitmap.getBitmapResource("btn_prev_normal.png");
    Bitmap mBmpPlayNrm = Bitmap.getBitmapResource("btn_play_normal.png");
    Bitmap mBmpPauseNrm = Bitmap.getBitmapResource("btn_pause_normal.png");
    Bitmap mBmpStopNrm = Bitmap.getBitmapResource("btn_stop_normal.png");
    Bitmap mBmpNextNrm = Bitmap.getBitmapResource("btn_next_normal.png");
    Bitmap mBmpPrevFcs = Bitmap.getBitmapResource("btn_prev_focused.png");
    Bitmap mBmpPlayFcs = Bitmap.getBitmapResource("btn_play_focused.png");
    Bitmap mBmpPauseFcs = Bitmap.getBitmapResource("btn_pause_focused.png");
    Bitmap mBmpStopFcs = Bitmap.getBitmapResource("btn_stop_focused.png");
    Bitmap mBmpNextFcs = Bitmap.getBitmapResource("btn_next_focused.png");
    Bitmap mBmpRightside = Bitmap.getBitmapResource("rightside.png");
    VerticalFieldManager mMainManager;
    HorizontalFieldManager mHeaderManager;
    HorizontalFieldManager mCoverManager;
    HorizontalFieldManager mTitleManager;
    HorizontalFieldManager mTimelineManager;
    HorizontalFieldManager mToolbarManager;
    BitmapField mHeader;
    BitmapField mCover;
    BitmapField mTitle;
    BitmapField mTimeline;
    BitmapField mLeftside;
    BitmapField mRightside;
    BitmapButtonField mBtnPrev;
    BitmapButtonField mBtnPlay;
    BitmapButtonField mBtnPause;
    BitmapButtonField mBtnStop;
    BitmapButtonField mBtnNext;
    public Scr() {
        add(mMainManager = new VerticalFieldManager());
        addHeader();
        addCover();
        addTitle();
        addTimeline();
        addToolbar();
    }
    private void addHeader() {
        mMainManager.add(mHeaderManager = new HorizontalFieldManager());
        mHeaderManager.add(mHeader = new BitmapField(mBmpHeader));
    }
    private void addCover() {
        mMainManager.add(mCoverManager = new HorizontalFieldManager());
        mCoverManager.add(mCover = new BitmapField(mBmpCover));
    }
    private void addTitle() {
        mMainManager.add(mTitleManager = new HorizontalFieldManager());
        mTitleManager.add(mTitle = new BitmapField(mBmpTitle));
    }
    private void addTimeline() {
        mMainManager.add(mTimelineManager = new HorizontalFieldManager());
        mTimelineManager.add(mTimeline = new BitmapField(mBmpTimeline));
    }
    private void addToolbar() {
        mMainManager.add(mToolbarManager = new HorizontalFieldManager());
        mToolbarManager.add(mLeftside = new BitmapField(mBmpLeftside));
        mToolbarManager.add(mBtnPrev = new BitmapButtonField(mBmpPrevNrm,
                mBmpPrevFcs, mBmpPrevFcs));
        mToolbarManager.add(mBtnPlay = new BitmapButtonField(mBmpPlayNrm,
                mBmpPlayFcs, mBmpPlayFcs));
        mBtnPlay.setChangeListener(this);
        mBtnPause = new BitmapButtonField(mBmpPauseNrm, mBmpPauseFcs,
                mBmpPauseFcs);
        mBtnPause.setChangeListener(this);
        mToolbarManager.add(mBtnStop = new BitmapButtonField(mBmpStopNrm,
                mBmpStopFcs, mBmpStopFcs));
        mToolbarManager.add(mBtnNext = new BitmapButtonField(mBmpNextNrm,
                mBmpNextFcs, mBmpNextFcs));
        mToolbarManager.add(mRightside = new BitmapField(mBmpRightside));
    }
    public void fieldChanged(Field field, int context) {
        if (mBtnPlay == field)
            play();
        else if (mBtnPause == field)
            pause();
    }
    private void pause() {
        mToolbarManager.replace(mBtnPause, mBtnPlay);
    }
    private void play() {
        mToolbarManager.replace(mBtnPlay, mBtnPause);
    }
}

4voto

Ben S Punkte 66945

Die Ressourcen sind leider nicht sehr gut. Die beste Informationsquelle ist in der Regel Google mit Links zu Blogs, die sich mit dem von Ihnen gesuchten Thema befassen.

Wenn Sie gerade erst anfangen, BB-GUI-Code zu schreiben, würde ich Ihnen empfehlen, sich mit dem Manager y Feld Klassen, da Sie wahrscheinlich viele benutzerdefinierte Erweiterungen dieser Klassen schreiben müssen.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X