カスタムタイトルバー (10.1.68) - Mobile Platform as a Service

Nebula コンテナーでは、ナビゲーションバーをカスタマイズできます。タイトルの位置や戻るボタンのスタイルなど、ナビゲーションバーのスタイルを定義できます。このトピックでは、ベースライン 10.1.68 でナビゲーションバーをカスタマイズする方法について説明します。

前提条件

このガイドを読む前に、以下の重要な点に注意してください。

ミニプログラムと HTML5 ページで共有されるナビゲーションバーを開発するには、HTML5 ページでのナビゲーションバーの使用とミニプログラムでのナビゲーションバーの使用を考慮する必要があります。ナビゲーションバーをミニプログラムまたは HTML5 ページのみで使用する場合、このルールは無視できます。
カスタムナビゲーションバーは、コンテナーで API 操作を呼び出す標準プロセスに準拠している必要があります。このドキュメントをよく読んで、必要に応じてカスタムナビゲーションバーを開発してください。
デフォルトでは、ミニプログラムは組み込みのナビゲーションバーを使用します。ミニプログラムでカスタムナビゲーションバーを使用するには、「HTML5 コンテナーを構成する」をご参照ください。
ナビゲーションバーの色は動的に設定できます。最適なエクスペリエンスを実現するには、2 セットのテーマ構成を用意し、シナリオに基づいて切り替える必要があります。

手順

抽象クラス AbsTitleView を継承し、カスタムナビゲーションバーを実装します。

H5ViewProvider を実装します。createTitleView メソッドで、カスタムナビゲーションバーのインスタンスを作成して返します。

public class H5ViewProviderImpl implements H5ViewProvider {
     @Override
     public H5TitleView createTitleView(Context context) {
         return new NewH5TitleViewImpl(context);
     }

     @Override
     public H5NavMenuView createNavMenu() {
         return null;
     }

     @Override
     public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
         return null;
     }

     @Override
     public H5WebContentView createWebContentView(Context context) {
         return null;
     }
 }

アプリケーションの起動など、特定のシナリオでコンテナーに H5ViewProvider を設定します。
```
MPNebula.setCustomViewProvider(new H5ViewProviderImpl());
```

プロジェクトが Portal および Bundle アーキテクチャに基づいている場合は、追加の構成が必要です。

H5Utils.setProvider(H5ReplaceResourceProvider.class.getName(), new H5ReplaceResourceProvider() {
     @Override
     public String getReplaceResourcesBundleName() {
         return BuildConfig.BUNDLE_NAME;
     }
 });

詳細情報

背景色

/**
     * ナビゲーションバーの背景色の値を返します。
     * @return
     */
    public abstract int getBackgroundColor();

    /**
     * ナビゲーションバーの透明度を設定します。
     * @param alpha
     */
    public abstract void setBackgroundAlphaValue(int alpha);

    /**
     * アルファ値を使用せずにナビゲーションバーの背景色を設定します。
     * @param color
     */
    public abstract void setBackgroundColor(int color);

    /**
     * ナビゲーションバーをリセットします。
     */
    public abstract void resetTitle();

setTitleColor という名前の JSAPI がフォアグラウンドページで呼び出されると、resetTitle 操作がトリガーされます。この場合、表示要素をデフォルト要素にリセットすることをお勧めします。これらの表示要素には、ナビゲーションバーの背景と、このトピックで後述する他のコンポーネントの色の値が含まれます。

タイトル

サブタイトルは、HTML5 ページのみのシナリオでサポートされています。アプリケーションでサブタイトルが不要な場合は、サブタイトルの実装を無視できます。

HTML5 ページがタイトルバーのタップイベントをリッスンできるようにするには、ナビゲーションバーが指定されたシナリオで invokeTitleClickEvent メソッドを呼び出せるようにする必要があります。HTML5 ページがサブタイトルバーのタップイベントをリッスンできるようにするには、ナビゲーションバーが invokeSubTitleClickEvent メソッドを呼び出せるようにする必要があります。

/**
     * メインタイトルのテキストを返します。
     * @return
     */
    public abstract String getTitle();

    /**
     * メインタイトルのテキストを設定します。
     * @param title
     */
    public abstract void setTitle(String title);

    /**
     * サブタイトルのテキストを設定します。
     * @param subTitle
     */
    public abstract void setSubTitle(String subTitle);

    /**
     * メインタイトルのビューを返します。
     * @return
     */
    public abstract TextView getMainTitleView();

    /**
     * サブタイトルのビューを返します。
     * @return
     */
    public abstract TextView getSubTitleView();

左側のコントロールセクション

/**
     * 閉じるボタンを表示するかどうかを設定します。
     * @param visible
     */
    public abstract void showCloseButton(boolean visible);

    /**
     * 戻るボタンを表示するかどうかを設定します。
     * @param visible
     */
    public abstract void showBackButton(boolean visible);

    /**
     * ホームボタンを表示するかどうかを設定します。
     * @param visible
     */
    public abstract void showBackHome(boolean visible);

    /**
     * タイトルバーに読み込み進行状況アイコンを表示するかどうかを設定します。
     * @param visible
     */
    public abstract void showTitleLoading(boolean visible);

[閉じる] ボタン

前の図の赤いボックスに示すように、[閉じる] ボタンは HTML5 ページにのみ表示されます。ブラウザに複数の履歴オンラインページが存在する場合、コンテナーは showCloseButton メソッドを呼び出して、[閉じる] ボタンを表示するかどうかを制御します。[閉じる] ボタンがタップされると、コンテナーの動作仕様に準拠するために invokePageCloseEvent メソッドを呼び出す必要があります。

[戻る] ボタン

前の図の赤いボックスに示すように、[戻る] ボタンは、カスタムナビゲーションバーに必ず実装する必要があるコントロールです。コンテナーは showBackButton メソッドを呼び出して、[戻る] ボタンを表示するかどうかを制御します。[戻る] ボタンがタップされると、コンテナーの動作仕様に準拠するために invokePageBackEvent メソッドを呼び出す必要があります。

[ホーム] ボタン

[ホーム] ボタンはミニプログラムでのみ使用されます。ミニプログラムのホームページ以外のページにリダイレクトされると、コンテナーは showBackHome メソッドを呼び出して、[ホーム] ボタンを表示するかどうかを制御します。[ホーム] ボタンがタップされると、コンテナーの動作仕様に準拠するために invokeHomeClickEvent メソッドを呼び出す必要があります。

読み込み進行状況アイコン

HTML5 ページまたはミニプログラムがナビゲーションバーの読み込みアニメーションの API を呼び出すと、コンテナーは showTitleLoading メソッドを呼び出して、読み込み進行状況アイコンを表示するかどうかを制御します。

右側のコントロールセクション

右側のコントロールセクションは、OptionMenu セクションとも呼ばれます。主にユーザーに追加の操作を提供するために使用されます。

HTML5 コンテナーの場合:
ミニプログラムの場合:

前の図に示すように、OptionMenu セクション用に 2 つのビュセクションを予約する必要があります。コンテナーは、インデックスに基づいてこれら 2 つのセクションを管理します。インデックスは右から左にソートされ、0 から始まります。

public abstract void showOptionMenu(boolean visible);

    public abstract View getOptionMenuContainer(int index);

    public abstract void setOptionMenu(boolean reset, boolean override, boolean isTinyApp, List<MenuData> menus);

コンテナーは showOptionMenu メソッドを呼び出して、OptionMenu セクションを表示するかどうかを制御します。場合によっては、コンテナーはこのセクションのビューを取得し、ビューに基づいて操作を実行する必要があります。getOptionMenuContainer メソッドを適切に実装する必要があります。

setOptionMenu メソッドを実装するには、「右上のボタンを設定する」のリクエストパラメーターを参照してください。icontype パラメーターは組み込みのボタンスタイルです。HTML5 ページでのみ使用できます。アクセスシナリオで HTML5 ページを使用しない場合は、このパラメーターを無視できます。それ以外の場合は、さまざまなスタイルのボタンを構成する必要があります。icontype パラメーターと同様に、redDot パラメーターはオプションです。

HTML5 ページまたはミニプログラムが右上のボタンのタップイベントをリッスンできるようにするには、invokeOptionClickEvent メソッドを呼び出す必要があります。

ミニプログラムでは、次の設定に注意してください。

HTML5 ページとミニプログラムを区別するには、setOptionMenu メソッドの isTinyApp パラメーターを true に設定する必要があります。
複数のボタンを設定する場合は、右から 2 番目のボタンから始める必要があります。

ミニプログラムの右上のコントロールセクション

ミニプログラムでは、次の手順を実行して、右側セクションを特別に実装する必要があります。

レガシー抽象クラス AbsTinyOptionMenuView を使用して、カスタムコントロールセクションを実装します。
アプリケーションの起動など、特定のシナリオでコンテナーに TinyOptionMenuViewProvider を設定します。

H5Utils.setProvider(TinyOptionMenuViewProvider.class.getName(), new TinyOptionMenuViewProvider() {
    @Override
    public AbsTinyOptionMenuView createView(Context context) {
        return new TinyOptionMenuView(context);
    }
});

コンテナーの仕様に基づいて、[その他] ボタンと 閉じる ボタンのビューを実装および構成する必要があります。

public abstract void setOptionMenuOnClickListener(View.OnClickListener listener);

    public abstract void setCloseButtonOnClickListener(View.OnClickListener listener);

    public abstract void setCloseButtonOnLongClickListener(View.OnLongClickListener listener);

    public abstract void onStateChanged(TinyAppActionState currentState);

    public abstract View getView();

コンテナーは上記の最初の 3 つのメソッドを呼び出して、適切な応答コールバックを設定します。指定されたビューに応答コールバックを設定する必要があります。

onStateChanged メソッドは、LBS（位置情報サービス）および Bluetooth シナリオで呼び出されます。たとえば、ミニプログラムが LBS（位置情報サービス）を使用している場合、コンテナーはこのメソッドを呼び出し、コールバックに応答できます。次のコードはスタイルを示しています。

次のサンプルコードは参考用です。

public class TinyOptionMenuView extends AbsTinyOptionMenuView {

    private View container;

    private ImageView ivMore;

    private View ivClose;

    private Context context;

    public TinyOptionMenuView(Context context) {
        this.context = context;
        ViewGroup parent = null;
        if (context instanceof Activity) {
            parent = (ViewGroup) ((Activity) context).findViewById(android.R.id.content);
        }
        container = LayoutInflater.from(context).inflate(R.layout.layout_tiny_right, parent, false);
        ivClose = container.findViewById(R.id.close);
        ivMore = (ImageView) container.findViewById(R.id.more);

    }

    @Override
    public View getView() {
        return container;
    }

    @Override
    public void setOptionMenuOnClickListener(View.OnClickListener onClickListener) {
        ivMore.setOnClickListener(onClickListener);
    }

    @Override
    public void setCloseButtonOnClickListener(View.OnClickListener onClickListener) {
        ivClose.setOnClickListener(onClickListener);
    }

    @Override
    public void setCloseButtonOnLongClickListener(View.OnLongClickListener onLongClickListener) {
        ivClose.setOnLongClickListener(onLongClickListener);
    }

    @Override
    public void onStateChanged(TinyAppActionState state) {
        if (state == null) {
            ivMore.setImageDrawable(context.getResources().getDrawable(R.drawable.icon_more));
        } else if (state.getAction().equals(TinyAppActionState.ACTION_LOCATION)) {
            ivMore.setImageDrawable(context.getResources().getDrawable(R.drawable.icon_miniprogram_location));
        }
    }
}

テーマの変更

ミニプログラムまたは HTML5 アプリケーションによって、ナビゲーションバーで異なる背景色が使用される場合があります。ユーザーエクスペリエンスを向上させるには、ナビゲーションバーの背景色の変更に応じて、右上のコントロールセクションなど、ナビゲーションバーの他の要素も調整する必要があります。

ナビゲーションバーの拡張機能では、右上のコントロールセクションとナビゲーションバーは異なるコンポーネントです。したがって、右上のコントロールセクションがナビゲーションバーの変更に応答できるようにするための API 操作が提供されています。

AbsTinyOptionMenuView クラスは、onTitleChanged メソッドを提供して、オーバーライドを使用してナビゲーションバーの変更に応答できるようにします。このメソッドが呼び出されると、H5TitleView オブジェクトを渡して、背景色など、ナビゲーションバーに関する情報を取得できます。さらに、AbsTinyOptionMenuView クラスは、getTitleBar メソッドを提供して、ナビゲーションバーのオブジェクトを直接取得できるようにします。または、AbsTitleView クラスが H5TitleView クラスを実装しているため、H5TitleView を実装できるナビゲーションバーオブジェクトに変換することもできます。これにより、ナビゲーションバーに関する詳細情報を取得できます。
```
 protected void onTitleChange(H5TitleView title)
```

onTitleChange 操作が呼び出されるようにするには、たとえばナビゲーションバーの背景色が設定されている場合などに、AbsTitleView クラスによって提供される notifyTitleBarChanged メソッドを積極的に呼び出す必要があります。次のサンプルコードは参考用です。

 package com.mpaas.demo.nebula;

  public class NewH5TitleViewImpl extends AbsTitleView {

      @Override
      public void setBackgroundAlphaValue(int i) {
          content.getContentBgView().setAlpha(i);
          notifyTitleBarChanged();
      }

      @Override
      public void setBackgroundColor(int i) {
          content.getContentBgView().setColor(i);
          notifyTitleBarChanged();
      }

      @Override
      public void resetTitle() {
          content.getContentBgView().setColor(context.getResources().getColor(R.color.h5_default_titlebar_color));
          notifyTitleBarChanged();
      }
  }

上記のサンプルコードでは、notifyTitleBarChange メソッドが呼び出されると、AbsTinyOptionMenuView サブクラスのオブジェクトが 100% 初期化されていない可能性があります。したがって、setH5Page メソッドをオーバーライドして、ナビゲーションバーに関する情報を取得し、現在のテーマを判断することをお勧めします。次のサンプルコードは参考用です。

 public class TinyOptionMenuView extends AbsTinyOptionMenuView {

      @Override
      public void setH5Page(H5Page h5Page) {
          super.setH5Page(h5Page);
          // title becomes available from here.
          if (getTitleBar().getBackgroundColor() == -1) {
              bgView.setBackgroundColor(Color.RED);
          }
      }
  }