Jetpack Composeを使用してマップビューを追加する

アプリに宣言型UIを全面的に導入するには、KotlinとJetpack ComposeをMapViewクラスと組み合わせて使用します。Jetpack Composeは従来のXMLレイアウトに代わるコードベースでのUI開発を可能にし、HERE SDKとシームレスに統合できます。

Jetpack ComposeではなくXMLレイアウトを使用する場合や、XMLベースのレイアウトを使用する既存のプロジェクトで作業している場合は、XMLの実装方法について説明している「HERE SDKを統合する」セクションを参照してください。

Jetpack Composeを使用して新しいプロジェクトを作成する

Android Studio (このチュートリアルではバージョンAndroid Studio Narwhal 4 Feature Drop | 2025.1.4を使用) を起動し、次の手順を実行します。

[File](ファイル) を選択し、[New Project](新規プロジェクト) をクリックします。
[Phone and Tablet](携帯電話とタブレット)、[Empty Activity](空のアクティビティ) の順に選択して[Next](次へ) をクリックします。
プロジェクト名として、たとえば「HelloMapKotlin」を入力します。
[Minimum API level](最小APIレベル) の横でAPI 24を最小Android SDKとして設定します。
[Build configuration language](設定言語をビルド) を選択します。
[Save location](保存場所) で適切なディレクトリが選択されていることを確認し、[Finish](完了) をクリックして続行します。

[Empty Activity](空のアクティビティ) を選択すると、アプリでJetpack Composeを使用できます。

ウィザードが終了したら、必ず何も設定していないプロジェクトを構築し、エミュレータ (またはデバイス) でそれを実行します。すべてうまくいけば、「Hello Android」というテキストが表示されます。

プロジェクトを設定してHERE SDKを統合する

Jetpack Composeを使用してマップビューを追加する前に、次の設定手順が完了していることを確認してください。

資格情報とHERE SDKフレームワークへのアクセス権があることを確認します。詳細については、「利用開始」を参照してください。
HERE SDKが正しく統合されていることを確認します。

マップビューを追加する

HERE SDKをプロジェクトに統合し、資格情報を設定したら、Jetpack Composeを使用して新しいMapViewを追加します。

MainActivity.ktを開きます。Android Studioのウィザードに従って操作した場合、Greeting()というサンプルのcomposable関数が含まれている可能性があります。このメソッドはマップビューに置き換えるので、削除してかまいません。

MainActivityクラス内に、MapViewインスタンスのメンバー変数を作成します。

private var mapView: MapView? = null

HERE SDKが提供するMapViewクラスは、通常の (composableではない) Android Viewです。Jetpack Composeでは、AndroidViewというcomposableを使って従来のAndroidビューを表示できます。 MainActivity内に次のcomposableメソッドを追加します。

@Composable
fun HereMapView(savedInstanceState: Bundle?) {
    AndroidView(factory = { ctx ->
        MapView(ctx).apply {
            setupMapView(savedInstanceState, this)
        }
    })
}

これにより、MapViewがプログラムで作成され、setupMapView()メソッドに渡され、初期化を続けます。

ここで、次のメソッドをMainActivityに追加します。これによりMapViewが初期化され、状態が復元され、マップシーンがロードされます。

private fun setupMapView(savedInstanceState: Bundle?, mapView: MapView) {
    this.mapView = mapView
    mapView.onCreate(savedInstanceState)
    mapView.onResume()
    if (savedInstanceState == null) {
        mapView.mapScene.loadScene(MapScheme.NORMAL_DAY, null)
    }
}

MapViewが未解決シンボルであるエラーが表示される場合は、自動完了ホットキーを使用してcom.here.sdk.mapview.MapViewをインポートリストに追加するか、手動で追加します。

複数のMapViewインスタンスを作成して1つの画面に同時に表示できます。

画面に地図を表示するには、MainActivityのonCreate()メソッド内でcomposable関数HereMapView()を呼び出す必要があります。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    initializeHERESDK()
    setContent {
        MyApplicationTheme {
            HereMapView(savedInstanceState)
        }
    }
}