当前位置：文江博客话题详情

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

发布于 2024-08-04 23:35:55 字数 170 浏览 6 评论 0原文

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

我已经开发了一些带有自定义 UI 之类的 iPhone 应用程序，所以不确定 BB world 在 UI 开发方面提供了什么。

任何提示、建议或想法都会很棒。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风向决定发型 2024-08-11 23:35:55

黑莓中没有皮肤，我知道实现皮肤效果的两种方法是

创建自己的主题创建
自定义控件

创建黑莓主题

删除死的Imageshack链接 - BlackBerry Theme Builder

您可以使用主题生成器做什么？
它的一些主要功能可以让您
至：
自定义 BlackBerry 应用程序图标
更改主屏幕横幅图像和图标/指示器颜色
创建您自己的按钮
自定义对话框和弹出屏幕的外观
自定义待机屏幕
自定义菜单和列表的外观
自定义手机应用程序屏幕
自定义 BlackBerry 设备上使用的字体

如何创建您自己的个人 Blackberry 主题（作者：BrileyKenney）
bb 开发日志 - 只是主题！
BlackBerry 主题和主题动画图形

坏消息 - 主题应用于整个设备操作系统和每个应用程序
虽然创建的主题可能是一个独立的软件设计产品，但我认为为开发的应用程序创建自己的主题不是一个好主意。

设计模型

编程 GUI 可能需要一些时间，如果您想在不编码的情况下解决 GUI 规划中的一些问题，您可能需要绘制 GUI 模型。

您可以使用 ArtfulBits 的免费 BlackBerry UI Prototyping Visio Stencils - v1.0。

删除了无效的 Imageshack 链接
删除了无效的 Imageshack 链接

创建自定义控件

通过创建自定义控件，您可以配置

控件大小
控件形状
控件背景（颜色、图像）
控件字体（大小、样式、颜色）
控件边框（大小、样式、颜色）

所有这些状态

均已禁用，
正常
聚焦
活动（单击）

最后，您可以通过设置背景图像简单地为控件换肤

基础知识

devsushi.com：Blackberry JDE API - 用户界面字段参考基本上会给出现有黑莓 ui 控件的想法，带有代码片段和屏幕截图。

SO：将项目添加到 ListField (BlackBerry)
SO：黑莓嵌入式 HTML 控件？
SO：Blackberry - 如何从 DateField 获取日期时间值？
SO：将 BlackBerry 应用程序设计得像 iPhone

管理器、布局

即使使用标准控件，我们也需要按照我们想要的方式进行布局和分组，因此我们需要自定义管理器：
Think BlackBerry：BlackBerry UI - 创建基本的现场管理器
 Think BlackBerry：简单的 BlackBerry 网格布局管理器
 Thinking BlackBerry：制作自定义屏幕、垂直滚动等
 SO：黑莓应用程序中的滚动问题
 SO：如何在 Blackberry 中将 ScrollBar 设置为 VerticalFieldManager ？
无线：创建自定义布局屏幕管理器
 SO：Blackberry - 获取控件的所有子字段
 SO：取消布局管理器中的滚动
 SO：在 BlackBerry 中创建自定义布局
 SO：Blackberry 在全屏中设置 RichtextField 的位置
 SO：与现场经理一起享受乐趣
 SO：BlackBerry - 自定义菜单工具栏
 SO：BlackBerry - 自定义居中循环 HorizontalFieldManager

自定义控件

有关编写自定义控件的文章集：
Think BlackBerry：BlackBerry UI - 简单的自定义字段
 Coderholic：黑莓自定义按钮字段
 无线：为 BBStorm 创建您自己的虚拟键盘
 无线：带有复选框的 ListField
CodeProject：创建 XY 图表/绘图作为 BlackBerry 自定义字段
 SO：黑莓 - 自定义大小 EditField
SO：Blackberry - 如何向 BasicEditField 添加边框？
SO：黑莓 - 设置 LabelField 背景颜色
 SO：Blackberry 更改水平管理器焦点上子字段的颜色
 SO：设置RichTextField、TextField的背景和字体颜色< br>
SO：Blackberry Java：TextField 没有插入符号？
SO：类似图像映射的 Blackberry Control - CLDC 应用程序
 SO：黑莓 - 带有大文本的单行 BasicEditField
SO：黑莓 - 自定义 BubbleChartField
SO：Blackberry - 从带有复选框的列表中获取选中的项目< br>
SO：BlackBerry - 创建自定义日期字段
 SO：BlackBerry - 如何创建子菜单？
SO：BlackBerry - 如何显示带有表情符号的标签？
SO：BlackBerry - 以编程方式显示打字模式指示器

图形、动画

SO：BlackBerry - 在屏幕上绘制图像
 SO：黑莓 - 背景图像/动画 RIM OS 4.5.0< /a>
SO：黑莓 - 带动画的加载屏幕
 SO：如何在 Blackberry Storm 中设置抗锯齿功能？< br>
SO：Blackberry 设置剪切区域/区域
 SO：在 BlackBerry 中使用 Bitmap 或 EncodedImage 哪个更好？
SO：Blackberry - 字段布局动画

字体

无线：更改 BlackBerry 应用程序中的字体
 开发者日志：字体
 SO：如何创建自定义字体黑莓应用程序
 SO：如何在 Blackberry 中为 LabelField 文本设置字体？
那么：如何让 Blackberry UI 更具吸引力？
SO：如何更改黑莓的字体颜色动态标记字段？
SO：BlackBerry - Unicode 文本显示

回复收藏 0 原文

dawn曙光 2024-08-11 23:35:55

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 内部，反之亦然，
使用不同的图像来表示正常、聚焦和活动状态
如果您需要自定义形状的按钮，则

，您可以在 super.paint() 之后的 super.paint()其余部分代码中在管理器 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);
    }
}

Example of standard Media application skin on Bold 9000

removed dead ImageShack link - sliced Media application

removed dead ImageShack link - Sliced images

Use extention of ButtonField to map images with buttons:

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

put HorizontalFieldManagers inside VerticalFieldManagers and vice versa
use different images for normal, focused and active states
if you need a custom shaped buttons, you can draw them over in manager paint() method override, after super.paint()

Rest part of code:

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

回复收藏 0 原文

莫言歌 2024-08-11 23:35:55

blackberry.com/support/docs/subcategories/?userType=21&category=BlackBerry+Java+Application+Development&subCategory=BlackBerry+Java+Development+Environment" rel="nofollow noreferrer">资源不是不幸的是非常好。最好的信息来源通常是 Google 链接到包含您正在寻找的特定主题的博客。

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

回复收藏 0 原文

~没有更多了~