黑莓用户界面设计 - 可定制的UI？

Question

黑莓用户界面设计 - 可定制的UI？

user-interfaceblackberrycustom-controlsskin

20

我正在尝试设计一个黑莓应用程序，想知道是否有任何资源可以教授如何创建自定义用户界面元素、皮肤现有的元素以及还有哪些其他可能性?

我已经开发了一些具有自定义UI等内容的iPhone应用程序，不确定BB世界在UI开发方面提供了什么。

任何提示、建议或想法都将非常棒。

- John Stewart

3个回答

5

在Bold 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放置在VerticalFieldManagers内，反之亦然
使用不同的图像来表示正常、聚焦和活动状态
如果需要自定义形状的按钮，可以在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);
    }
}

- Maksym Gontar

如果我们使用BorderFactory，我们必须导入哪个类？ - Bohemian

我猜是net.rim.device.api.ui.decor.BackgroundFactory。但是在eclipse 4.5插件中不可用。有什么线索吗？ - Bohemian

是的，它在4.6以下版本不可用，请使用位图皮肤参见https://dev59.com/H0jSa4cB1Zd3GeqPFXOE - Maksym Gontar

顺便说一下，Max，ArtfulBits已经发布了适用于BlackBerry 10设备的新的黑莓UI原型Visio Stencils。你参加了吗？http://www.artfulbits.com/products/blackberry/prototyping.aspx 这很不错。我用这个工具构建了几个屏幕。非常简单易用。 - user2091719

4

这些资源很不好，遗憾的是。通常最好的信息来源是谷歌链接到具有您寻找的特定主题的博客。

如果您刚开始编写BB GUI代码，我强烈建议您先了解Manager和Field类，因为您可能需要编写许多自定义扩展。

- Ben S

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接