web-dev-qa-db-ja.com

ブラックベリーのユーザーインターフェースデザイン-カスタマイズ可能なUI?

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

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

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

20
John Stewart

ブラックベリーには表皮効果がありません。表皮効果を達成するために私が知っている2つの方法は次のとおりです。

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

BlackBerryテーマを作成する

削除されたデッドImageshackリンク-BlackBerry Theme Builder

テーマビルダーで何ができますか?その主な機能のいくつかはあなたがすることを可能にします:

  • BlackBerryアプリケーションアイコンをカスタマイズする
  • ホーム画面のバナー画像とアイコン/インジケーターの色を変更する
  • 独自のボタンを作成する
  • ダイアログとポップアップ画面の外観をカスタマイズします
  • アイドル画面をカスタマイズする
  • メニューとリストの外観をカスタマイズする
  • 電話アプリケーション画面をカスタマイズする
  • BlackBerryデバイスで使用されるフォントをカスタマイズする

BrileyKenneyによる独自のBlackberryテーマを作成する方法
bb dev journal-Just Theme It!
BlackBerry Themes&Animated Graphics

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

デザインモックアップ

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

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

削除されたデッドImageshackリンク
削除されたデッドImageshackリンク

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

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

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

州のためのこのすべて

  • 無効
  • 正常
  • 焦点を当てた
  • アクティブ(クリック)

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

基本

devsushi.com:Blackberry JDE API-ユーザーインターフェイスフィールドリファレンス 基本的に、コードスニペットとスクリーンショットを使用して、既存のブラックベリーUIコントロールのアイデアを提供します。

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

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

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

カスタムコントロール

カスタムコントロールの作成に関する一連の記事:
BlackBerryを考える:BlackBerry UI-単純なカスタムフィールド
Coderholic:Blackberryカスタムボタンフィールド
ワイヤレス:BBStorm用に独自のVirtualKeyboardを作成する
ワイヤレス:チェックボックス付きのListField
CodeProject:XYチャート/プロットをBlackBerryカスタムフィールドとして作成
SO:Blackberry-カスタムサイズEditField
SO:Blackberry-BasicEditFieldに境界線を追加する方法は?
SO:Blackberry-LabelFieldの背景色の設定
SO:ブラックベリーは水平マネージャーフォーカスの子フィールドの色を変更します
SO:RichTextField、TextFieldの背景色とフォント色の設定
SO:Blackberry Java:TextFieldキャレットなし
SO:イメージマップのようなブラックベリーコントロール-CLDCアプリケーション
SO:Blackberry-大きなテキストを含む1行のBasicEditField
SO:Blackberry-カスタムBubbleChartField
SO:Blackberry-チェックボックスを使用してリストからチェック済みアイテムを取得します
SO:BlackBerry-カスタム日付フィールドの作成
SO:BlackBerry-サブメニューの作成方法は?
SO:BlackBerry-絵文字付きのラベルを表示するにはどうすればよいですか??
SO:BlackBerry-プログラムでタイピングモードインジケーターを表示

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

SO:BlackBerry-画面に画像を描画します
SO:Blackberry-背景画像/アニメーションRIM OS 4.5.
SO:Blackberry-アニメーション付きのロード画面
SO:Blackberry Stormでアンチエイリアシングを設定する方法は?
SO:ブラックベリーがクリッピング領域/領域を設定
SO:BlackBerryでビットマップまたはEncodedImageを使用する方が良いですか?
SO:Blackberry-フィールドレイアウトアニメーション

フォント

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

69
Maksym Gontar

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

削除されたデッド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);
    }
}
  • horizo​​ntalFieldManagersを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);
    }
}
5
Maksym Gontar

Theresources 残念ながらあまり良くありません。最良の情報源は通常、あなたが探している特定のトピックを持つブログにリンクしているグーグルです。

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

4
Ben S