Дизайн пользовательского интерфейса Blackberry - настраиваемый пользовательский интерфейс?

Ответ 1

В Blackberry нет скинов, два способа, которые я знаю, для достижения скин-эффекта:

• создать собственную тему
• создать пользовательские элементы управления

Создать тему BlackBerry

удалена мертвая ссылка Imageshack - BlackBerry Theme Builder

Что вы можете сделать с Theme Builder? Некоторые из его основных функций позволяют вам в:

• Настроить значки приложений BlackBerry
• Измените изображение баннера на главном экране и цвета значка/индикатора.
• Создайте свои собственные кнопки
• Настроить внешний вид диалогового окна и всплывающие окна
• Настроить экран ожидания
• Настроить внешний вид меню и списков
• Настройте экраны приложений телефона.
• Настроить шрифты, используемые на устройстве BlackBerry

Как создать свои собственные темы Blackberry от BrileyKenney
bb dev journal - Just Theme It!
Темы и анимированная графика BlackBerry

Плохая новость - тема применяется ко всей ОС и каждому приложению
Хотя созданная тема может быть автономным продуктом разработки программного обеспечения, я не думаю, что это хорошая идея создать собственную тему для разработанного приложения.

Дизайн макета

Программирование gui может занять некоторое время, и если вы захотите решить некоторые вопросы при планировании графического интерфейса без кодирования, вам может понадобиться нарисовать макет GUI.

Вы можете использовать бесплатный прототип веб-интерфейса BlackBerry Visio Stencils - v1.0 от ArtfulBits.

удалено мертвое изображение удалена мертвая ссылка Imageshack

Создание настраиваемого элемента управления

Создав собственный элемент управления, вы можете настроить

• размер управления
• форма управления
• контроль фона (цвет, изображение)
• управляющий шрифт (размер, стиль, цвет)
• граница управления (размер, стиль, цвет)

Все это для состояний

• отключен
• нормально
• сосредоточены
• активен (нажал)

В конце вы можете просто настроить скин, установив фоновое изображение

Основы

devsushi.com: Blackberry JDE API - полевое поле интерфейса пользователя в основном даст представление о существующих элементах ежевики ui, с кодами и скриншотами,

SO: добавьте элементы в ListField (BlackBerry)
SO: встроенный HTML-контроль для Blackberry?
SO: Blackberry - как получить значение даты и времени от DateField? SO: Создание приложения BlackBerry, похожего на iPhone

Менеджеры, макет

Даже используя стандартные элементы управления, нам нужно компоновать и группировать то, что мы хотим, поэтому нам нужны пользовательские менеджеры:
Мышление BlackBerry: пользовательский интерфейс BlackBerry - создание базового менеджера полей
Мышление BlackBerry: простой менеджер макетов сетки BlackBerry
Мышление BlackBerry: создание пользовательского экрана, вертикальная прокрутка и многое другое
SO: проблема с прокруткой в ​​приложении Blackberry
SO: Как установить ScrollBar в VerticalFieldManager в Blackberry?
Беспроводная связь: создайте собственный менеджер макетов для экрана
SO: Blackberry - получить все дочерние поля управления
SO: Отмена прокрутки в Менеджере компоновки
SO: Создание пользовательских макетов в BlackBerry
SO: Blackberry устанавливает положение RichtextField в FullScreen
SO: Развлечения с менеджерами на местах
SO: BlackBerry - панель инструментов пользовательского меню
SO: BlackBerry - Пользовательский центрированный циклический HorizontalFieldManager

Пользовательские элементы управления

Набор статей о написании пользовательских элементов управления:
Мышление BlackBerry: пользовательский интерфейс BlackBerry - простое пользовательское поле
Coderholic: Пользовательское поле для Blackberry
Беспроводная связь: создайте свой собственный VirtualKeyboard для BBStorm
Wireless: ListField с флажками
CodeProject: создание диаграммы XY в качестве пользовательского поля BlackBerry
SO: Blackberry - Нестандартный размер EditField
SO: Blackberry - Как добавить границу в BasicEditField?
SO: Blackberry - настройка цвета фона LabelField
SO: Blackberry меняет цвет дочерних полей на горизонтальный фокус менеджера
SO: настройка цвета фона и шрифтов для RichTextField, TextField
SO: Blackberry Java: TextField без каретки?
SO: Image Map-like Blackberry Control - приложение CLDC
SO: Blackberry - однострочный BasicEditField с большим текстом
SO: Blackberry - пользовательский BubbleChartField
SO: Blackberry - получить отмеченные элементы из списка с флажками
SO: BlackBerry - создание настраиваемого поля даты
SO: BlackBerry - Как создать подменю? SO: BlackBerry - Как я могу показать ярлык со смайликами?
SO: BlackBerry - отображать индикатор режима печати программно

Графика, анимация

SO: BlackBerry - нарисовать изображение на экране
SO: Blackberry - фоновое изображение/анимация RIM OS 4.5.0
SO: Blackberry - Загрузка экрана с анимацией
ТАК: Как установить Anti Aliasing в Blackberry Storm?
SO: Blackberry устанавливает область отсечения/область
ТАК: Лучше ли использовать Bitmap или EncodedImage в BlackBerry?
SO: Blackberry - анимация макета полей

Шрифты

Беспроводная связь: изменение шрифтов в приложении BlackBerry
Журналы разработчиков: Шрифты
SO: Как создать собственный шрифт для приложения Blackberry
SO: Как установить шрифт в текст LabelField в Blackberry?
SO: Как сделать интерфейс Blackberry более привлекательным? SO: Как динамически менять цвет шрифта ящика Blackberry? SO: BlackBerry - отображение текста в формате Unicode

Ответ 2

Пример стандартного скина приложения Media на жирном 9000

удалена мертвая ссылка ImageShack - нарезанное медиа-приложение

удалена мертвая ссылка ImageShack - нарезанные изображения

Используйте расширение ButtonField для отображения изображений с помощью кнопок:

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);
    }
}

• установите HorizontalFieldManagers внутри VerticalFieldManager и наоборот
• используйте разные изображения для нормальных, сфокусированных и активных состояний.
• Если вам нужны настраиваемые кнопки, вы можете нарисовать их в переопределении метода manager paint() после super.paint()

Остальная часть кода:

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);
    }
}

Ответ 3

ресурсы не очень хороши К сожалению. Лучшим источником информации, как правило, является ссылка Google на блоги с конкретной темой, которую вы ищете.

Если вы только начинаете писать код BB GUI, я бы очень рекомендовал познакомиться с Manager и Field, так как вам, вероятно, придется написать много пользовательских расширений.