Android UI のカスタマイズ

ConsumerMapStyle クラスには、動的なカスタマイズが可能なセッター メソッドとゲッター メソッドがあります。 をご覧ください。このクラスは、 ConsumerController.getConsumerMapStyle() メソッドを呼び出します。

UI のカスタマイズはデバイスの回転後も維持され、 ConsumerController 接続解除されます。

カスタムのマーカー

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

マーカーの種類

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

  • 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 によって提供されるデフォルト値をオーバーライドします。デフォルト値 setPolylineStyleOptions を呼び出して復元できます PolylineOptions パラメータには null を指定します。有効な 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)

カメラのズームを調整してジャーニーにピントを合わせる

デフォルトの現在地ボタン は、デバイスの位置にカメラの中心を合わせます。もし アクティブなルートと注文の進行状況のセッションでは、 デバイスの位置情報ではなくジャーニーに焦点を合わせることができます。

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

デバイスの位置情報ではなくカスタマージャーニーに集中できるよう、 では、デフォルトで有効になっている AutoCamera 機能を利用できます。カメラがズームする [移動中] と [注文の進行状況] のルートと、次のルートのウェイポイントがフォーカスされます。

カメラの動作をカスタマイズする

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

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

Cloud ベースのマップのスタイル設定

また、 ConsumerMapView および ConsumerMapFragment Cloud ベースのマップのスタイル設定をサポートしています。 Cloud ベースのマップのスタイル設定を使用するには、選択したマップが レンダラが LATEST である。次の例は、BigQuery の Cloud ベースのマップのスタイル設定をプロジェクトに追加できます。

ConsumerMapView

ConsumerMapView で Cloud ベースのマップのスタイル設定を使用するには、 GoogleMapOptions に mapId フィールドを指定し、GoogleMapOptions を getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

例

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

Cloud ベースのマップのスタイル設定を使う方法は 2 つあります。 ConsumerMapFragments:

  1. XML を使用して静的に生成。
  2. newInstance を使用して動的に。

XML を使用して静的に作成する

Cloud ベースのマップのスタイル設定を ConsumerMapFragment は、指定した map:mapId XML 属性を追加します。 mapId。次の例をご覧ください。

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

newInstance で動的に

newInstance を指定して Cloud ベースのマップのスタイル設定を使用するには、 ConsumerMapFragment は、GoogleMapOptions で mapId フィールドを設定し、 GoogleMapOptions～newInstance。次の例をご覧ください。

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}