user-interface - Blackberry ユーザーインターフェイスデザイン - カスタマイズ可能な UI?

Question

Blackberry アプリケーションを設計しようとしていますが、カスタムユーザーインターフェイス要素を作成する方法、既存の要素をスキンする方法、および他にどのような可能性があるかについてのリソースがあるかどうか疑問に思っています。

カスタム UI などを使用していくつかの iPhone アプリケーションを開発したので、UI 開発に関して BB world が提供するものはわかりません。

ヒント、提案、またはアイデアは素晴らしいでしょう。

score 69 · Accepted Answer

Blackberry にはスキンがありません。スキン効果を達成するために私が知っている 2 つの方法は次のとおりです。

独自のテーマを作成する
カスタムコントロールを作成する

BlackBerry テーマの作成

無効な Imageshack リンクを削除 - BlackBerry Theme Builder

テーマビルダーでできることその主な機能のいくつかを使用すると、次のことができます。

BlackBerry アプリケーションのアイコンをカスタマイズする

ホーム画面のバナー画像とアイコン・インジケーターの色を変更する

独自のボタンを作成する

ダイアログとポップアップ画面の外観をカスタマイズする

アイドル画面をカスタマイズする

メニューとリストの外観をカスタマイズする

電話アプリケーション画面をカスタマイズする

BlackBerry デバイスで使用されるフォントをカスタマイズする

自分だけの Blackberry テーマを作成する方法 by BrileyKenney
bb dev journal - Just Theme It!
BlackBerry テーマとアニメーショングラフィック

悪いニュース - テーマはデバイス OS 全体と各アプリケーションに適用
される作成されたテーマはスタンドアロンのソフトウェア設計製品かもしれませんが、開発されたアプリケーション用に独自のテーマを作成することは良い考えではないと思います。

デザインモックアップ

GUI のプログラミングには時間がかかる場合があり、コーディングせずに GUI の計画に関するいくつかの問題を解決したい場合は、GUI のモックアップを作成することをお勧めします。

無料の BlackBerry UI Prototyping Visio Stencils - ArtfulBits の v1.0を使用できます。

無効な Imageshack リンクを
削除無効な Imageshack リンクを削除

カスタムコントロールの作成

カスタムコントロールを作成することで、構成できます

コントロールサイズ
制御形状
コントロールの背景 (色、画像)
コントロールフォント (サイズ、スタイル、色)
コントロールボーダー (サイズ、スタイル、色)

これらすべては州にとって

無効
正常
集中
アクティブ (クリック)

最後に、背景画像を設定することで、コントロールを簡単にスキニングできます

基本

devsushi.com: Blackberry JDE API - User Interface Field Referenceは基本的に、コードニペットとスクリーンショットを使用して、既存の Blackberry UI コントロールのアイデアを提供します。

SO: ListField (BlackBerry) に項目を追加する
 SO: Blackberry の埋め込み HTML コントロール?
SO: Blackberry - DateField から日時値を取得する方法は?
SO: BlackBerry アプリケーションを iPhone のようにスタイリングする

マネージャー、レイアウト

標準のコントロールを使用しても、必要に応じてレイアウトおよびグループ化する必要があるため、カスタムマネージャーが必要です
: BlackBerry を考える: BlackBerry UI - 基本的なフィールドマネージャーを作成する BlackBerry を考える
 : シンプルな BlackBerry Grid レイアウトマネージャー
 スクロールなど
 SO: Blackberry アプリケーションでのスクロールの問題 SO
: Blackberry で ScrollBar を VerticalFieldManager に設定する方法は?
ワイヤレス: 画面のカスタムレイアウトマネージャーを作成する
 SO: Blackberry - コントロールのすべての子フィールドを取得する
 SO: レイアウトマネージャーでスクロールをキャンセルする SO :
BlackBerry でカスタムレイアウトを作成する
 SO: Blackberry がフルスクリーンで RichtextField の位置を設定する
 SO: フィールドを楽しむマネージャー
 SO: BlackBerry - カスタムメニューツールバー
 SO: BlackBerry - カスタム中心のサイクリック HorizontalFieldManager

カスタムコントロール

カスタムコントロールの作成に関する一連の記事:
Thinking BlackBerry: BlackBerry UI - シンプルなカスタムフィールド
 Coderholic: Blackberry Custom Button Field
Wireless: Create your own VirtualKeyboard for BBStorm
Wireless: チェックボックス付きの
 ListField CodeProject: Making a XY Chart/Plot as a BlackBerry Customフィールド
 SO: ブラックベリー - カスタムサイズの EditField
SO: ブラックベリー - BasicEditField に境界線を追加する方法は?
SO: Blackberry - LabelField の背景色の設定
 SO: Blackberry は水平マネージャーフォーカスの子フィールドの色を変更する
 SO: RichTextField、TextField の背景色とフォント色の設定
 SO: Blackberry Java:キャレットのないTextField?
SO: イメージマップのような Blackberry コントロール - 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 - アニメーション付きの読み込み画面
 SO: Blackberry Storm でアンチエイリアシングを設定するには?
SO: クリッピング領域/領域を設定する Blackberry SO:
BlackBerry では Bitmap と EncodedImage のどちらを使用する方がよいですか?
SO: Blackberry - フィールドレイアウトアニメーション

フォント

ワイヤレス: BlackBerry アプリケーションのフォントを変更する
 Developer Journals: フォント
 SO: Blackberry アプリケーションのカスタムフォントを作成するにはどうすればよいですか
 SO: Blackberry で LabelField テキストにフォントを設定する方法は?
SO: Blackberry UI をより魅力的にするにはどうすればよいですか?
SO: ブラックベリーラベルフィールドのフォントの色を動的に変更する方法は?
SO: BlackBerry - Unicode テキスト表示

score 5 · Accepted Answer

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() の後に、マネージャーの 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);
    }
}

score 4 · Accepted Answer

残念ながら、リソースはあまり良くありません。通常、最良の情報源は、探している特定のトピックに関するブログへの Google リンクです。

BB GUI コードを書き始めたばかりの場合は、多くのカスタム拡張機能を作成する必要がある可能性があるため、 ManagerクラスとFieldクラスについて理解することを強くお勧めします。

user-interface - Blackberry ユーザー インターフェイス デザイン - カスタマイズ可能な UI?

3 に答える 3

BlackBerry テーマの作成

デザインモックアップ

カスタム コントロールの作成

基本

マネージャー、レイアウト

カスタム コントロール

グラフィック、アニメーション

フォント

Bold 9000 の標準メディア アプリケーション スキンの例

Related

Reference

user-interface - Blackberry ユーザーインターフェイスデザイン - カスタマイズ可能な UI?

カスタムコントロールの作成

カスタムコントロール

Bold 9000 の標準メディアアプリケーションスキンの例