Добавление карты Google в Jetpack Compose 🗺📌 — Использование AndroidView и android-maps-compose

Добавление карты в ваше приложение является важной функцией, карта Google обеспечивает более простую реализацию. При использовании представления XML это легко, и есть много ресурсов, которые уже освещают это, но с новым Jetpack Compose мы должны сосредоточиться на том, как сделать это декларативным способом.

Я использовал его в Snapchat Clone с Jetpack Compose, это действительно интересно и легко реализовать android-maps-compose. вы посмотрите, я добавил ссылку ниже.🗺🎉

В настоящее время есть два способа добавить Карту Google в ваше приложение Jetpack Compose: во-первых, использовать старый способ Android View, а во-вторых, использовать android-maps-compose, представленный недавно.

Требуемая настройка

Прежде всего, получите Google Map API из консоли Google Play, укажите ссылку на видео.

Затем добавьте разрешение на доступ в Интернет и метатег, чтобы добавить ключ API в Manifest.xml.

<uses-permission android:name="android.permission.INTERNET" />
<application>
    .......
    .......
    <meta-data android:name="com.google.android.geo.API_KEY"
        android:value="${GMP_KEY}"
        />
</application>

Я также использовал secrets-gradle-plugin, чтобы скрыть свой ключ API Карт, это действительно важно, если вы хотите поделиться на GitHub. Вот видеоссылка вам в помощь.

Наконец, давайте начнем кодировать пользовательский интерфейс с помощью Jetpack Compose, используя как Android View, так и Android Compose Map.

Использование AndroidView🏴‍☠️

Это старый способ добавить Карты Google в ваш Jetpack Compose.

Сначала добавляя зависимости, я ожидаю, что вы уже добавили зависимости Compose.

implementation 'com.google.maps.android:android-maps-utils:2.2.3'    implementation "com.google.android.libraries.maps:maps:3.1.0-beta"    implementation "com.google.maps.android:maps-v3-ktx:2.2.0"    implementation "androidx.fragment:fragment-ktx:1.4.1"

Во-первых, давайте разберемся, что такое AndroidView.

@Composable
fun <T : View> AndroidView(     
     factory: (Context) -> T,
     modifier: Modifier = Modifier,
     update: (T) -> Unit = NoOpUpdate ) { 
   ... 
}

AndroidView() — это Composable, который можно использовать для добавления представлений Android внутри функции @Composable.

• factory ожидает функцию, которая получает контекст Android и возвращает класс, расширяющий представление Android. Эта функция конструктора будет выполняться только при начальном рендеринге и когда родительский составной объект запускает новое выполнение. Вы можете использовать здесь значение состояния, но оно не будет наблюдать никаких изменений.
• modifier можно использовать для применения модификаторов к макету, в котором будет размещено созданное представление.
• В функции update вы получите представление, созданное в ctor. Эта функция используется для обработки всех обновлений дерева композиции. Здесь вы можете использовать свои объекты состояния и обрабатывать всю логику обновления.

Теперь давайте обсудим наш подход, мы создадим rememberMapViewWithLifecycle(), который вернет нам MapView, с улучшением, учитывающим жизненный цикл, с управляемым состоянием, мы подключили наблюдателя внутри DisposableEffect с LocalLifeCycleOwner. Чтобы управлять различными событиями жизненного цикла и работать соответствующим образом, мы создали функцию rememberMapLifecycleObserver(), которая будет соответствующим образом возвращать состояние карты. Вы можете просто скопировать эти функции, они будут работать для общих случаев использования.

Вы можете получить все функции Карты от rememberMapViewWithLifecycle(), как и вы uiSettings.isZoomControlsEanbled , setMapStyle() и т. д.

Использование Android Maps Compose ⚡

Добавим некоторые зависимости

compose_version = '1.2.0-alpha06'
// Use 1.2.x version of compose for map-compose >=1.3.0
// This is common issue focus on this.

implementation "com.google.maps.android:maps-compose:2.0.0"    implementation "com.google.android.gms:play-services-maps:18.0.2"

Это действительно просто, если вы понимаете компоновку, вы можете просто понять ниже, зависимости дают нам доступ к GoogleMapcomposable.

Наконец-то вы сделали это! Вау, вы добавили карту в приложение для создания сообщений!

По любым сомнениям и предложениям вы можете обратиться в мой Instagram, LinkedIn. Подписывайтесь на меня, чтобы узнавать о контенте Kotlin и многом другом. Удачного кодирования!

Я буду очень признателен за один из них 👏

Рекомендации

Недавние Посты