Android UI のカスタマイズ

ConsumerMapStyle クラスには、マーカーやポリラインを動的にカスタマイズできるセッター メソッドとゲッター メソッドが用意されています。このクラスは、ConsumerController.getConsumerMapStyle() メソッドを使用して非同期に公開されます。

UI のカスタマイズはデバイスの回転後も保持され、ConsumerController が接続解除されるまで有効です。

カスタムのマーカー

マーカーのタイプとそのプロパティを設定するメソッドは、ConsumerMapStyle.setMarkerStyleOptions() です。カスタム マーカーのオプションは、Consumer SDK で提供されるデフォルト値をオーバーライドします。デフォルト値に戻すには、MarkerOptions パラメータに null を使用して setMarkerStyleOptions() を呼び出します。getMarkerStyleOptions() を使用してアクティブな MarkerOptions を取得します。

マーカーの種類

次のマーカーをカスタマイズできます。

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

ルートのモニタリング中は TRIP_PICKUP_POINT と TRIP_DROPOFF_POINT が表示されます。

ルートのモニタリング中に TRIP_VEHICLE が表示されます。マーカー アイコンは、ルートの実際の車両タイプに応じて変わることはありません。Consumer SDK はルートのモニタリング中に TRIP_VEHICLE アイコンの回転を更新して、ルートを走行する実際の車両の動作を再現します。

マーカーのオプション

各マーカーで使用できるカスタマイズ可能なプロパティは、Google マップ MarkerOptions で提供される一連のプロパティです。

MarkerOptions はそのコンストラクタを使用して作成され、カスタマイズされたプロパティは「Setter」スタイル メソッドを使用して指定します。プロパティごとにデフォルト値が提供されるため、カスタム値を指定するだけで済みます。

マーカーをオフにするには、visible を false に設定します。独自の UI 要素を代わりに使用できるように、十分な量のデータを提供する必要があります。

例

Java

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

Kotlin

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

カスタム ポリライン

ポリラインのカスタマイズは、ConsumerMapStyle.setPolylineStyleOptions メソッドを使用して設定します。カスタム ポリライン オプションを設定すると、Consumer SDK で指定されたデフォルト値がオーバーライドされます。デフォルト値を復元するには、PolylineOptions パラメータに null を指定して setPolylineStyleOptions を呼び出します。アクティブな PolylineOptions は、getPolylineStyleOptions メソッドを使用して取得できます。

ポリラインのタイプ

次のポリライン タイプをカスタマイズできます。

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE と REMAINING_ROUTE はルート モニタリング中に表示され、車両のルートを表します。

ポリラインのプロパティ

各ポリラインで使用できるカスタマイズ可能なプロパティは、Google マップの PolylineOptions から提供されています。PolylineOptions はそのコンストラクタを使用して作成され、カスタマイズされたプロパティは「Setter」スタイル メソッドを使用して指定します。プロパティごとにデフォルト値が提供されるため、カスタム値を指定するだけで済みます。ポリラインをオフにするには、visible を false に設定します。

例

Java

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

有効なルートと残りのルート

[移動と注文の進行状況] を有効にすると、乗車中の車両と残りの経路を示すポリラインを使用して、ユーザーのエクスペリエンスをカスタマイズできます。

アクティブ ルートは、ユーザーのアクティブなルートの次のウェイポイントに到達するために車両が現在走行している経路です。残りのルートは、車両がアクティブ ルートを通過する経路です。アクティブなルートの地点が最後のルートの地点である場合、残りのルートは存在しません。

アクティブなポリラインとその他のポリラインは、アプリでカスタマイズして可視性を制御できます。デフォルトでは、アクティブなルートが表示され、残りのルートは表示されません。

例

Java

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

交通状況に対応したポリライン

ポリラインの交通状況レイヤは、デフォルトで無効になっています。この機能を有効にすると、通常とは異なる交通量を示すセグメントが、Z-Index の PolylineOptions.getZIndex() と交通状況に応じたオフセットでルート ポリラインの上に描画されます。

交通状況は、4 つの速度タイプのいずれかで表されます。速度タイプごとに色をカスタマイズできます。

「交通対応ポリライン」を有効にするには、TrafficStyle オブジェクトを作成する必要があります。このオブジェクトは、setPolylineTrafficStyle() を呼び出して ConsumerMapStyle に渡されます。

例

Java

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)

ジャーニーに焦点を合わせるためにカメラのズームを調整する

Maps SDK に組み込まれているデフォルトの現在地ボタンでは、カメラの位置がデバイスの位置に配置されます。移動中と注文の進行状況のアクティブなセッションがある場合は、カメラを中央に配置して、デバイスの位置情報ではなく移動経路に焦点を合わせることをおすすめします。

Consumer SDK for Android 組み込みソリューション: AutoCamera

デバイスの位置情報ではなく、ジャーニーに集中できるように、Consumer SDK には、デフォルトで有効になっている AutoCamera 機能が用意されています。「Trip and Order Progress」ルートと次のルートの地点にフォーカスするようにカメラがズームします。

カメラの動作のカスタマイズ

カメラの動作をより細かく制御する必要がある場合は、ConsumerController.setAutoCameraEnabled() を使用して AutoCamera を無効または有効にできます。

ConsumerController.getCameraUpdate() は、その時点で推奨されるカメラ境界を返します。この CameraUpdate を引数として GoogleMap.moveCamera() または GoogleMap.animateCamera() に指定できます。