黑莓用户界面设计 - 可定制的用户界面？
Posted
技术标签:
【中文标题】黑莓用户界面设计 - 可定制的用户界面？【英文标题】：Blackberry User Interface Design - Customizable UI? 【发布时间】：2010-11-29 13:52:48 【问题描述】：我正在尝试设计一个黑莓应用程序，我想知道是否有任何关于如何创建自定义用户界面元素、为现有元素设置皮肤以及还有哪些其他可能性的资源？
我已经开发了一些带有自定义 UI 和东西的 iPhone 应用程序，所以不确定 BB world 在 UI 开发方面提供什么。
任何提示、建议或想法都会很棒。
【问题讨论】：
【参考方案1】：黑莓中没有皮肤，我知道实现皮肤效果的两种方法是
创建自己的主题 创建自定义控件创建 BlackBerry 主题
删除了无效的 Imageshack 链接 - BlackBerry Theme Builder
您可以使用 Theme Builder 做什么？ 它的一些主要功能允许您 到：
自定义 BlackBerry 应用程序图标 更改主屏幕横幅图像和图标/指示器颜色 创建您自己的按钮 自定义对话框和弹出屏幕的外观 自定义待机屏幕 自定义菜单和列表的外观 自定义手机应用程序屏幕 自定义 BlackBerry 设备上使用的字体
How To Create Your Own Personal Blackberry Themes by BrileyKenneybb dev journal - Just Theme It!BlackBerry Themes & Animated Graphics
坏消息 - 主题适用于整个设备操作系统和每个应用程序 虽然创建的主题可能是一个独立的软件设计产品，但我认为为开发的应用程序创建自己的主题并不是一个好主意。
设计模型
编程 gui 可能需要一些时间，如果您想在不编码的情况下解决 GUI 规划中的一些问题，您可能需要绘制 GUI 模型。
您可以使用来自 ArtfulBits 的free BlackBerry UI Prototyping Visio Stencils - v1.0。
删除了失效的 Imageshack 链接删除了失效的 Imageshack 链接
创建自定义控件
通过创建自定义控件可以配置
控件大小 控制形状 控制背景（颜色、图像） 控制字体（大小、样式、颜色） 控制边框（大小、样式、颜色）所有这些都适用于州
已禁用 正常 专注 活动（点击）最后，您可以通过设置背景图片来简单地为控件设置外观
基础知识
devsushi.com: Blackberry JDE API - User Interface Field Reference 基本上会给出现有的黑莓 ui 控件的想法，带有 coden-ps 和屏幕截图。
SO: Add items to a ListField ( BlackBerry )SO: Embedded html control for Blackberry?SO: Blackberry - how to get datetime value from DateField?SO: Styling a BlackBerry Application to Look Like an iPhone
经理，布局
即使使用标准控件，我们也需要按照我们想要的方式进行布局和分组，因此我们需要自定义管理器：Thinking BlackBerry: BlackBerry UI - Creating a basic field managerThinking BlackBerry: Simple BlackBerry Grid Layout ManagerThinking BlackBerry: Making a Custom Screen, Vertically Scrolling and moreSO: Scrolling problem in Blackberry applicationSO: How to set a ScrollBar to the VerticalFieldManager in Blackberry?Wireless: Create a custom layout manager for a screenSO: Blackberry - get all child fields of controlSO: Cancel scrolling in Layout ManagerSO: Creating custom layouts in BlackBerrySO: Blackberry setting the position of a RichtextField in FullScreenSO: Fun with Field ManagersSO: BlackBerry - Custom menu toolbarSO: BlackBerry - Custom centered cyclic HorizontalFieldManager
自定义控件
关于编写自定义控件的文章集：Thinking BlackBerry: BlackBerry UI - A simple custom fieldCoderholic: Blackberry Custom Button FieldWireless: Create your own VirtualKeyboard for BBStormWireless: ListField with check boxesCodeProject: Creating a XY Chart/Plot as a BlackBerry Custom FieldSO: Blackberry - Custom size EditFieldSO: Blackberry - How to add border to BasicEditField?SO: Blackberry - Setting LabelField background colorSO: Blackberry change color of child fields on horizontal manager focusSO: Setting background and font colors for RichTextField, TextFieldSO: Blackberry Java: TextField without the caret?SO: Image Map-like Blackberry Control - CLDC ApplicationSO: Blackberry - single line BasicEditField with large textSO: Blackberry - custom BubbleChartField@987654357 @SO: BlackBerry - Creating custom Date FieldSO: BlackBerry - How to create sub menu?SO: BlackBerry - How can i show a Label with emoticons??SO: BlackBerry - Show typing mode indicator programmatically
图形、动画
SO: BlackBerry - draw image on the screenSO: Blackberry - background image/animation RIM OS 4.5.0SO: Blackberry - Loading screen with animationSO: How to set Anti Aliasing in Blackberry Storm?SO: Blackberry setting a clipping region/areaSO: Is it better to use Bitmap or EncodedImage in BlackBerry?SO: Blackberry - fields layout animation
字体
Wireless: Change fonts in a BlackBerry applicationDeveloper Journals: FontsSO: How do I create a custom font for a blackberry applicationSO: How to set a font to LabelField text in Blackberry?SO: How to make Blackberry UI more attractive?SO: How to change the font color of blackberry label field dynamically?SO: BlackBerry - Unicode text display
【讨论】：
+1 如果我可以给予更多投票，它会以非常好的方式解释，感谢@Max Gontar 提供链接并再次感谢... :-) @PareshMayani，谢谢，但请注意 RIM OS 6 和 7 UI API 中有许多更改和改进。 @MaxGontar 谢谢你的意见。但你知道我刚刚开始阅读你建议的书。我有一本《Beginning BlackBerry Development(2009)》，它够好吗？ @PareshMayani 是的，首先，但请记住 OS 6.0 was released in 2010 and OS 7.0 was released in 2011 @MaxGontar 没问题。但是我现在很困惑，我应该选择哪个平台开始？【参考方案2】：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);
其余部分代码：
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);
【讨论】：
如果使用 BorderFactory 需要导入哪个类 我猜它的 net.rim.device.api.ui.decor.BackgroundFactory。但它在 eclipse 4.5 插件中不可用。任何线索 是的，不可用 ***.com/questions/1135349/… 顺便说一下，Max, ArtfulBits 发布了用于 BlackBerry 10 设备的新 BlackBerry UI Prototyping Visio Stencils。你参加了这个artfulbits.com/products/blackberry/prototyping.aspx 吗？这很好。我用这个工具构建了几个屏幕。非常简单且易于处理。【参考方案3】：The resources 不幸的是不是很好。最好的信息来源通常是 Google 链接到您正在寻找的特定主题的博客。
如果您刚刚开始编写 BB GUI 代码，我强烈建议您了解 Manager 和 Field 类，因为您可能需要编写它们的许多自定义扩展。
【讨论】：
以上是关于黑莓用户界面设计 - 可定制的用户界面？的主要内容，如果未能解决你的问题，请参考以下文章
利用 jQuery UI 和 Ajax 创建可定制的 Web 界面
案例分享：Qt激光加工焊接设备信息化软件研发（西门子PLC，mysql数据库，用户权限控制，界面设计，参数定制，播放器，二维图，期限控制，参数调试等）
案例分享：Qt激光加工焊接设备信息化软件研发（西门子PLC，mysql数据库，用户权限控制，界面设计，参数定制，播放器，二维图，期限控制，参数调试等）